JQUI.Dialog - Miserver Jquery interface

MiServer is Dyalog's APL-based web development framework

JQUI.Dialog - Miserver Jquery interface

Postby Gantois on Sun Dec 27, 2015 2:24 pm

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
Gantois
 
Posts: 91
Joined: Thu Apr 17, 2014 9:44 am

Re: JQUI.Dialog - Miserver Jquery interface

Postby Brian|Dyalog on Mon Dec 28, 2015 3:49 pm

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
User avatar
Brian|Dyalog
 
Posts: 120
Joined: Thu Nov 26, 2009 4:02 pm
Location: West Henrietta, NY

Re: JQUI.Dialog - Miserver Jquery interface

Postby Gantois on Fri Mar 11, 2016 1:25 pm

Hi Brian,

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

Thanks very much!
Gantois
 
Posts: 91
Joined: Thu Apr 17, 2014 9:44 am


Return to MiServer

Who is online

Users browsing this forum: No registered users and 1 guest