The primefaces codeMirror is failing to properly load its own CSS and JavaScript files

I am experiencing an issue with codeMirror from primeface-extension when trying to use it with SQL syntax.

Upon loading the page that contains this component, I encounter a 404 error where the Css and javascript components cannot be found.

Despite having my code identical to the example from showcase-ext codeMirror, the problem persists.

This is happening while using primefaces 5.1 and primefaces-ext 2.1.0.

Has anyone else faced this problem before?

Thank you for your help in advance.

Edit:

Here is a snippet of my JSF:

    <pe:codeMirror id="codeMirror"
    value="#{sandboxBean.content}" lineNumbers="true"/>  

    <p:commandButton actionListener="#{sandboxBean.changeMode}" update="codeMirror"  
             value="Change mode with AJAX" style="margin-top:10px;"/>

And here is part of my bean:

private String content;  
private String mode = "javascript";  

public void changeMode() {  
    if (mode.equals("css")) {  
        mode = "javascript";  
    } else {  
        mode = "css";  
    }  
}  

public List<String> complete(final CompleteEvent event) {  
    final ArrayList<String> suggestions = new ArrayList<String>();  

    suggestions.add("context: " + event.getContext());  
    suggestions.add("token: " + event.getToken());  

    return suggestions;  
}  

public String getContent() {  
    return content;  
}  

public void setContent(final String content) {  
    this.content = content;  
}  

public String getMode() {  
    return mode;  
}  

public void setMode(final String mode) {  
    this.mode = mode;  
}

The browser console shows the error: 404 (Not Found) for the CSS and JS files of the primefaces component.

All other primefaces components load correctly, so I'm puzzled as to why this specific one isn't working.

Can anyone spot what might be wrong with my code?

Answer №1

After encountering the same error, I found a solution by including the resources-codemirror dependency in my pom.xml file.

<dependency> 
    <groupId>org.primefaces.extensions</groupId> 
    <artifactId>primefaces-extensions</artifactId> 
    <version>3.2.0</version> 
</dependency>       
<dependency>
    <groupId>org.primefaces.extensions</groupId>
    <artifactId>resources-codemirror</artifactId>
    <version>1.2.1</version>
</dependency>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The algorithm for Strict Equality Comparison when applied to an identical object

While reviewing the Vue.js source code, I came across a contentious if statement. This part defines a reactive setter for a property. if (newVal === value || (newVal !== newVal && value !== value)) { return } I have consulted this strict equali ...

Incorporating JavaScript code within a partial response retrieved via AJAX

Is it frowned upon to include JavaScript within partials fetched via AJAX? Let's imagine a scenario where I have a button on that retrieves a form using AJAX. It is also desired to implement some jQuery event handlers for this form (such as validati ...

Tips for transferring a file to PocketBase using NodeJs

Currently, I am in the midst of a project that necessitates uploading numerous PDF files to a PocketBase collection. All the necessary files are saved on my computer and my goal is to upload them using nodejs along with the PocketBase JavaScript SDK. Howe ...

Trouble accessing properties in Mongoose objects?

I am facing a puzzling issue while attempting to retrieve properties from a MongoDB (mongoose) find query. When I log the entire object, everything is visible. However, when I attempt to access a specific property, it returns undefined. The object is cert ...

Troubleshooting a Typescript typing problem within the map function for mixed types in a React

I have created two object types, Team and Position, which are both part of an array that I loop through in my react component. When I try to iterate over the array using the map function, I encounter the following errors: Here are some examples of the er ...

Matching Figures to their Descriptions

I am currently working on a website and looking to include images with captions that display the price of each item underneath. The issue I'm facing is that the captions are aligning horizontally instead of vertically. Can anyone provide assistance wi ...

Utilizing multiple instances of date picker components in React.js

Is there a way to update the date on react-datepicker when using multiple instances of the datepicker component? I have encountered an issue with this. Here is the code for the Date picker Component: <DatePicker selected={this.state.from} onChange ...

Ways to display dynamic content within a div using Bootstrap's vertical tab through a click event in PHP

I have been working on displaying static content in a div using Bootstrap vertical tabs, similar to this: Link: However, I am facing an issue with showing dynamic content in a div using a Bootstrap vertical tab through a PHP click event. I have been try ...

Deleting a model using RestAPI and referencing another model

UPDATE: My professor just advised me to access the driver only from within the admin, not from the admin. Currently, I am developing a project that involves using restAPI's, and one of the requirements is that an admin should be able to delete a driv ...

Using navigateByUrl() to pass a query parameter

When I click on an icon, I want to navigate to a new page. Here's the code snippet: this.prj = e.data.project_number; this.router.navigateByUrl('/dashboard/ProjectShipment/634'); Instead of hardcoding the query parameter 000634, I need ...

What is the best way to manage Page Refresh using Angular.js?

I recently followed the tutorial at http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application This guide went over controllers and services using angular.js for a single-page application. However, when I try to directly access /pageName o ...

Choosing options from an API response in a REACT-JS application

I have a Select Component in my application and I want it to automatically show the selected data once the response is received. import Select from "react-select"; <Select menuPlacement="auto" menuPosition="fixed" ...

Issues with align-content in Internet Explorer 11

.row { background: green; color: white; margin-top: 20px; } .col2 { border: 3px solid black; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-end; } <link rel="stylesheet" href="https://stackpath.bootstrapcdn. ...

Choosing an item in an AngularJS select directive from an external origin

I'm currently working on developing a form using Angular JS for editing venue details such as address and city. The backend system is powered by Django and offers a REST API (Django Rest Framework) which I am interfacing with through Restangular serv ...

Sending emails with SMTP in JavaScript using the mailto form

I'm facing a challenge with my form. I am looking for a way to have the Send-email button trigger mailto without opening an email client, instead automatically sending via JavaScript (smtp). I'm not sure if this is achievable or if I'm askin ...

Unusual display of fonts on Chrome

Recently, I encountered a strange issue with font rendering on Chrome/Opera compared to Firefox. The problem can be seen in the preview below - pay attention to the pink text. It appears blurry initially but sharpens once text input is focused. This same i ...

Creating a case-insensitive path for pages in NextJS can be achieved by ensuring that all

I have a file named about.tsx under the pages folder. This means that the path for accessing the page is /about, allowing me to visit it through example.com/about. Strangely, attempting to access the same page via example.com/About results in a 404 error ...

Tips for eliminating the flash of color upon website loading

Every time I visit my site at , there's a brief moment of grey before the site fully loads. Despite being a simple landing page, it seems to be taking longer than expected to load. I suspect this issue is caused by the combination of linear gradients ...

Is there a reliable method to acquire a user's IP address even if they are using a proxy server or a similar technology?

In my quest for an answer, I've found that the solutions are not always straightforward. Is there a foolproof method to obtain a user's IP address even if they are using a proxy, Tor, etc? I am particularly interested in a solution using ASP.NET ...

using JQuery, add a class on click event or on page load

Solved It! After encountering a problem created by some sloppy moves on my part, I managed to solve it. However, another issue arose: adding the class current to li with data-tab="tab-1 upon page load. $('ul.tabs li').click(function(){ ...