"Execute asynchronous tasks in Javascript and receive the returned

Currently, I am utilizing JSF ajax within my application and unfortunately, we are unable to make any changes to that. In the process of waiting for user action, I find it necessary to prompt the user before executing the ajax method. Specifically, I need to inquire if the user wishes to revert all changes on the page using a custom dialog. If they choose to proceed with the reversion, I will invoke the Java method through ajax. However, if they decide against it, there is no need to execute the ajax.

To elaborate further:

Here is the code snippet for the revert button in my extensive page:

<h:commandButton value="#{msg.revertBtn}" accesskey="R" styleClass="actionButton" action="#{styleController.revertChanges}">

    <f:ajax execute="@this" onstart="return method();" render="styleCcFormtyleCcTable">

</h:commandButton>

Prior to initiating the ajax, it triggers my javascript function: method()

I require the user to remain engaged in method() until they click either the Yes or No button in my customized confirmation dialog, and then return true or false accordingly.

Do you have any suggestions on how to address this issue?

javajavascriptajaxjsfcustomdialog

Answer №1

To prevent the default action of a button, you should attach an event listener to the button's `onclick` handler and return true or false based on whether you want to block the action. Attempting to block the action after the ajax request has already been executed will be too late.

One way to achieve this is by using JavaScript's built-in `confirm()` function as shown in the example below:

<h:commandButton ... onclick="return confirm('Are you sure?')">
    <f:ajax execute="@this" render="styleCcFormtyleCcTable" />
</h:commandButton>

Answer №2

It may not be the most conventional method, but I found a workaround that made it work for me.

Basically, I created a Custom Confirm Dialog with a variable to store the user's reply. When the user clicks on a button, their reply is stored in this variable.

Then, I added a click function to the button that checks the variable. If there is a reply, it proceeds with an action. If not, my custom dialog is called again.

Within the custom dialog, I simulate a button click with the saved reply. Just remember to clear the variable afterwards.

It took me two days to figure out this solution. Let me know if you want the code for it!

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

Managing dynamic input texts in React JS without using name properties with a single onChange function

Dealing with multiple onChange events without a predefined name property has been challenging. Currently, one text input controls all inputs. I have come across examples with static inputs or single input functionality, but nothing specifically addressin ...

javascriptreactjs

Why am I seeing back-end console errors that are related to my front-end?

Recently, I encountered an error message that prevents me from using 'import' in my front end code when trying to execute 'node index'. This issue never occurred before, and it only arose when I returned to this project. In my backend ...

javascriptnode.jsreactjsmern

Why isn't useEffect recognizing the variable change?

Within my project, I am working with three key files: Date Component Preview Page (used to display the date component) useDateController (hook responsible for managing all things date related) In each of these files, I have included the following code sn ...

javascriptreactjstypescriptecmascript-6

Upon reloading, the dynamically generated table does not appear accurately

When a table is dynamically created using JavaScript/jQuery/html from an Ajax call, it initially displays correctly formatted. However, upon refresh/reload, the formatting of the table becomes incorrect. To address this issue, I have implemented a Promise ...

javascripthtmljqueryajax

To use a local variable `i` defined in an enclosing scope in JAVA with SWT, it must be declared as final

I'm attempting to generate a grid of buttons based on the product of i and j. My goal is to assign a mouseUp action to each button, but I keep encountering an error. I tried implementing a "Line" class to manage the listener event, but encountered d ...

javabuttonscopeswtlistener

What is the best way to establish and concentrate on a fresh component in AngularJS?

I am working on a form that has a dynamic number of inputs, which is controlled by AngularJS. <body ng-app="mainApp" ng-controller="CreatePollController" ng-init="init(3)"> <form id="createPollForm"> <input class="create-input" ...

javascriptjqueryhtmlangularjsevents

I would like to hide the button if there are fewer than five visible

When there are less than 5 visible buttons, I want the button to be invisible. The state visible outputs 5 buttons each time. On the detail page, I would like to have the buttons invisible if there are fewer than 5 outputs. In my current code, when ther ...

javascriptreactjs

Submitting a file using Ajax XMLHttpRequest

Currently, I am facing an issue while attempting to send a file using the following XMLHttpRequest code. var url= "http://localhost:80/...."; $(document).ready(function(){ document.getElementById('upload').addEventListener('cha ...

javascriptajaxjqueryfile-uploadxmlhttprequest

What is the process of transferring JavaScript code to an HTML file using webpack?

I am looking to display an HTML file with embedded CSS, fonts, and JS (not linked but the content is inside). I have the CSS and fonts sorted out, but I am struggling to find a solution for the JavaScript. My project is based on Node.js. ...

javascriptnode.jsexpressnpmwebpack

Manipulate links using Jquery to customize their behavior based on the URL

I'm facing a challenge with 3 links on a page, all having the same css class "suggested_product" and an integer id that needs to be included in the url. My goal is to modify what happens when these links are clicked. I have an ajax function set up to ...

jqueryajaxhttp-redirect

Expiration Alert: SSL Certificates for HERE Links will expire shortly

Our SSL certificates for the following URL's are approaching expiration: *.base.maps.ls.hereapi.com geocoder.ls.hereapi.com Do you have any information on when these URLs will be updated with new certificates? ...

javascripthere-api

Can a link be generated that swaps out the original URL redirect for the following visitor upon clicking?

Can the program be fed with a list of links to automatically redirect to the next URL once clicked? In this setup, each visitor would only see one link and not have access to any other URLs in the chain. Is there a way to make this happen? Any suggestion ...

javascriptpython

What is the proper way to implement SSE/EventSource in your project?

After watching tutorials online, it seems common practice for authors to use SSE/EventSource in setting up a connection where the server-side PHP script echoes data and then uses ob_flush() and flush() to send the information back to the client's brow ...

javascripthtmlserver-sent-events

Ways to verify if both the select and input fields are selected and populated with jQuery

In my html form, I have a select field and an input box with two classes being used: work_phone_class and work_phone_class_input. I am triggering ajax by clicking a save button with a specific class whenever the value in the select field is changed or any ...

javascriptjqueryajax

Is it possible to convert an object with properties of equal length into a list of objects using JavaScript?

I am working with an object that has multiple keys, each containing a list of equal length: myobj = { 'key1' : [1, 2, 3], 'key2' : ['a', 'b', 'c'], 'key3' : [true, false, true], .. ...

javascriptjsondictionarylodashmap-function

Error: Java Cannot Locate Class in Classpath with Wildcards

Upon running a scheduled program in the command prompt, I encountered the error message below: Exception in thread "main" java.lang.NoClassDefFoundError: org/quartz/ScheduleBu ilder Caused by: java.lang.ClassNotFoundException: org.quartz.ScheduleBuilder ...

javaquartz-scheduler

Tips on updating time zone settings in a browser using React JS or JavaScript

I am currently facing a requirement where I need to adjust the application's time based on an environment variable. The entire application should operate using the timezone specified in the configuration file. For instance, if the designated timezone ...

javascriptreactjstimezone

Comparing .innerHTML with createElement() | Exploring setAttribute() versus the Direct method*

Someone mentioned that this approach was not considered "proper", but I didn't pay much attention to it until I encountered a run-time error in IE9. Now, I need help converting the code to utilize object properties instead. What is the reason behind i ...

javascriptinnerhtml

What causes the difference in behavior between using setInterval() with a named function as an argument versus using an anonymous function?

I can't seem to figure out why using the function name in setInterval is causing issues, while passing an anonymous function works perfectly fine. In the example that's not working (it's logging NaN to the console and before the first call, ...

javascripttypescriptsetinterval

Ways to retrieve the identifiers of every child node UL element within a UL container

I am struggling with a basic question related to HTML structure. Here is the code snippet I am working with: <ul> <li> <ul class=t2 id=15> <li class='item'>a<span class='val'>b</ ...

javascript