Tips for retrieving a parameter from the oncomplete attribute of an a4j:jsFunction tag

Is it possible to access a parameter for an <a4j:jsFunction> in the oncomplete="" attribute without using the action="" attribute and assingTo="" of <a4j:param>?

<a4j:jsFunction name="refreshTableFilter" render="table,scroller" execute="@form" oncomplete="setCursor(componentId);">
    <a4j:param name="componentId" />
</a4j:jsFunction>

I'm trying to find a way to directly access the <a4j:param> without needing it in a BackingBean or using the action="" attribute.

UPDATE

This is my current code:

<rich:extendedDataTable id="table"
    rowKeyVar="index" selectionMode="single"
    selection="#{cc.attrs.controller.selection}"
    displayColumnsOrder="#{cc.attrs.configController.currentColumnConfig}"
    rowClasses="light-table-row,dark-table-row"
    value="#{cc.attrs.controller.entities}" var="entity"
    rows="#{cc.attrs.rows}">

    <a4j:ajax event="rowclick" onbegin="tableRowClick(#{index})"/> 

    <rich:column id="cShipName" styleClass="segment"
        filterValue="#{cc.attrs.controller.vesselNameFilter}"
        filterExpression="#{fn:containsIgnoreCase(entity.vesselName, fn:trim(cc.attrs.controller.vesselNameFilter))}"
        width="140px">
        <f:facet name="header" id="headerShipName">
            <div style="margin-top: 5px;">
                <h:inputText id="shipnameFilter" style="width:99.9%" value="#{cc.attrs.controller.vesselNameFilter}" />
            </div>
        </f:facet>
        <h:outputText value="#{entity.vesselName}" />               
    </rich:column>

...

</rich:extendedDataTable>

And here is the JavaScript that calls the a4j:jsFunction:

$(document).bind('keypress', function(e) {
     if(e.keyCode==13){
        var elementId = document.activeElement.id;
        if (elementId.indexOf('shipnameFilter') != -1) {
            refreshTableFilter();
            return false;
        }                
        return true;
     }
  });

The a4j:jsFunction code:

<a4j:jsFunction name="refreshTableFilter" render="table@body, scroller" execute="@form" />

The jsFunction works correctly when the @body is removed from the render="" attribute, but with it, the table does not show anything after rendering (if I press F5, the correct data will be shown in the table).

Answer №1

Looking at the code snippet provided, it appears that you are attempting to update a table when a filter is changed and then return focus to the filter input field. It seems like the filter inputs are part of the table header, which causes them to lose focus when the table is updated.

An alternative (and more efficient) solution would be to avoid re-rendering the filter inputs altogether. Instead, you can use meta-components to refresh only the table's header/body/footer:

<a4j:jsFunction name="refreshTableFilter" render="table@body table@footer scroller" execute="@form"/>

In response to your initial query: It appears that retrieving a parameter in the oncomplete handler without storing it on the server side is not feasible. One workaround could involve assigning the parameter value to something on the server side:

   <a:jsFunction name="refreshTableFilter" render="table,scroller" execute="@form"
                 oncomplete="setCursor(event.data);"
                 data="#{refreshTableFilterParam}">
      <a:param name="paramName" assignTo="#{refreshTableFilterParam}"/>
    </a:jsFunction>

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

When utilizing jQuery to add a <li> element, it suddenly vanishes

? http://jsfiddle.net/AGinther/Ysq4a/ I'm encountering an issue where, upon submitting input, a list item should be created with the content from the text field. Strangely, it briefly appears on my website but not on the fiddle, and no text is appen ...

Express.js application experiencing technical difficulties

When attempting to create a simple Express application with the file called serv.js, I encountered an error. Here is the code snippet I used: var express = require('express'), app = express(); app.listen(3000, function() { c ...

In vuex, dynamic modules share common data and do not have unique data

Currently, I am facing an issue with an asynchronous API call that returns an array of objects. After receiving this data, I map it to dynamically registered modules in my store. The process looks something like this: dispatch // prior to this dispatch, ...

What is the method to effectively conduct a testing procedure for JavaScript files that have been exported using

I have a JavaScript file called "sum.js" which contains a simple function: // sum.js function sum(a, b) { return a + b; } export default { sum }; Now I want to write a test for this file using Jest. Here is my "sum.test.js" file in the same folder: // ...

The node server is experiencing difficulties connecting to the mysql database, resulting in a timed out connection error at Connection._handleConnectTimeout

Having trouble establishing a connection with the mysql database. Every time I attempt to start the node server, it keeps throwing a database connection error. The specific error message is as follows: connect ETIMEDOUT at Connection._handleConnectTimeou ...

Syntax of the Vue.js application object model

Just delving into the world of vue.js and stumbled upon this code snippet. Curious to know more about its structure. const CounterApp = { data() { return { counter: 0 } }, mounted() { setInterval(() => { this.counter++ ...

When I clicked on the event in Javascript, the result was not what I expected

I am currently working on a web project centered around cooking recipes. In order for users to add ingredients to their recipes, they must input them one by one into a dynamic list that I am attempting to code using jQuery (AJAX). My issue arises when a u ...

The necessary parameters are not provided for [Route: sender] with the [URI: {name}/{code}]. The missing parameters are name and code

I have encountered a problem while using AJAX and I am struggling to find a solution. Routes: web.php Route::get('/{name}/{code}', 'TestController@counter'); Route::post('/{name}/{code}', 'TestController@sender')-&g ...

Jasmine tests for AngularJS directive failed to invoke the link function

I can't figure out why the link function of my directive isn't being called in a Jasmine test. I've created a simple example to illustrate. Here is the code for my directive (TestDirective.js): 'use strict'; angular.module(&ap ...

Display a concealed text box upon clicking BOTH radio buttons as well as a button

Below is the HTML code for two radio buttons and a button: <body> <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1"> <label for=&qu ...

I made a mistake with my git repository. Should I try to fix it or just start fresh?

After spending months learning web development, I recently completed my first project. Unfortunately, right before deployment, I made a mistake with my backend git tree. I attempted to resolve the issue using suggestions from other resources, but none of ...

Winning awards through the evaluation of possibilities

I became intrigued by the idea of using a chance algorithm to simulate spinning a wheel, so I decided to create some code. I set up an object that listed each prize along with its probability: const chances = { "Apple" : 22.45, & ...

Activating a function on a click or item selection in React using Office UI Fabric's

<div> <CommandBar areNamesVisible={false} areIconsVisible={true} items={[ { name:"James Towns", className:"noHoverEffect", }, { key:"Info", icon:"Contact", onItemClick={this.handlePanel} ...

Using the IE method getelementbyid to target an object within the document

Is there a way to use getElementById to access an object that already exists in the document? I am specifically trying to target the element "test" which is nested within parentDiv1. While this code works in Firefox, it's not functioning properly ...

Remove the JSON object from the screen in an asynchronous manner

I am currently working on developing a single-page application that retrieves information from a JSON file, displays it on the screen, and performs various actions. At this point, all the information is being properly displayed on the screen: http://jsfid ...

React SVG not displaying on page

I am facing an issue with displaying an SVG in my React application. Below is the code snippet: <svg className="svg-arrow"> <use xlinkHref="#svg-arrow" /> </svg> //styling .user-quickview .svg-arrow { fill: #fff; position: ...

Using Jquery and css to toggle and display active menu when clicked

I am trying to create a jQuery dropdown menu similar to the Facebook notification menu. However, I am encountering an issue with the JavaScript code. Here is my JSFiddle example. The problem arises when I click on the menu; it opens with an icon, similar ...

What is the best way to create a CSS class for a list element in React?

I am facing an issue with styling buttons in my UI. These buttons represent different domains and are dynamically generated based on data fetched from the server using the componentDidMount() method. Since I do not know the quantity of buttons at the time ...

Dynamic shopping cart with Vue.js

Currently, I am working on a shopping cart project using Vue.js and Vuetify. I need help figuring out how to capture the boolean value true or false and adjust the total price in the amount based on whether it is true or false. Any suggestions? <v-con ...

How can I collapse the dropdown menu in typeahead.js?

I am currently utilizing typeahead.js for a typeahead functionality. My goal is to achieve the opposite of what was discussed in this thread: Programmatically triggering typeahead.js result display Despite attempting to trigger a blur event on the typeah ...