### jQuery Mobile Message Dialog

This is an example of creating and using a jQuery Mobile (jQM) Message Dialog.
Additional information:
jQuery Mobile homepage: http//jquerymobile.com
Include in the jQM files, like
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
Define in HTML file (like index.html)
HTML Body section
<div data-role="dialog" id="dlgmessage" data-title="Information" data-add-back-btn=false data-theme="d" data-overlay-theme="a" class="ui-content">
<div data-role=header>
<H2 id="messageheader"></H2>
</div>
<div data-role=content>
<span id="messagecontent"></span>
</div>
<div data-role="footer">
<a data-role="button" data-mini="true" id="btnmessageok">OK</a>
</div>
</div>
HTML Script section
<script>
//
$( document ).ready(function() {
...
//
// Dialog Message
// Button Message handle click event by B4J (defined in teem.bas - no parameters used
// A message dialog is called by the sub showMessage(msg) defined in teem.bas
$('#btnmessageok').click(function() {
$( "#dlgmessage" ).dialog( "close" )
});
...
// Connect to the B4J server
b4j_connect("/ws");
});
// Open dialog.
// This function can be used to genericly openup a popup dialog window
// Parameter element_id: ID of the popup dialog
function OpenDialog(element_id) {
$.mobile.changePage(element_id, { transition: "pop", role: "dialog", reverse: false } );
};
</script>
Define in B4J Module Class
Globals
' The message header and content.
' These will populate the selectors messageheader and messagecontent in the HTML file (see previous)
`Sub Class_Globals
...
Private messageheader As JQueryElement
Private messagecontent As JQueryElement
...
End Sub`
Message Dialog
' Show Message using jquery mobile dialog
' Parameter Header as HTMl string
' Parameter Message as HTML String
`Sub showMessage(hdr As String, msg As String)
' Set the message selector
messageheader.SetHtml(hdr)
messagecontent.SetHtml(msg)
' Show the dialog
ws.RunFunction("OpenDialog", Array As String(dlgmessage.Id))
End Sub`
Usage
showMessage("Header", "

# Content

")
Additional Examples openPage, openDialog, openConfirmationDialog
/*
Open a page.
This function can be used to genericly openup a new page
Parameter element_id: ID of the page
Example B4J code based on page defined (see html code in this file ) with id managepage
Private managepage As JQueryElement ' The page to manage scribbles is defined with the id = managepage
ws.RunFunction("OpenPage", Array As String(managepage.id))
*/
function openPage(element_id)
{
$.mobile.changePage(element_id, { transition: "slide", role: "page", reverse: true } );
};
/*
Open a dialog.
This function can be used to genericly openup a popup dialog window
Parameter element_id: ID of the popup dialog
Example B4J code based upon dialog defined (see html code )
Private messagedlg As JQueryElement
ws.RunFunction("OpenDialog", Array As String(messagedlg.Id))
*/
function openDialog(element_id)
{
$.mobile.changePage(element_id, { transition: "pop", role: "dialog", reverse: false } );
};
/*
Open a confirmation dialog using standard javascript
This function is used to get a confirmation. As a dialog the standard JavaScript function confirm is used.
Parameter: Header and Confirmationmessage
Result: True or False
Example B4J Code:
Dim result As Boolean = False
Dim dlgresult As Future
Dim l As List = Array As String(hdg.ToUpperCase, msg)
dlgresult = ws.RunFunctionWithResult("openConfirmDialog", l)
result = dlgresult.Value
*/
function openConfirmDialog(hdr, msg)
{
var r = confirm(hdr + "\n\n" + msg);
return r;
};

Changed: , Category: WebApps jQuery Mobile, File: T6C282M2111.htm, ID: 2111