Pass Form Field Values to jQuery Client Script

[tom.smith]

Hi

Is it possible to pass a form field value to a jQuery client script?

Basically I have successfully implemented jQuery dialogue so that when a user clicks on a repeater row a jQuery dialogue appears containing another form. At present there are no URL parameters passed to the form in this event. However, I'd like to pass a URL parameter through as part of the call.

The repeater row basically contains user details, and the jQuery dialogue opens a business card of sorts. I'd like to pass jQuery the employee ID field in the table that is used for the repeater.

I've tried adapting the following jQuery code:

Code: Select all

$("#modalIframeId").attr("src","/ufsint/ufsmain?formid=CONTACT_BUSINESS_CARD&P1=123456789");

... to ...

Code: Select all

$("#modalIframeId").attr("src","/ufsint/ufsmain?formid=CONTACT_BUSINESS_CARD&P1=" + tables.EMPLOYEES_TBL.EMPLOYEE_ID.value);

... but the dialogue shows a blank body. Not even the default value is used by the called form, so it's breaking the call completely.

Any assistance would be greatly appreciated.

Tom

[Jon]

Tom,

Key question is whether or not the field value you want to pass is currently visible on the page. If it is, probably the easiest way is to give the table column a class then use jQuery to read its value - see this post for an example http://forum.ebasetech.com/forum/viewtopic.php?t=532.

If the field or table column is not displayed on the page, you can use the new client API in V4.5 to read it. e.g. for a field:

Code: Select all

var val = $eb.getFieldValue("FIELD1");

For a table, it's a bit more complicated as it will return the value for the table's current row on the server.

Regards
Jon

[tom.smith]

Hi Jon

That's for the reply - the field isn't visible on the page, and is in a table. Returning the current row shouldn't be an issue, as I want it to get the detail from the photo of the employee that the user clicks on, so the current row should be the row containing the employee they have clicked.

In your example, what exactly is the $eb representing? I understand that I have to change the name of the specified field from "FIELD1" to the name of my field, but not sure what to substitute $eb for.

Thanks

Tom

[Jon]

Tom,

$eb is the Ebase client api - see online documentation. Though note that you must be at level V4.5 which is when we introduced this.

I'm afraid your assumption about current rows isn't correct: in your scenario the client is disconnected from the server - when the user clicks on something, you are handling this entirely on the client and the information is not transmitted to the server.

I think the best way to solve your problem is to add the employee id to the repeater row but make it invisible to the user using CSS display:none. Then when the user clicks on the row, you read this value - you do this by assigning a class to it then use jQuery to navigate to the hidden employee id, then get the value. I think this way is easier than using the client API to call the server.

Regards
Jon

[tom.smith]

Hi Jon

Thanks, I'll follow your advice about hiding the field within the repeater row.

I'll also have a read through the documentation for the new API to try and familiarise myself with that.

Thanks for your help Jon

[tom.smith]

Hi Jon

Sorry to ask further questions - and not sure if this is an ebase question or more of a jQuery question. Needless to say this is my first attempt with jQuery both in and out of ebase.

I've got the variables passing to the jQuery dialog - not a problem there. The dialog only displays when the page is first launched though. If I have to alter anything on the page when it displayed in the web browser - even using the navigation bar for the repeater, or applying filters via a search button I have created, the jQuery dialog doesn't appear.

I'm sure this is because when the form loads, the $(document).ready() statement binds the jQuery click events to the page elements. However, when interactions take place in the web browser, the repeater rows change. The newly displayed repeater rows don't have any jQuery on click events bound to them as the $(document).ready() doesn't fire, and therefore the repeater rows don't display any dialog when clicked.

I've been looking through the jQuery API documentation, and can't work out how to re-run the $(document).ready() jQuery code in the client script to then bind the jQuery click events to the new repeater rows. The only thing I can think of is to bind a click event to every possible button and navigation element on the page, but that seems very convoluted. If we wanted to add a new button at a later stage, we'd have to remember to ensure that the click even had been set up for that too.

Any ideas?

Thanks

Tom

[Dave]

Hi Tom,

As you say, your problem is that $(document).ready() only runs when your page first loads and your Xi app is using AJAX calls to dynamically change your page HTML (without a page re-load), and therefore loses the event bindings you set up in the first place.

The solution though is to use the Ebase ready event to bind your events. This is an event provided by the platform specifically to overcome the problem you have. Essentially it fires whenever Xi has finished it's AJAX-based refresh stuff.

You'll find the event in the jQuery event list in the HTML Element Properties window.

You can read about the subject in general in the Designer help in /ufs/doc/Html_Element_Properties.htm

If you're still struggling then let me know and we'll set up a call with someone to help out.

Btw. don't worry about asking questions, it's what the Forum is for.

Dave

[tom.smith]

Hi Dave

Sorry it's taken a while to respond.

Thanks for the info - I copied the entire contents of my client script into the HTML element properties and removed the client script from the form. Works like a charm.

Tom