Dyalog MiServer 3 Sample Site

:Class ejDialogAdvanced : MiPageSample 
⍝ Control:: _SF.ejDialog 
⍝ Description:: Interdependant multi-modal dialog boxes 
 
    ∇ Compose;dlg;content;ig;popup 
      :Access Public 
      '#show' 'onclick="$(''#dialog'').ejDialog(''open'')"'Add _.Button'Click here to re-open the dialog.' 
      
      ⍝ Here is some content (see InputGridSimple for explanation): 
      content←'dialog'Add _.div,New _.h2'Please tell us about yourself' 
      content.Add _.form,ig←New _.InputGrid 
      ig.(Border Labels)←0,⊂'First name' 'Last name' 'Birthdate' 
      ig.Inputs←'fname' 'lname' 'bdate'New¨_.EditField _.EditField _.jqDatePicker 
      ig.Inputs[3].Set'dateFormat' 'dd/mm/yy' 
      content.Add _.hr 
      ⍝ A button to toggle another dialog: 
      '#terms' 'onclick="togglePopup()"'content.Add _.Button 'Terms and conditions' 
       
       
      ⍝ Here is the script that does the toggling: 
      Add _.script ScriptFollows 
      ⍝ function togglePopup() { 
      ⍝     if ($("#popup").ejDialog("isOpen")) { 
      ⍝         $("#popup").ejDialog("close"); 
      ⍝     } else { 
      ⍝         $("#popup").ejDialog("open"); 
      ⍝     }; 
      ⍝ }; 
       
      ⍝ Adding the actual dialog 
      dlg←Add _.ejDialog'#dialog' 'ejDialog Advanced example' 1 
      'showOnInit' 'position.Y' 'position.X'dlg.Set _true 20 40 
      dlg.(Resize Buttons)←0,⊂'close' 'maximise' 'minimise' 'collapsible' 'pin' 
      
      popup←'#popup'Add _.div  
      popup.Add '<p>This example only shows off dialog boxes.</p>' 
      popup.Add '<p>For form submission techniques, go to ' 
      popup.Add _.A 'the main page' '/' 
      popup.Add' and search for "input".</p>' 
       
      'showOnInit'(Add _.ejDialog'#popup' 'Terms and Conditions').Set _false 
      
    ∇ 
 
:EndClass 

Controls used on this page: Dyalog: A, Button, EditField, InputGrid jQueryUI: jqDatePicker Syncfusion: ejDialog Base HTML: div, form, h2, hr, script