Where to put javascript in a dialog?

[drgarytraub]

On a dialog, I have a dropdown. When the user selects the option that they want, they then have to click Submit. I want to use java script to omit the need to click submit. Where would the javascript go to accomplish this?

Gary

[Steve Workings]

Re: Where to put javascript in a dialog?

It goes in the OnChange event. I do it by adding it to the output string on the a5w page. Example:

SearchStr = <<%a%
id="dlg_CkOut_Pay_VGIFTCARD_AMT"%a%
ReplaceStr = <<%a%
id="dlg_CkOut_Pay_VGIFTCARD_AMT"  onchange="OrderTotal()"%a%
x_dlg_CkOut_Pay.Output.Body.Dialog_HTML = stritran(x_dlg_CkOut_Pay.Output.Body.Dialog_HTML, SearchStr, ReplaceStr)

[drgarytraub]

Re: Where to put javascript in a dialog?

Steve,

Thanks for your reply. But is there an OnChange event on a dialog? Or are you saying that the javascript goes on the a5w page?

Gary

[Steve Workings]

Re: Where to put javascript in a dialog?

The OnChange event is on the control. The example I gave you fires the javascript OrderTotal() function when the value of that control is changed. The OrderTotal() function is on, or called by, the .a5w page, not the dialog component.

[drgarytraub]

Re: Where to put javascript in a dialog?

The OnChange event is on the control. The example I gave you fires the javascript OrderTotal() function when the value of that control is changed. The OrderTotal() function is on, or called by, the .a5w page, not the dialog component.

Steve,

The OnChange event is on the control? Where? I see the Validate event and the OnClick event, but no OnChange event. I must be overlooking the obvious. Please be specific - where is that ??

Gary

[Steve Workings]

Re: Where to put javascript in a dialog?

Controls, such as input fields on an HTML page, have javascript events associated with them. You can't program them (right now at least) with the WAS builders, but they're present when the HTML page is in the browser. That's why the event needs to be "programmed" by modifying the output string using the stritran() method I suggested.

For instance, use the Web App Demo, Example 10.1. There you'll see that the Submit button is actually created with this code:

<button id="button1" onclick="a5_AJAX_Callback('AJAX_UnderstandingTheBasics.Ajax.A5W','action=SayHello&name='+urlencode($('yourName').value)); return false;">Submit</button>

Now, you can't program the OnClick event of the button with the WAS builders, but there's nothing to stop you from either hand-coding this or inserting it with, say, stritran().

Here's a short intro to javascript events:

http://www.w3schools.com/js/js_events.asp

I'm thinking I'd like to find time to put together a very simple page to demonstrate the OnChange event, how to use it in our current context, etc. Not front-burner stuff though.

If I still haven't explained well enough, I trust you'll be back here for more. You know I don't mind doing this -- I think a lot of people will over time benefit from our conversation.

[Pat Bremkamp]

Re: Where to put javascript in a dialog?

Gary,

I think Steve is saying the JavaScript goes in the page, not through the component builder property sheet.

The JavaScript event, however is an event of the control, so it fires based on the control.

Pat

[Steve Workings]

Re: Where to put javascript in a dialog?

If Pat sees this reason for clarification, let me elaborate. A typical order of items on the .a5w page:

1. Javascript functions

2. Load & create grids, dialog components

3. Modify grid and dialog output strings as needed to add coding as suggested in my original response.

4. Emit output to .a5w page

[drgarytraub]

Re: Where to put javascript in a dialog?

Steve and Pat,

Please bear with me on this. It is difficult enough to get me arms around the java script, let alone where to integrate it within the a5w page. If I understand you correctly, I would put a java script function in the head of the page, and then call it somehow after the dialog is loaded.

Here is an excerpt of my a5w page where the dialog is loaded:

<td><%A5 ?x_Patient_Select.Output.Body.Dialog_Echo %></td>
</tr>
<tr>
<td><%A5 ?x_Patient_Select.Output.Body.Xbasic_Code_Errors %></td>
</tr>
<tr>
<td><strong><font color=#ffffff size=2>Patient
List</font></strong></td></tr>
<tr>
<td><%A5 ?x_Patient_Select.Output.Body.Dialog_HTML %></td>
</tr>

Could you please tell me specifically where and what I would do to this code?

Thanks!

Gary

[Steve Workings]

Re: Where to put javascript in a dialog?

Put your javascript in the <Head> section.

After your Dialog component is loaded, but before the code you just showed us, put the stritran() to use the OnChange event.

Refer again to my message #8 in this thread.

[drgarytraub]

Re: Where to put javascript in a dialog?

Steve,

I get the idea. Let me play with this.

Thanks a lot!

Gary