AJAX – JavaScript - Tab Page Example

1. AJAX – JavaScript - Tab Page Example These slides walk you through the process of combining AJAX functionality with Tab Pages and with JavaScript – in order to programmatically control (using JavaScript links) when to open to a particular panel.

2. Tab Controls – Programmatically Opening a Specific Tab With JavaScript • You may have a particular U.I. requirement where you need to use JavaScript to open to a particular tab. In the example we’ll be showing a user clicks a link, that opens to a specific tab. This is a rather advanced use case, that also involves using AJAX to load areas of the page – which is why we placed it in this section of the course. The techniques involved here are: • AJAX-controlled dataTables within the tabs • Invoking JavaScript to select a specific panel within the tab control • Other JavaScript options (not really necessary for this particular example, but you might find a use for them in the future) • Finished Page: • Search for customers, with LastNames > :hostVar • Select a customer from a list, and: • Load the data dynamically for that customer • Go to a specific panel within the tab using JavaScript

3.  Tab Controls – Programmatically Opening a Specific Tab With JavaScript – 1 of 4 As we did in a previous workshop, we will be giving you the complete code for the page solution (and pointers to the salient AJAX and JavaScript techniques used): • Create a new page named: danPage2.jsp • Select and copy all of the finished page source in the Notes section of this slide • From Page Designer, enter Source mode – then Select all of the source, and replace it with the source from the Notes • Save your changes • Edit the EGL source code for this page

4.  Tab Controls – Programmatically Opening a Specific Tab With JavaScript – 2 of 4 From your EGL JSFHandler: • Select and copy all of the finished page source in the Notes section of this slide • Select all of the source, and replace it with the source from the Notes • Save your changes • Note the following: • Variables for page’s functionality • AJAX getQueryParameter(“$$axjaxmode”) == null … which allows you to detect if no selection was made (and your EGL was invoked), or if this is the first time into the page’s lifecycle • Other – standard: • AJAX logic • SQL logic Return to Page Designer (working with danPage2.jsp)

5.  Tab Controls – Programmatically Opening a Specific Tab With JavaScript – 3 of 4 The AJAX-specific properties of this Workshop are similar to previous ones: (use of panelGroup, etc. use of a hidden-input field in the dataTable column, use of a clicked Link, etc.). However, for this clicked link, note: • The onclick event contains JavaScript statements to return the address of the tab control in the browser and manipulate individual panel actions (hiding/showing/and switching). • There are multiple AJAX Action/Targets – which is how data is loaded into two separate AJAX-controlled zones in this page with one user-event. Note also the that panelGroup JSF IDs are fully qualified:form1:groupx

6.  Tab Controls – Programmatically Opening a Specific Tab With JavaScript – 4 of 4 Run the page, and watch the JavaScript and AJAX operations and events. Note that the JavaScript will open tabs, before the server-side AJAX data operations, etc.