JQUI.Dialog - Miserver Jquery interface

[Gantois]

Using JQUI.Dialog:

How could I get the return of button "okay" or "cancel" for take action on server in that mserver JQUI.Dialog DEMO ?

In that example ("variable opts") the server is receiving alert message. I would like customize this to take action on server depending on the "click" on these buttons (I don't know jquery, naturally). Following the demo example:

===============================================================
:Class Dialog : MiPage

:Class Dialog : MiPage

:Include #.HTMLInput

∇ Render req;opts;html;content
:Access Public

⍝ set up the Accordion content
opts←'modal: true,'
opts,←'buttons:{Okay: function() {alert("You clicked Okay");$(this).dialog("close");},'
opts,←'Cancel: function(){alert("You clicked Cancel");$(this).dialog("close");}}'

content←'This is a sample dialog, it can contain almost any HTML content.'

html←'h2'Enclose'jQueryUI Dialog Widget Demo'
html,←#.HTMLInput.Button'Click To Display Dialog' 'onclick="$(''#mydialog'').dialog(''open'');"'

html,←req #.JQUI.Dialog'mydialog' 'Sample jQueryUI Dialog'content opts

req.Return html
∇

:EndClass

============================================================================

Could someone help me?
Thanks,

Marco

[Brian|Dyalog]

Hi Marco!

You pose a good question, but first, can you please post MiServer-related questions to the MiServer forum? This way other MiServer users will benefit from having these discussions located where they would expect. I've moved this post to the MiServer forum, but there's still a link to it from the "Using the Forum" forum where you originally posted. Thanks!

Now onto your question... the solution involves three parts:

1. making the buttons each trigger an event
2. setting up a jQuery event handler for the events
3. writing an APLJax handler to handle things on the APL side

I've modified your sample below and highlighted the changes in red. Below the sample is an explanation of each of the changes...

            
    :Class Dialog : MiPage

    :Include #.HTMLInput

    :field public event     ⍝ the triggered event - JQ.On supplies this
    :field public what      ⍝ the id, if any, of the element that triggered the event - JQ.On supplies this

    ∇ Render req;opts;html;content
      :Access Public
     
⍝ set up the Accordion content
      opts←'modal: true,'
      opts,←'buttons:{Okay: function() {$("#mydialog").trigger("Okay");},'
      opts,←'Cancel: function(){$(this).dialog("close");$("#mydialog").trigger("Cancel");}}'
     
      content←'This is a sample dialog, it can contain almost any HTML content.'
     
      html←'h2'Enclose'jQueryUI Dialog Widget Demo'
      html,←#.HTMLInput.Button'Click To Display Dialog' 'onclick="$(''#mydialog'').dialog(''open'');"'
     
      html,←req #.JQUI.Dialog'mydialog' 'Sample jQueryUI Dialog'content opts
     
      html,←req #.JQ.On'#mydialog'('Okay Cancel')
     
      req.Return html
    ∇


    ∇ APLJax req
      :Access public
      ⎕←'You clicked: ',event
    ∇

:EndClass

First, we set up two fields that JQ.On will populate that tell us what event triggered, and the id of the object that triggered the event.

      :field public event     ⍝ the triggered event - JQ.On supplies this
      :field public what      ⍝ the id, if any, of the element that triggered the event - JQ.On supplies this

Next we set up the buttons to trigger their respective events when clicked:

      opts,←'buttons:{Okay: function() {$("#mydialog").trigger("Okay");},'
      opts,←'Cancel: function(){$(this).dialog("close");$("#mydialog").trigger("Cancel");}}

Next we set up the jQuery handler to listen for the "Okay" and "Cancel" events. Note that we can set up a single handler to list for multiple events - the particular event that was handled will be set in the "event" field we defined in the MiPage above.

      html,←req #.JQ.On'#mydialog'('Okay Cancel')

Finally, we write the APLJax handler on the server side. In this case, we're simply displaying the event to the APL session.

        
    ∇ APLJax req
      :Access public
      ⎕←'You clicked: ',event
    ∇

I hope this helps!
/Brian

[Gantois]

Hi Brian,

How are you? Sorry for my delay. I'm reading your explanation only now. I´ll apply your recommendation.

Thanks very much!