1 / 69

AJAX-Enabling Your JSF Components and Web Pages

AJAX-Enabling Your JSF Components and Web Pages. This learning module covers the use of AJAX technology to enable better response and performance in your EGL/JSF Web Pages. JSF/EGL Web Page and Site Design and Development. Course. Units:. Course Setup Web/JSF Overview

marin
Download Presentation

AJAX-Enabling Your JSF Components and Web Pages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX-Enabling Your JSF Components and Web Pages This learning module covers the use of AJAX technology to enable better response and performance in your EGL/JSF Web Pages.

  2. JSF/EGL Web Page and Site Design and Development Course Units: • Course Setup • Web/JSF Overview • JSF Properties Deep Dive • Essential JSF Components • Additional JSF Components • JSF dataTables • Page Flow and State Management • AJAX Controls and JavaScript • JSF Component Tree and Dynamic Property Setting • Web-Site Design and Template Pages • Appendices • Internationalization • Page Design Best Practices • Additional Use Cases

  3. Unit Objectives • At the end of this unit, you will be able to: • Describe the concepts and functions of AJAX and JavaScript • Use different types of AJAX to make your pages respond faster • Request Refresh • Submit Refresh • External Refresh • Leverage JavaScript to invoke AJAX engine for creating better response web applications • Using JavaScript (*Under Construction*) • Alerts • Client-Side edits • Pop-up pages

  4. What are AJAX and JavaScript? JavaScript is a programming language used for client-side web development. It is not related to Java, although both JavaScript and Java can trace language roots back to C. • JavaScript statements are interpreted at run-time in your PC’s browser. • Some common examples of JavaScript usage include: • Opening or popping up a new window with programmatic control over the size, position and characteristics of the new window • Client-Side (browser-based) validation of web form input values • Swapping (changing) images as the mouse cursor moves over them Ajax, or AJAX, is a web development technology used for creating better responding, dynamic-content web applications. • Instead of refreshing the entire page from the server on each submit, AJAX exchanges small amounts of data with the server asynchronously. • You can target specific controls with this data – so that the entire page is not reloaded (this looks and behaves LOT better to most users) • AJAX also increases the web page's interactivity/speed, and enhances its functionality, and usability – making the page respond more like a Windows client application. • AJAX is an acronym standing for Asynchronous JAvaScript and XML.

  5. Web Application Models Browser Page AJAX Only this much data is sent! Browser Standard The entire page is reloaded from the server on each request JavaScript Page HTML +CSS + data AJAX Engine HTTP Request HTTP Request Synchronous Data Transfer Asynchronous Data Transfer HTML +CSS + data Application Server Application Server DB DB EGL Application Process data Access database Call legacy systems EGL Application Process data Access database Call legacy systems

  6. AJAX Page Requests  There are three major categories of AJAX page update processing: 1. Refresh Request • With Refresh Request you define individual parameters to AJAX, and only the values in the specified parameters are sent to your JSFHandler (data transmission is minimized). Data can be returned from your JSFHandler to an area of the page defined under AJAX control (typically inside a JSF PanelGroup Box enabled for AJAX update). 2. Submit Refresh • An AJAX Submit Refresh allows you to define areas of your page under AJAX control (like Refresh Request) but instead of sending only individual parameters to your JSFHandler, the entire form is submitted – so your JSFHandler can reference any user value on any field in the form. See Notes for additional benefits of Submit Refresh. 3. External Request • Allows a parent page to receive external values from a child page – or, can be used with multiple pages on the same page (example later in this section).

  7. EGL/JSF Steps to Implementing AJAX Request Refresh Functionality Only 2 new steps • Create a new page – with a template (been there/done that) • Develop the EGL JSFHandler and business logic (been there/done that too) • As you did in the last section , you will call a j2eelib.function to return an AJAX request parameter – specifically: j2eelib.getQueryParameter(…) • Design the Page with JSF components bound to EGL data (been there/done that). However, you will use one or more JSF Panel Group controls to organize the AJAX requested data: • JSF Panel Group – if only JSF components are being added…or… • JSF JSP Panel embedded inside the JSF Panel Group – if JSP + HTML tags are to be embedded or used in the design (example later in this section) • Create a JavaScript event for a JSF component, that invokes AJAX behavior for a target JSF Panel Group component: • Note that this essentially creates the JavaScript call to the AJAX engine that creates the HTTP request to your JSFHandler • Enable the AJAX container for update, and create a Refresh Request on the JSF Panel Group, adding parameters for data to be sent from the AJAX engine to your JSFHandler Perhaps a bit more detail is in order before we dive in with a workshop. A J A X S T E P S

  8. AJAX-specific Properties in Your JSF Pages  There are three new JSF properties you have to learn, to understand how to implement AJAX 1. AJAX Properties, for a JSF Panel Group • A JSF PanelGroup component contains Ajax properties. In here you can specify which kind of request you want to enable. • And you can edit the request’s properties 2. AJAX Request Properties • For every request, you can define one or more parameters that are made available to your EGL JSFHandler • Here we are specifying that the: textCustState1 and menuStates1 JSF components can provide a request parameter to AJAX (which will be passed into your JSFHandler through a j2eelib.call 3. JavaScript call to the AJAX engine • For each component you wish to enable for AJAX, use QuickEdit to define an AJAX action for a given target Component. • Below we are specifying that whatever JSF component is selected in Page Designer can invoke AJAX on group1 (a JSF panelGroup) control)

  9. AJAX-specific Coding in your EGL JSFHandler There are three (somewhat) new considerations for your EGL and the AJAX requests: 1. Use of preRender() • preRender() is called every time a page is requested (see notes on the difference between preRender() and onConstruction(). AJAX logic will go in preRender(). 2. J2eelib.getQueryParameter(“…”) • This EGL Built-in function allows you to access the value sent in via the AJAX parameter request 3. Test for NULL value • Because preRender() is executed every time a page is requested (including the initial page build) we will need to ensure – programmatically – that we are where we think we are, in the input/output cycle. 1. 2. 3.

  10. The Big Picture – Run-Time  For Request Refresh: • User enters “CA” and triggers a JavaScript event in the browser that calls AJAX • AJAX builds an HTTP request – including the parameter value, and invokes your JSFHandler • Your JSFHandler’s preRender() function is invoked. You obtain the user-entered data (getQueryParameterreferencing JSF control ID) and use the data to look-up information in the database • EGL Data is returned to AJAX which renders the response in the designated area of the page (i.e. the JSF Panel Group) Note that a similar lifecycle exists for Submit Refresh Let’s try a few examples  1. JavaScript HTML +CSS + data AJAX Engine 2. HTTP Request Parameter(“CA”) ordersArray 4. Application Server 3. DB

  11.  1. Create a new Page • Here is our target page. Users can search Customer Orders for a specified state  • Our page will contain an: • Input field – that fires off an AJAX request and populates the dataTable when the user clicks the Search button • A Combo-Box that does the same, but does so when the user chooses (opens the Combo-Box and selects) a state • Create a new page, named: ajaxRefreshRequest.jsp - For now, just change the Page heading text as shown in the screen capture. Then edit the JSFHandler (next slide)

  12.  2. JSFHandler Code • Copy the code in the Notes section of the slide, and replace the boilerplate JSFHandler code. Note the following: • The preRender() function is executed every time the page is requested (and recall that AJAX will request the page) • Because of this, we need to differentiate a user action from the initial request • Thus if(custState != null) • j2eelib.getQueryParameter() will retrieve the data from the AJAX engine. • You specify the JSF ID of the control for this parameter • The sub-select returns all orders – where the order.customer_ID is equal to any customer_ID where the customer state = the state returned through the AJAX Query Parameter • We will also allow users to invoke the search by selecting a state from a Combo-Box tied to the states array.

  13.  3. Design the Page – 1 of 2 • The screen capture below shows the JSF design. Create it as follows: • Add an HTML table to the page: 1 Row/2 columns/Width: 100% • From Page Data, Drag and drop custState into the left hand column, create an input field, no submit buttons! • From the /images/ directory, drag search_button.gif image into the left column, next to custState ***Notes • From Page Data, Drag the states array into the right column • From the Palette, HTML Tags drawer, Add an HTML rule below these controls

  14.  3. Design the Page – 2 of 2 • Drag a Panel – Group Box onto the page. • Select Type of component: Group • From Page Data, drag ordersArray inside the top-left corner of the Panel Group Box. • Create a read-only dataTable • Ensure that all controls are Output fields • Your dataTable will be nested inside the Panel – Group Box**(notes)

  15.  4. Create the JavaScript Event to Invoke the AJAX Engine • Select the custState control. From the *Quick Edit view, select the onblur event, and specify:  Use pre-defined behavior Action: Invoke Ajax behavior on the specified tag Target: group1(this directs AJAX to render data in the Panel Group Box) • Select StateAbbrev. From the *Quick Edit view, select the onchange event - specify:  Use pre-defined behavior Action: Invoke Ajax behavior on the specified tag Target: group1(this directs AJAX to render data in the Panel Group Box)

  16.  5. Create an AJAX Refresh Request on the Panel Group – 1 of 2 • Select the panelGroup – note, to do this, follow these steps: 1. First select the entire dataTable. Then from Properties (the side bar of all the page properties) you will see an: h:panelGroup entry. Click it. 2. After you select h:panelGroup, you will its see sub-properties. Select: – Ajax • Check:  Allow Ajax updates • Click  Refresh, then click the icon: Click to edit Ajax request properties 1. 2.

  17.  5. Create an AJAX Refresh Request on the Panel Group – 2 of 2 From the hx:ajaxRefreshRequest property: • Click: Add Parameter • (Under Parameter values sent from the browser) • Open the Combo-Box and select: textCustState1 • Again click: Add Parameter • Open the Combo-Box again, and select: menuStates1 • Note – These will be the parameters AJAX sends to your JSFHandler in each request. You will retrieve each separately using a j2eelib.getQueryParameter(…) function • That’s all there is to it! You’re ready to test your first AJAX page.

  18.  Run the Page • Type an upper-case state abbreviation: NY …or… NJ …or… CA …or… CT • Click Search • Note the speed with which the data is returned, and note that the top part of the page doesn’t “blink” (more specifically, the entire page does not get re-loaded) when the data is returned  When you’re satisfied with this example: Edit the JSFHandler. • Comment out:// custState = j2eelib.getQueryParameter("textCustState1"); • Un-comment:custState = j2eelib.getQueryParameter("menuStates1"); • Save your JSFHandler changes, and run the page. Search using the Combo-Box

  19. OPTIONAL WORKSHOP – Use Request From a dataTable Row-Click • Here’s an extension to the page we’ve been working on – passing a parameter as an AJAX request from a clicked-row inside a DataTable. This particular Use Case is a bit “oblique” but this page pattern has lots of practical applications in real-life scenarios If you have time, try the steps starting on the next slide. Note that this is time-consuming and the steps

  20.  2. JSFHandler Code - Modifications  We will add three new lines to the JSFHandler for this scenario • A new dynamic array of customer records • The EGL get statement to retrieve the data from the database into the array • A new j2eelib.getQueryParameter - which accepts an AJAX request parameter named: “StateH” and assigns it to custState (subsequently used in the SQL table look-up) • Add the statement shown below inside the boxes • Ctrl/S 1. 2. Comment out  3.

  21.  3. Design the Page – Add a new Column and the dataTable – 1 of 2  You will add the Customers array to the page as a read-only dataTable. To do this you will need to add a column to the existing HTML table, then place the array in the table. As of this release – dragging and dropping an array in an HTML table is a two-step procedure… Add a new column to the HTML table • Click to the left-side of Select a State • Right-click and select: • Table • Add Column to Right Add the Customers array inside the new HTML column (follow these steps): 1. From Page Data, select the customers – customer[] array onto the page within any line break but not (yet) inside the HTML table. Example: 1.a Configure the controls as output (read-only) 1.b Select: CustomerId and State 2. Select the entire dataTable - Drag and drop it into the new HTML column 2. 1.

  22.  3. Design the Page – Add a new Column and the dataTable – 2 of 2  When you are finished, your HTML table containing the dataTable should look like this - Customers array dataTable New HTML table column

  23.  3. Design the Page – Add a link and Hidden Variable to the dataTable • (From the Palette) Customize the Enhanced Faces Components drawer (Right-click, select Customize) • Find the Input – Hidden component and un-check:  Hide • (From the Palette) Drag an Input – Hidden component into the State column of the dataTable (see screen capture). From Properties, ensure that its • Id is  StateH • Value is  Browse and from Page Data select Customers.State 3. Select the control (the output field, not the hidden one you just added) and from the Palette Double-Click Link to add a Faces Link to the State field. Do not fill in the URL**

  24.  4. Create the JavaScript Event to Invoke the AJAX Engine • Select the Link next to the State control. From the *Quick Edit view, select the onclick event, and specify:  Use pre-defined behavior Action: Invoke Ajax behavior on the specified tag Target: group1(this directs AJAX to render data to JSF components inside the Panel Group Box)

  25.  5. Update the Panel Group’s AJAX Refresh Request – 1 of 2 • Select the panelGroup – note, to do this, follow these steps: • First select the entire dataTable. Then from Properties (the side bar of all the page properties) you will see: h:panelGroup – click this property • When you do, you will see sub-properties of the h:panelGroup. Select – Ajax • Check:  Allow Ajax updates • Click  Refresh, then click the icon: Click to edit Ajax request properties

  26.  5. Create an AJAX Refresh Request on the Panel Group – 2 of 2 From the hx:ajaxRefreshRequest property: • Click: Add Parameter – this will add a 3rd row (Under Parameter values sent from the browser) • Type the following (CAREFULLY) directly into the new empty box: $$AJAXROW$$form1:tableEx2:StateH • Notes • $$AJAXROW$$ - JSF/AJAX statement prefix, i.e. the “current/clicked row” of a dataTable • form1:tableEx2: - The fully-qualified HTML name of the dataTable** • StateH - A hidden variable. - StateH is what the getQueryParameter references: • Note also thatcolons : separate the three-part field nameform1:tableEx2:StateH

  27.  Run the Page • From the dataTable, Click: NY …or… NJ …or… CA …or… CT

  28.  Example 2 – Dependent ComboBoxes and AJAX Submit Refresh  Here is our target page. Users can search for customers by State. And for a given customer, and find their Orders  Our page will contain an: • A Combo-Box that is populated by server-side data. The user makes a selection which fires an AJAX Submit Refresh to open: • Another Combo-Box that retrieves customers for the selected state. The users then select a customer that fires off another Submit Refresh to return all Orders for the selected customer. Let’s begin: • Create a new page, named:ajaxSubmitRefresh.jsp - For now, just change the page heading text as shown in the screen capture

  29.  2. JSFHandler Code 1. • Copy the code in the Notes section of the slide, and replace the boilerplate JSFHandler code. • Note the following: 1. There are two dynamic arrays for the ComboBoxes (note their properties), and a dynamic array of orders 2.A case statement in preRender() tests a hidden variable on the form – which determines the ComboBox that was selected – and calls one of two functions that will return dynamic array rows from different tables. 3. In the CustomersCB array we are inserting a row 1 – if customers are found – this will remind users to select a customer. • The SQL statements search for: • Customers from a selected state • Orders for a selected Customer • Please read all of the //comments in the JSFHandler code • Don’t forgetCtrl/S 2. 3.

  30.  3. Design the Page – 1 of 2 • The screen capture below shows the JSF design. Create it as follows: • (From Page Data) Drag StatesCB onto the page to create the Select a State: ComboBox • Drag a Panel - Group Box on the page below Error Messages • Select: Type of component: Group • Drag another Panel – Group Box on the page, and drop it inside the Panel – Group Box • Select: Type of component: JSP (see Notes on why you’re doing this) • (From Page Data) Drag CustomersCB onto the page, and drop it inside the JSP Panel – Group Box to create the Customers from selected state: ComboBox StatesCB  CustomersCB  Inside a JSP Panel Group Box Inside a Group Panel Group box Note: We have modified the default label text for the ComboBoxes

  31.  3. Design the Page – 2 of 2 • Drag a third Panel – Group Box (Type Group) onto the page – below the Customers ComboBox • (From Page Data) Drag the orders array inside the top-left corner of the Panel Group Box. • Create a read-only dataTable • Ensure that the OrderAmount Control Type is an Output field Your dataTable will be nested inside the Panel – Group Box • (From the Palette – if you have not done so already) Customize the Enhanced Faces Components drawer (Right-click, select Customize). Find the Input – Hidden component and un-check:  Hide • (From the Palette) Drag an Input – Hidden component onto the page • From Properties, ensure that its Id is: hidden1 ordersArray  Inside a Group Panel Group box hidden1 

  32.  5. Create the JavaScript Event to Invoke the AJAX Engine • Select the StateAbbrev ComboBox. • From the *Quick Edit view, select the onchange event - specify: -  Use pre-defined behavior - Action: Invoke Ajax behavior on the specified tag - Target: group1 (this directs AJAX to render data in the Panel Group Box) • Next we have to assign a value to the hidden field on the page • With the ComboBox still selected, add the following line of JavaScript in the Quick Edit view document.getElementById("form1:hidden1").value = 'combobox1';

  33.  5. Create the JavaScript Event to Invoke the AJAX Engine • Select the (Customers) LastName ComboBox • From the *Quick Edit view, select the onchange event - specify: -  Use pre-defined behavior - Action: Invoke Ajax behavior on the specified tag - Target: group2 (this directs AJAX to render data in the Panel Group Box) • Next we have to assign a value to the hidden field on the page • With the ComboBox still selected, add the following line of JavaScript in the Quick Edit view • document.getElementById(“form1:hidden1”).value = ‘combobox2’;

  34.  7. Create an AJAX Submit Refresh on the Panel Group • Select the first panelGroup on the page (the part of the page which will be updated through AJAX). • To do this click the LastName comboBox • From the properties view, scroll up until you see h:panelGroup • When you do, you will see sub-properties of the h:panelGroup. Select – Ajax • Check:  Allow Ajax updates • Click  Submit, then click the icon: Click to edit Ajax request properties • You should see Target: group1

  35.  7. Create an AJAX Submit Refresh on the Panel Group • Select the panelGroup – note, to do this, follow these steps: • First select the entire dataTable. Then from Properties (the side bar of all the page properties) you will see: h:panelGroup – click this property • When you do, you will see sub-properties of the h:panelGroup. Select – Ajax • Check:  Allow Ajax updates • Click  Submit, then click the icon: Click to edit Ajax request properties • You should see the following: • Repeat the above step for h:panelGroup – group1 • You are now ready to test your Submit Refresh

  36.  Run the Page – Test Submit Refresh • Run the page on the server. To see data, select: • New York • Filibuster • Lundquist Note that we have not done much with error-handling. For example, what would be appropriate to show users if there were no customers for a selected state? An optional workshop coming up will show you some examples for this.

  37. EGL/JSF Steps to Implementing AJAX External Refresh Functionality • The AJAX External Refresh allows you to use the AJAX engine to load additional (child) pages inside PanelGroup boxes in an existing (parent) page. The steps to do this are shown below – and would be used to create new pages from scratch. We’ll be re-purposing existing pages (so some steps will be consolidated) Steps for Submit • Create a new page – with a template (been there/done that) • Develop the EGL JSFHandler and business logic (been there/done that too) • Design the Page with JSF components bound to EGL data (Yep - been there/done that). • Create a JavaScript event for a JSF component, that invokes AJAX behavior for a target JSF panelGroup component (been there/done that in the last workshop) • Enable AJAX for update, and create an External Request on the JSF Panel Group Wow – less to keep track of than before. Maybe we’ve “caught a break” with this one!

  38.  1. Create a New Page …and… 2. Add JSFHandler AJAX Logic • What if you want to AJAX-ify an existing web page? Let’s give that a shot. We’ll work with the parent/child pages: allcustomers and updatecustomer – and use AJAX External Refresh to load updatecustomer into the allcustomers page. • Since the basic page design is complete, we can proceed directly to step 2. • We will not need to modify the JSFHandler for our parent page (we’ll only need to add AJAX support in the JSF controls). But we will need to add the preRender() function and call to AJAX in updatecustomer.jsp. • Load updatecustomer.egl into the Content Area. Add the logic (and modify the existing code) as shown in the three areas here: • Add the onPreRender= JSFHandler property • Add the onPreRender() function – including the j2eelib. call to AJAX engine • Modify the existing onConstruction() logic  Save your work (Ctrl/S) 1. 2. 3.

  39.  3. Add a Hidden Variable to the dataTable Open allcustomers.jsp, and from the palette Drag an Input – Hidden component into the LastName column of the dataTable (see screen capture). From Properties, ensure that its • Id is  cid • Value is  Browse, and from Page Data selectCustomers.CustomerID Browse to Page Data

  40.  3. Add the PanelGroup Box to the Page 1 of 2 • Next, drag an HTML Horizontal Rule onto the page below the Data Table • Then, Drag and drop a JSF PanelGroup Box (Type: Group) onto the page

  41.  3. Add the PanelGroup Box to the Page – 2 of 2 • Here’s what your page should look like: PanelGroup box 

  42.  4. Create a JavaScript Event for the AJAX Component • Select the group1 PanelGroup box, and from its properties: • Scroll down to the – Ajax sub-property • Check: Allow Ajax updates • Click: the icon to edit the Ajax request properties From the hx:ajaxExternalRequest sub-property, add a new parameter – exactly as shown here  Recall the syntax of this parameter from a previous workshop. $$AJAXROW$$form1:tableEx1:cid

  43.  4. Create a JavaScript Event for the AJAX Component • Select the Link next to the LastName control. From the *Quick Edit view, select the onclick event, and specify:  Use pre-defined behavior Action: Multiple actions – from the popup dialog box, Insert actions as shown below: Action: Invoke Ajax behavior on the specified tag Target: group1(this directs AJAX to render data in the Panel Group Box) Action: Do nothing and stop the event Target: No Target

  44.  Run the Page • Click a Customer LastName – note that updatecustomer.faces is loaded below the dataTable (and note the other characteristics of AJAX enabled pages: speed, refresh) • Obviously, in a real application you would design the externally-loaded page without a template – or with an appropriate template for U.I. quality • Finally – recall that External Refresh does NOT permit updates through your web pages (it’s a technique that can only be used for read/only pages in the current release).

  45. Optional Topic – Create AJAX dataTable Paging Functionality  You may have noticed that the JSF pager controls invoke your EGL JSFHandler through a Form/Submit. This may be okay for some functionality, but you also might want: 1. A better (AJAX-matized) user experience, and 2. more programmatic control over your paging. Let’s try creating our own AJAX-controls paging for a dataTable, and see if you think this approach has merit. Here’s what we’re going to build (at run-time). The AJAX techniques we’ll use have already been covered in this Unit, so this should be fairly simple and straightforward to put together.

  46.  Create AJAX dataTable Paging Functionality – 1 of 6 Create a new page, named (exactly): ajaxPaging.jsp Edit the EGL Page Code, and from the Notes section of the slide copy the code you see here  over the boiler-plate Read the comments in the code. Note the following: • firstRow will be used to control which row the dataTable starts displaying from in the EGL dynamic array • pagingSize is set to 8 – but it could be user-specified (!) We leave this up to consider as an Optional /Advanced workshop.  • Fwd/bkwdDisable are boolean variables used to control the button click options for paging

  47.  Create AJAX dataTable Paging Functionality – 2 of 6 From Page Designer: • Change the boiler-plate page heading text • Add a JSF Panel - Group (type Group) to the page • (From Page Data) Drag the customers array into the Panel Group box • Select output (read/only) fields and the some sub-set of the columns as fields in the dataTable • Add another Panel Group (type Group) to the page • (From Page Data) Select both forwarding functions under the Actions folder, and drag them into the 2nd Panel Group • Add a JSF Input – Hidden control to the page • Optional – Select each of the submit buttons, and from their – Display options properties, select  Image and browse for their Normal image to find a graphic for each. Example: images/next.jpg and images/prev.jpg Customers array as a dataTable JSF Panel Group group1 JSF Panel Group group2 Functions as submit buttons – with images Hidden Input Control

  48.  Create AJAX dataTable Paging Functionality – 3 of 6 For each of the Panel Groups: • Select the Panel Group, and from Properties -Ajax • Specify:  Allow Ajax updates  Submit

  49.  Create AJAX dataTable Paging Functionality – 4 of 6 For each of the Submit Buttons: • Select the button, and from Quick Edit/onclick event, specify: • Use pre-defined behavior Action: Multiple actions (see screen capture below) An additional JavaScript statement to value the hidden input field according to which button is clicked: document.getElementById("form1:hidden1").value = 'fwd';

  50.  Create AJAX dataTable Paging Functionality – 5 of 6 Also (for each of the Submit Buttons): • Select the button, and from Properties/All Attributes specify: • The disabled Attribute • Value: • Compute • Bind it to the appropriate EGL boolean variable

More Related