In order for jsf.ajax.addOnEvent to function properly, it is crucial to explicitly incorporate javax.faces:jsf.js

In my project using JSF 2.2.4, I initially included the following code in the head tag:

<h:outputScript library="javax.faces" name="jsf.js" />

However, after stumbling upon a helpful post about renaming jsf.js to jsf.js.xhtml, I decided to remove the above code as it was supposed to be automatically included: renaming jsf.js.jsf to jsf.js.xhtml

Although the inclusion of jsf.js was happening automatically as expected, we encountered an error related to a script placed in the common template's head section. The error indicated that the object jsf was being recognized as undefined. This particular script was created to display a loader for all JSF AJAX calls and is shown below:

//To display loading indicator for all JSF f:ajax calls.
jsf.ajax.addOnEvent(function(data) {
  var ajaxstatus = data.status; // Can be "begin", "complete" and "success"
  switch (ajaxstatus) {
    case "begin": // This is called right before ajax request is been sent.
      wizShowAjaxLoader();
      break;
    case "complete": // This is called right after ajax response is received.
      wizHideAjaxLoader();
      break;
    case "success": // This is called when ajax response is successfully processed.
      // NOOP.
      break;
  }
});

The issue arises when I exclude the explicit inclusion of jsf.js. Without it, the script encounters difficulties and reports the jsf object as undefined.

Answer №1

To ensure that your script works correctly, it is important to make sure that it is called after the inclusion of javax.faces:jsf.js. This is because the jsf object is only defined in the JavaScript scope after the javax.faces:jsf.js file has been included and executed.

In simple terms, the flow of your JavaScript code should be like this:

var jsf = ...;
...
jsf.ajax.addOnEvent(...);

Make sure it is not like this:

jsf.ajax.addOnEvent(...);
...
var jsf = ...;

One way to ensure this is by including your script using <h:outputScript> within <h:body> with the target attribute set to head.

<h:head>
    ...
</h:head>
<h:body>
    <h:outputScript name="yourscript.js" target="head" />
    ...
</h:body>

JSF will ensure that it appears in the HTML head section after the automatically included scripts.

Another option is to keep it within <h:head>, but set the target to body.

<h:head>
    ...
    <h:outputScript name="yourscript.js" target="body" />
</h:head>

JSF will ensure that it appears at the very end of the HTML body, allowing it to be executed just before the DOM is fully loaded.

For further reference, check out:

  • How to reference CSS / JS / image resource in Facelets template?

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 autocomplete feature in Codemirror seems to be failing specifically when writing JavaScript code

I am having trouble implementing the autocomplete feature in my JavaScript code editor using Codemirror. Can someone please help me figure out what I'm doing wrong? Here is the snippet of code : var editor = CodeMirror.fromTextArea(myTextarea, { ...

The angularjs ui-sortable feature is experiencing an issue where methods cannot be called on sortable before initialization. The specific method 'refresh' was attempted to be called prematurely

I'm attempting to sort a list, where I retrieve the elements from a database but... Error: unable to call methods on sortable before initialization; tried calling method 'refresh' This is my HTML: <div class="box-body" > <d ...

Discover the magic of parsing JSON child nodes using d3!

Having trouble parsing json data with d3. Below is the json structure: { "name": "Main Course", ... }//json data continues I would like to generate a list based on this data, structured as follows: <ul> <li>Main Course</li> <u ...

The duration for which an API Access Token remains valid is extremely brief

I recently started working with APIs and my current project involves using the Petfinder API v2 to develop a website that allows users to search for adoptable animals. The API utilizes OAuth, requiring a key and secret to obtain a token via CURL. However, ...

What methods with JavaScript, Ajax, or jQuery can I apply to populate the student details?

For completing the StudentID section, please fill out the form data.cfm with the first name, last name, and Middle Name. <script language="Javascript"> $(function() { $( '#effective_date' ).datepicker(); jQuery.validator.addMetho ...

Use ag-Grid to customize your column headers with checkboxes, allowing you to easily select or deselect all items in that column. This feature is not limited to

In my experience with ag-grid, I often find myself needing to customize the first column header to include a checkbox. This allows me to easily perform actions such as selecting all or deselecting all rows in the grid. It's important to note that this ...

Creating a unique custom "Ask Seller" button on Ebay can be done by

Currently in the process of revamping a custom sales page for my store and I'm interested in adding a button that says "Inquire With Seller". Despite my efforts to search online, there hasn't been much information available on how to approach thi ...

What is the best approach to accessing a key within a deeply nested array in JavaScript that recursion cannot reach?

After hours of research, I have come across a perplexing issue that seems to have a simple solution. However, despite searching through various forums for help, I have reached an impasse. During my visit to an online React website, I stumbled upon the web ...

The value remains constant until the second button is pressed

I have a button that increments the value of an item. <Button bsStyle="info" bsSize="lg" onClick={this.addItem}> addItem: addItem: function() { this.setState({ towelCount: this.state.towelCount - 2, koalaCount: this.state.koalaCount + 2 ...

Error: the given elements cannot be iterated over

I am currently working with Rect/Redux and I need to convert an array into a tree structure of children as described in this helpful guide: Transform an array of connected elements to a tree. The issue arises when I try to access the state and check the co ...

Exporting data from HTML tables with a simple click

I'm working on exporting an HTML table with a single click of a link. Currently, I am using , but I'm open to other suggestions as well. By including the following link, it creates a functional button for exporting the table. (If I set exportBu ...

leveraging data binding on a button click link

Utilizing the cordova plugin in my Ionic App to open external URLs has been successful with the following functional code: <a class="orange" href="#" onclick="window.open('http://www.myurl/privacy-policy', '_system', 'location= ...

Combine various CSS files

If I have the following HTML structure : <div class="div"> <div class="sub-div"></div> <div class="sub-div"></div> <div class="extra-sub-div"></div> </div> ...

Prevent the upward arrow from appearing on the first row and the downward arrow from appearing on the last row when

This is a straightforward question, but I'm unsure how to achieve it. I am currently working on sorting columns using jQuery. $(document).ready(function(){ $(".up,.down,.top,.bottom").click(function(){ var row = $(this).parents("tr:f ...

Utilizing JQuery to update the selected item in a menu

Hey there! I'm currently using the jquery chosen plugin and I'm trying to make it so that I can select a menu value based on the selection from another select menu. Unfortunately, my code only works with a simple select menu and I need it to work ...

Error: Property 'config' cannot be accessed because it is null

Upon transferring my Angular project from my local computer to a Linux server, I attempted to launch the project using ng serve but encountered an issue where it opened a new file in the console editor instead. After some investigation, I tried running np ...

What causes the text-align property to function in varying ways across different tags?

Can you explain why the text-align property behaves differently on different tags? In two cases, I am trying to center my text. In the first case, I use a parent div tag with an anchor tag inside. When I need to center align, I apply the property to the p ...

Why isn't the page element showing up after jQuery redirection?

Similar Question: how to display jquery page(inside a div) using javascript? check out this snippet of my own javascript code function sendLoginData(jsonContent) { alert("hello"); $.post("http://localhost:8080/edserve/MobileServlet", ...

Animating a background image to slide in from the bottom to the top using CSS transition

Here is a link to a codepen example: https://codepen.io/jon424/pen/XWzGNLe The current effect in this example involves covering an image with a white square, moving from top to bottom when the "toggle" button is clicked. I am interested in reversing this ...