### jQuery UI Dialogs Summary

Some jQuery UI Dialogs in Summary - to quick cut and paste into code.
Note: Not completed yet.
Great Help from: http://www.tutorialspoint.com/jqueryui/index.htm
CSS Styles Used
<head>
...
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-header,.ui-state-default, ui-button{
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.invalid { color: red; }
textarea {
display: inline-block;
width: 100%;
margin-bottom: 10px;
}
</style>
...
</head>
SHOW MESSAGE DIALOG
Example of clicking on button and show jquery ui dialog
HTML
Important to define button id in lowercase
<div id="messageDlg" title="Hello...">World!</div>
<button id="btnshowmessage">Open Dialog</button>
JavaScript
$(function() {
$( "#messageDlg" ).dialog({
autoOpen: False,
});
});
B4J
' B4J code executing JavaScript code
`Sub btnShowMessage_Click(Params As Map)
Log("Clicked button ShowMessage...")
ws.Eval("$( ""#messageDlg"" ).dialog( ""open"" );", Null)
End Sub`
BTW:
The JavaScript to show the dialog would be as above - instead of using B4J:
$( "#btnshowmessage" ).click(function() {
$( "#messageDlg" ).dialog( "open" );
});
SHOW YES NO DIALOG (Fixed Title and Content Text)
HTML
<div id="messagedlgyesno" title="Dialog Title goes here...">This my first jQuery UI Dialog Yes / No !</div>
<button id="btnshowmessagedlgyesno">Open Dialog 2</button>
JavaScript
/*
Define a yes no dialog (confirmation)
Each button call an b4j event with a boolean parameter.
*/
$(function() {
var r = false;
$( "#messagedlgyesno" ).dialog({
autoOpen: false,
buttons: {
YES: function() {
r = true;
b4j_raiseEvent("btnShowMessageDlgYesNo_event", {"result": r });
$(this).dialog("close");
},
NO: function() {
r = false;
b4j_raiseEvent("btnShowMessageDlgYesNo_event", {"result": r });
$(this).dialog("close");
}
},
title: "Success",
position: {
my: "left center",
at: "left center"
}
});
});
B4J
`Sub btnShowMessageDlgYesNo_Click(Params As Map)
Log("Clicked button ShowMessageYesNo...")
ws.Eval("$( ""#messagedlgyesno"" ).dialog( ""open"" );", Null)
End Sub`
`Sub btnShowMessageDlgYesNo_Event(Params As Map)
Log("ShowMessageDlgYesNo Result = " & Params.Get("result"))
End Sub`
SHOW YES NO DIALOG (Flexible Title and Content Text)
HTML
<div id="messagedlgyesno"></div>
<button id="btnshowmessagedlgyesno">Open Dialog 2</button>
JavaScript
$(function() {
var r = false;
$( "#messagedlgyesno" ).dialog(
{
autoOpen: false,
resizable: false,
height:200,
modal: true,
//hide: "puff",
//show : "slide",
buttons: {
YES: function() {
r = true;
b4j_raiseEvent("btnShowMessageDlgYesNo_event", {"result": r });
$(this).dialog("close");
},
NO: function() {
r = false;
b4j_raiseEvent("btnShowMessageDlgYesNo_event", {"result": r });
$(this).dialog("close");
}
},
//title: $("#messagedlgyesno").data('mytitle'),
//title: "Success",
/*
position: {
my: "left center",
at: "left center"
}
*/
});
});
B4J
' Open the dialog and set the title and content
`Sub btnShowMessageDlgYesNo_Click(Params As Map)
Log("Clicked button ShowMessageYESNO...")
Dim s As String
' Open the dialog
s = s & "$( ""#messagedlgyesno"" ).dialog( ""open"" );"
' Set the title
s = s & "$( ""#messagedlgyesno"" ).dialog( ""option"", ""title"", ""The Yes / No Dialog Title"" );"
' Set the content
s = s & "$( ""#messagedlgyesno"" ).html('The Yes / No Dialog Content');"
Log(s)
ws.Eval(s, Null)
End Sub`
' Handle the result from the javascript dialog = YES button is True ...
`Sub btnShowMessageDlgYesNo_Event(Params As Map)
Log("ShowMessageDlgyesno Result = " & Params.Get("result"))
End Sub`
INPUT FIELD and OK BUTTON
HTML
<div id="dlginput">
<div>
<input type="text" id="fieldinput"></input>
</div>
</div>
<button id="btndlginput">Open Dialog 4</button>
JavaScript
/*
Define a text input dialog with OK button
Each button call an b4j event with a boolean parameter.
*/
$(function() {
var r = false;
$( "#dlginput" ).dialog(
{
autoOpen: false,
resizable: false,
height:200,
modal: true,
buttons: {
OK: function() {
r = true;
b4j_raiseEvent("btnDlgInput_event", {"result": $( "#fieldinput" ).val() });
$(this).dialog("close");
}
}
});
});
B4J
' Open the dialog and set the title and content
`Sub btnDlgInput_Click(Params As Map)
Log("Clicked button DlgInput...")
Dim s As String
' Open the dialog
s = s & "$( ""#dlginput"" ).dialog( ""open"" );"
' Set the title
s = s & "$( ""#dlginput"" ).dialog( ""option"", ""title"", ""Enter Text"" );"
' Set the content
' s = s & "$( ""#dlginput"" ).html('The Check Conf Dialog Content');"
Log(s)
ws.Eval(s, Null)
End Sub`
' Handle the result from the javascript dialog = YES button is True ...
`Sub btnDlgInput_Event(Params As Map)
Log("DlgInputResult = " & Params.Get("result"))
End Sub`

Changed: , Category: WebApps jQuery, File: T6C280M2101.htm, ID: 2101