Double-clicking with Ajax and JSF after the initial click

When I interact with a dataTable that has a column named DELETE (which is a link) and has a listener attached to it, I experience an issue. After clicking on the link for the first time (click 1), the row gets deleted as expected. However, subsequent clicks on other rows (click 2 and onwards) do not trigger any action. It seems like nothing happens when I click again after the initial deletion. To make it work, I need to click one more time (click 3) which is something I want to avoid.

It's worth noting that the "delete()" method in my_user is not being reached after "click 2".

Below is the code snippet for the column: 

<h:column>
    <f:facet name="header">#{lng.del}</f:facet>
    <h:form>
        <h:commandLink action="#">
            <f:ajax event="click" listener="#{my_user.delete}" render="@all" />
            <h:graphicImage name="delete.png" library="images" styleClass="tableIcon" />
        </h:commandLink>
    </h:form>
</h:column>
javascriptajaxjakarta-eejsf-2

Answer №1

Within your table, there are multiple forms present. If you attempt to re-render a form from inside another form using ajax, the view state will be lost causing the first click to fail. However, this initial click helps in restoring the view state, allowing the second click to work properly.

The ideal approach would be to only re-render the content of the other form, but unfortunately, it is not feasible in this specific scenario. It is recommended to place the <h:form> outside the <h:dataTable> to ensure a single form with a shared view state.

<h:form>
    <h:dataTable>
        ...
    </h:dataTable>
</h:form>

In case there are other forms on the page, it is advisable to render only the current form instead of all forms to prevent any actions on those forms from failing as well.

<f:ajax event="click" listener="#{my_user.delete}" render="@form" />

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

Obtain abbreviated names for the days of the week starting from Monday to Sunday using JavaScript

Is there a way to retrieve the abbreviated names of each day of the week in JavaScript, starting from Monday through Sunday? ...

javascripttypescriptdatedays

Should FormBuilder be utilized in the constructor or is it considered a poor practice?

section, you can find an example of implementation where declarations for formBuilder and services are done within the constructor(). While it is commonly known that using services inside the constructor() is not a recommended practice and should be done ...

javascriptangulartypescriptionic4

Connect various models together, or create synchronized computed properties

At times, the model abstraction may fall short, leading to the necessity of synchronizing two different models. For instance, I have two lists linked by an angular sortable, which requires a model structure like this: left = [{name:"one"}, {name:"two"}]; ...

javascriptangularjs

React and Express are incompatible due to the error message "TypeError: undefined is not a function

I am attempting to display the data from this array on my website using react and express: [{"LocationName":"LIBERTY DOGS","Address":"105 Greenwood Ave N, Seattle WA","Available":"Y"},{"LocationName":"FREEDOM DOGS","Address":"105 Greenwood Ave N, Seattle ...

javascriptsqlreactjsexpress

Updating textbox values with ajax results in the page refreshing and the newly assigned values being lost

I'm currently working on updating a section of my webpage using AJAX instead of C#, as I don't want the page to refresh. All I need to do is execute a SELECT query to retrieve the current client from the SQL database and populate the correspondin ...

javascriptasp.netajaxjsonasp.net-ajax

Find all elements with the same class and identify the first element among them using jQuery

In my dynamic data structure, I need to filter out all elements with the class name "My_data" and select the first one. In the code below, I am looking to retrieve the first element with the class "My_data". <div class="all_data"> <div class="lis ...

javascriptjqueryhtmljquery-selectorsjquery-filter

Steps for switching back and forth between values within a nested object

In my application, I have developed a custom React hook called useToggles specifically for managing checkboxes and radio buttons. The implementation of this hook typically looks like the code snippet below: const useToggles = (initialValues = {}) => { ...

javascriptreactjs

Is Formik Compatible with TextareaAutosize?

I've implemented react-textarea-autosize and formik in my project, but I'm having trouble connecting the change events of formik to TextareaAutosize. Can anyone guide me on how to do this properly? <Formik initialValues={{ ...

javascriptreactjsformik

When importing a component that is passed as a prop in React, it is causing a blank page to render and is displaying an error in the

Visit this link for the code Everything was running smoothly with the app until I decided to include the Icon component in SidebarOption.js. Now, upon doing so, a blank page appears and an error is displayed in the console: An error occurred stating that ...

javascriptreactjsmaterial-uireact-dom

Looking out for JavaScript errors using Selenium?

Currently, I am utilizing Selenium through Python and employing the web driver with the Chrome backend. My goal is to verify that at the completion of each test there were no JavaScript exceptions thrown throughout the execution -- essentially mimicking t ...

javascriptpythonselenium

Top strategies for efficiently managing the loading of extensive PHP pages using Jquery, Ajax, HTML, and other tools

Hey there, I hope you're doing well in this new year. I've been working on a project that creates a "league table" using a large amount of data, similar to those seen in sports like football. The backend is built in PHP to process the data and d ...

javascriptphpjqueryhtmlajax

Populate an array of objects with various key-value pairs

In my @change method, I receive the following values: changeAttr(id, key, value) { const selections = []; }, id can be any number, key could be: color, size, sex, etc..., and value could be: red, 8, female, etc. Initially, the values might look like ...

javascriptvue.js

From where does the data return in the case of an unsuccessful ajax request?

I am having trouble retrieving the output from a failed ajax request. When it fails, the following is returned. print "Content-type: text/html\n"; print "Status: 400 Bad Request\n\n"; print $template->output; However, I cannot locate t ...

jqueryajaxperliis-7error-handling

Retrieve the unique payment ID generated from the database and present it on the frontend

Greetings, I am currently working on integrating a payment processor and I require the automated generation of the corresponding payment ID in the backend. On the frontend side, I have implemented JS to request data from the backend, but I'm facing ...

javascriptphp

Instantaneous data refresh using Firebase Cloud Functions

Currently, I am working on developing a chat feature in React using Firebase cloud functions. However, I am facing an issue where I do not receive updates when a user sends a message. Below is the code snippet that I have been working with: const app = a ...

javascriptreactjsfirebase-realtime-databasegoogle-cloud-functions

use jquery to dynamically switch CSS class on navigation with animated arrows

Looking to update arrows to display a right arrow when the parent list item has the .active class. Here is the jQuery code: jQuery(function(){ initAccordion(); }); function initAccordion() { jQuery('.accordion').slideAccordion({ opener ...

javascriptjqueryhtmlcssnavigation

Effective URL structure with nested ui-view in AngularJS

It is common knowledge that Angular functions as a SPA (Single Page Application). I am seeking the most effective approach to display a main left-side menu selector page, where clicking on any menu item will load the content in the right-side view div. Th ...

javascripthtmlcssangularjsangular-ui-router

Updating Mysql through REST API/JWT using PUT method is not possible

I have been attempting to send an update request using Jwt (Tokens) and Node.Js with a backend in mysql. While Postman confirms that the record has been successfully updated, I am unable to locate where the actual update occurred. No changes seem to be ref ...

javascriptmysqlnode.jsrestjwt

Can you explain the distinction between Array() and [] in Javascript, and when would it be preferable to use one over the other?

Similar Question: Understanding the difference between "new Array()" and "[]" in JavaScript array declaration When working with JavaScript, you have the option to create a new array using: var arr = new Array(); or simply using: var arr2 = []; Wha ...

javascriptarraysliterals

Error message: Node: TypeError - Attempted to access the 'sort' property of an undefined variable while using findOneAndUpdate() within a find() operation

My code snippet is shown below: var MongoClient = require('mongodb').MongoClient; MongoClient.connect('mongodb://localhost:27017/school', function(err, db) { if (err) throw err; db.collection('students').find().toArray( ...

javascriptnode.jsmongodb