how can I trigger an AJAX request after a specific JavaScript function in JSF 2.0

On a regular basis, I utilize a particular method, but I encounter an issue. There is a functionality that involves deleting a certain entity, however, I wish to notify the user who triggers this action with a commandLink by calling a JavaScript function confirm(str). If the confirmation result is false, I do not want it to trigger an Ajax function. As a solution, I decided to use the jsf.ajax.request function. Here is a snippet of my code:

<h:commandLink value="ajax" onclick="return ask(this,event,null,'page');" actionListener="#{test.ajax}"/>
<h:inputText value="#{test.page}" id="page"/>

Below is my JavaScript code:

function ask(element,event,exec,target){
    if(confirm("Are you sure you want to delete it?"))
    {
        try{
            jsf.ajax.request(element,event,{execute:exec,render:target});
        }catch(ex){
            alert(ex);
            return false;
        }
    }else
        return false;
}

After implementing this code, the function can execute successfully. However, I noticed that it does not work as an Ajax request. Additionally, other values in the backing bean are being updated as well! If someone could provide me with insights on this matter, I would be greatly appreciative!

Answer №1

There's no need to take over the responsibilities of <f:ajax>. Simply include a return statement in the onclick event.

<h:commandLink value="ajax" action="#{test.ajax}" onclick="return confirm('Are you sure?')">
    <f:ajax execute="@this" render="page" />
</h:commandLink>
<h:inputText value="#{test.page}" id="page"/>

Additionally, make use of the action attribute instead of actionListener. You can return either null or void within this attribute.

Answer №2

After some investigation, I was able to resolve my issue. It turns out that my misunderstanding of the jsf.ajax.request function was the root cause. To ensure that the actionListener is properly invoked in the backing, I needed to include the actionListener along with its corresponding owner--dom object to be executed.

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

Transform the characters within a string into corresponding numerical values, calculate the total sum, and finally display both the sum and the original string

I'm looking to convert a string containing a name into numerical values for each character, ultimately finding the sum of all characters' numerical values. Currently, only the first character's value is being summed using .charAt(). To achie ...

The chosen options will automatically populate the text-boxes that require dynamic summation

I am encountering an issue with a select option that should dynamically populate specific values in text-boxes (different prices) based on the selected option. The goal is to sum up the values in the text-boxes and display the total in another text-box. Ho ...

Initiate a $digest cycle externally

How can I ensure that $digest triggers when calling methods from outside Angular in an application where code is loaded and eval'd at runtime? Considering that these methods may also be called from within Angular, would it be better to expose a separa ...

How much time can pass between two clicks in order to activate a double-click event?

How long is the maximum delay between two clicks that will still activate a double-click event? Does this delay vary between plain JavaScript, jQuery, and AngularJS? Additionally, in jQuery, what time intervals do the fast and slow keywords represent? For ...

Establish a connection to an already existing database using Mongoose

I've been exploring the inner workings of MongoDB lately. After setting up a local database, I created a collection with the following document: db.user.find().pretty() { "_id" : ObjectId("5a05844833a9b3552ce5cfec"), " ...

It seems that the maximum call stack size has been exceeded, resulting in a

Within this dropdown, I have incorporated a checkbox containing values in the form of an object. (refer to attached image) Every time I make a selection from the dropdown, there is a watch function that updates this new value, which is essentially an arra ...

Tips for using the deferred method in ajax to enhance the efficiency of data loading from a php script

I recently discovered this method of fetching data simultaneously using ajax. However, I'm struggling to grasp the concept. Can someone please explain how to retrieve this data from a PHP script and then add it to a div similar to the example provided ...

Comparing two inherited classes in Typescript: A step-by-step guide

Let's say we have two classes: Animal and Dog. The Dog class is a subclass of the Animal class. I am trying to determine the types of these objects. How can I accomplish this task? class Animal {} class Dog extends Animal {} //The object can be of ...

Managing global devDependencies with Node and npm: A comprehensive guide

As I develop a Node module, I have included devDependencies like jasmine-node and jshint that need to be globally installed. My goal is to access their binaries in my makefile / npm scripts without using require(). Despite my research, I'm still unsu ...

Unable to access CommonModule in Angular 10 component loaded dynamically

I'm currently working on a project using Angular. One of my methods involves dynamically creating a component, but I'm encountering difficulties when trying to use directives like ngClass and ngIf from the CommonModule within this component. Her ...

Next.js: An absence of response is observed when a high volume of requests is made on a server-side rendering page with

Currently, I am utilizing Next.js along with a custom server (express js) as demonstrated in the GitHub example. For instance, I have a page located at “/post/[id]” that makes use of Next.js dynamic routing. The issue arises when the number of request ...

Develop a dynamic animation using gradient and opacity properties

I'm still getting the hang of HTML, JavaScript, and CSS but I recently made some changes to someone else's code to animate a gradient. The original code used background: rgb, but I switched it to background: rgba. It seems to be working fine, but ...

Sending a user to an external website through an XML response

In my current project, I am utilizing jQuery to fetch a PHP file. The PHP file executes a cURL request to an external website in order to obtain information for a payment request. The external site responds with XML data structured as follows: <Request ...

What is the URL I need to visit in my browser to monitor updates while running npm?

I am interested in utilizing npm to monitor any changes made in my project and immediately view them in my browser. Essentially, I have been implementing npm using this modified code snippet from this source, which allows me to run the command npm run buil ...

Callback after completion of a for loop in Angular TypeScript

During the execution of my javascript async function, I encountered a situation where my printing code was running before the div creation. I needed to ensure that my print code would run only after the completion of the for loop, but I struggled to find a ...

Closing the Bootstrap navbar collapse by clicking anywhere outside of the menu area

Excuse my lack of experience, but I have a question. I am trying to make Bootstrap "navbar-collapse" close when clicking away or on one of the list items. I stumbled upon this code that seems to do the trick. $(document).on('click',function() { ...

Steps for preventing a button from being enabled until all mandatory fields are completed

Is it possible to have a button disabled until all required fields are filled out, with the button appearing grey in a disabled state and changing color when all fields are completed? I am facing an issue where clicking on the previous button is causing ...

Passing intricate data structure from Angular to SignalR

I am encountering an issue when trying to send a complex object to my SignalR hub. The JavaScript object I'm sending matches perfectly with my C# object, so theoretically everything should be functioning correctly. However, for some reason, my UpdateE ...

Is there a way to automatically remove a document in MongoDB and Node.js once its expiration date has passed?

I'm working on an appointment booking app and I need to automatically delete booking details after the booked date has passed. How can I make this happen? I attempted to use node-scheduler for this task, but it wasn't successful. The app itself ...

Error displaying city data in Laravel through Ajax dropdown

I am encountering issues with ajax for a dropdown city. Clicking on the province section is not displaying city data. Screenshoot: https://i.sstatic.net/Z13ez.png Regency.php namespace App; use Illuminate\Database\Eloquent\Model; use ...