### jQuery UI Dialogs - old

To use jQuery UI Dialogs, some examples to get started.
Example using jQueryElement
In Index.html:
Define the includes and the styles:
<head>
<title>B4J WebApp Example - Dialogs</title>
<!-- Various Includes. IMPORTANT: The order of the includes is important = DO NOT CHANGE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- //B4J WebSockets client library -->
<script src="/b4j_ws.js"></script>
</head>
Define the selector "dialog":
<body>
<div id="dialog" style="display: none;"></div>
In B4J Class Module
Define the jQueryElement:
`Sub Class_Globals
Private ws As WebSocket
' Dialog jQuery UI - Important = this name must be same as the selector defined in the HTML file
Private Dialog As JQueryElement
End Sub`
Get the WebSocket and configure the Dialog jQuery UI:
`Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
' Get the websocket first
ws = WebSocket1
' Configure the jQuery UI dialog element
' Information about the jQuery UI Dialog Widget:
' http://api.jqueryui.com/dialog/
Dialog.RunMethod("dialog", Array As Object(CreateMap("autoOpen": False, "modal": True)))
End Sub`
Define a Sub to show the Dialog:
`Sub ShowDialog(Message As String, Title As String)
' Set the message
Dialog.SetHtml(Message)
'set the title
Dialog.RunMethod("dialog", Array As Object("option", "title", Title))
'open the dialog
Dialog.RunMethod("dialog", Array As Object("open"))
End Sub`
Convert HTML script examples to B4J
To help convert the examples (as shared for example by api.jqueryui.com/dialog/) to B4J
This is a typical HTML script example
...
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
// Configure
$( "#dialog" ).dialog({ autoOpen: false });
// Open the dialog
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
...
which is translated into B4J:
// Script = Configure
$( "#dialog" ).dialog({ autoOpen: false, modal: true });
' B4J
Dialog.RunMethod("dialog", Array As Object(CreateMap("autoOpen": False, "modal": True)))
// HTML
<div id="dialog" title="Dialog Title">I'm a dialog</div>
' B4J
' Set the message
Dialog.SetHtml("I'am a dialog")
'set the title
Dialog.RunMethod("dialog", Array As Object("option", "title", "Dialog Title"))
// Script = Open the dialog
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
' B4J open the dialog
Dialog.RunMethod("dialog", Array As Object("open"))
To sum up in B4J
Steps are: Configure > Set Text > Set Title > Show Dialog
Dialog.RunMethod("dialog", Array As Object(CreateMap("autoOpen": False, "modal": True)))
Dialog.SetHtml("I'am a dialog")
Dialog.RunMethod("dialog", Array As Object("option", "title", "Dialog Title"))
Dialog.RunMethod("dialog", Array As Object("open"))
Example showing an About Dialog
In B4J define the button About
`Sub Process_Globals
Public CAPPTITLE As String = "B4JHowTo WebApp Example"
Public CAPPVERSION As String = "v20140415"
Public CAPPCOPYRIGHT As String = "by www.mysite"
...
End Sub`
' Show the about message
`Sub btnAbout_Click (Params As Map)
' Run the jQuery function as defined in the HTML file Index.html
ws.RunFunction("jAlertDialog", Array As Object("About...", CAPPTITLE & "
" & CAPPVERSION & "

" & CAPPCOPYRIGHT))
End Sub`
In the HTML file Index.html (stored in www/objects Folder)
' Define the function in the script section
<script>
// AlertDialog with Parameter Title and the Message
function jAlertDialog( atitle, amsg) {
$('
').dialog(
{
modal: true,
title: atitle,
open: function()
{
var markup = amsg;
$(this).html(markup);
},
buttons:
{
Ok: function()
{
$( this ).dialog( "close" );
}
}
});
};
</script>
Notes
Another option is to use a selector in the HTML file and define the Alert Dialog accordingly.
It is not as elegant as previous solution.
<!-- define the alert dialog --->
<div id="alertDialog"></div>
<script>
$( document ).ready(function() {
$("#alertDialog").dialog({
autoOpen: false,
modal: true
});
// Connect to the server and fetch the data = the handler ToDoMain.bas is called
b4j_connect("/ws");
});
// jQuery Dialogs
function jAlertDialog( atitle, amsg ) {
// Change settings after init --- if not done, then the default is used as defined Hello World
$("#alertDialog").text( amsg );
$("#alertDialog").dialog( "option", "title", atitle );
// Show the dialog
$("#alertDialog").dialog( "open" );
};
</script>

Changed: 2018-06-07 09:30, Category: WebApps jQuery, File: T6C280M2100.htm, ID: 2100