### jQuery UI Dialogs

To use jQuery UI Dialogs, some examples to get started.
Alert Dialog
In HTML
Define the selector "alertdialog":
<body>
<div id="alertdialog" style="display: none;"></div>
Define the Script:
<!-- Script for handling Server Connection and the jQuery UI controls-->
<script>
$( document ).ready(function() {
...
$( "#alertdialog" ).dialog({
resizable: false,
modal: true,
autoOpen: false
});
...
</script>
In B4J
Define the variable in the global class:
Important to set the same name as the selector in HTML.
`Sub Class_Globals
Private AlertDialog As JQueryElement
End Sub`
Define the Sub showing the AlertDialog
' Show the jQuery UI Dialog with Title and Message
`Sub showAlertDialog(Message As String, Title As String)
' Set the message text
AlertDialog.SetHtml(Message)
' Set the title
AlertDialog.RunMethod("dialog", Array As Object("option", "title", Title))
AlertDialog.RunMethod("dialog", Array As Object("open"))
End Sub`
Use the showAlertDialog
' Example Button About
`Sub btnAbout_Click (Params As Map)
showAlertDialog("

# " & "Hello World", "Info")
End Sub

`
Confirm Dialog
In HTML
Define the selector "confirmdialog":
<body>
<div id="confirmdialog" style="display: none;"></div>
Define the script:
<script>
$( document ).ready(function() {
...
$( "#confirmdialog" ).dialog({
resizable: false,
height:240,
modal: true,
autoOpen: false,
buttons: {
"Yes": function()
{
b4j_raiseEvent("inputdialog_event", {"result": "yes"});
$( this ).dialog( "close" );
},
"No": function()
{
b4j_raiseEvent("inputdialog_event", {"result": "no"});
$( this ).dialog( "close" );
}
}
});
...
</script>
In B4J
Define the variable in the global class:
Important to set the same name as the selector in HTML.
`Sub Class_Globals
Private ConfirmDialog As JQueryElement
End Sub`
Define the Sub showing the ConfirmDialog
' Show the jQuery UI Dialog with Title and Message
`Sub showConfirmDialog(Message As String, Title As String)
ConfirmDialog.SetHtml(Message)
ConfirmDialog.RunMethod("dialog", Array As Object("option", "title", Title))
ConfirmDialog.RunMethod("dialog", Array As Object("open"))
End Sub`
Define the Sub handling the result of the Confirm Dialog
`Sub ConfirmDialog_Event(Params As Map)
Log("ConfirmDialog Result = " & Params.Get("result"))
End Sub`
Use the showConfirmDialog
' Example Button Confirm
`Sub btnConfirm_Click (Params As Map)
showConfirmDialog("

# Please confirm?

", "Confirmation")
End Sub`
Input Dialog with 1 Field
In HTML file a field with id "inputfield" is defined. This field is then shown in the dialog and
returned as a result of the dialog.
In HTML
<body>
<div id="inputdialog"><p>Enter: <input type="text" id="inputfield"></p></div>
<script>
$( document ).ready(function() {
$( "#inputdialog" ).dialog({
resizable: false,
height: 'auto',
width: 'auto',
modal: true,
autoOpen: false,
buttons: {
"Ok": function()
{
b4j_raiseEvent("inputdialog_event", {"result": $("#inputfield").val()});
$( this ).dialog( "close" );
},
"Cancel": function()
{
b4j_raiseEvent("inputdialog_event", {"result": ""});
$( this ).dialog( "close" );
}
}
});
// Connect to the server and fetch the data = the handler webappdialogs.bas is called
b4j_connect("/ws");
});
</script>
In B4J
`Sub Class_Globals
Private ws As WebSocket
Private InputDialog As JQueryElement
End Sub`
`Sub btnPrompt_Click (Params As Map)
showInputDialog("Please Enter your Name: ", "Input Dialog Example")
End Sub`
`Sub showInputDialog(Message As String, Title As String)
' Define the dialog and assign via SetHtml - Important to use the id for the inputfield
' This can be left out if the default defined in the HTML file is used
Dim s As String = Message & ""
InputDialog.SetHtml(s)
InputDialog.RunMethod("dialog", Array As Object("option", "title", Title))
InputDialog.RunMethod("dialog", Array As Object("open"))
End Sub`
' Define the Sub handling the result of the Input Dialog
`Sub InputDialog_Event(Params As Map)
Log("InputDialog Result = " & Params.Get("result"))
End Sub`

Changed: , Category: WebApps jQuery, File: T6C280M2099.htm, ID: 2099