### JavaScript Dialogs examples

This is an example project to show the B4J WebApp functionality based upon WebSockets.
It shows usage of JavaScript Functions Dialogs Alert, Confirm, Prompt via methods
WebSocket.RunFunction, WebSocket.RunFunctionWithResult.
Please note that the plain JavaScript functions are used for the Dialog examples.
Notes:
It is important that the JavaScript code is tested properly else strange behaviour by the WebServer
might occur.
The usage of the jQuery UI functions are in progress.
In B4J
Define the Button actions.
`Sub btnAlert_Click (Params As Map)
ws.RunFunction("alertDialog", Array As Object("Alert Dialog"))
End Sub`
`Sub btnConfirm_Click (Params As Map)
Dim res As Future = ws.RunFunctionWithResult("confirmDialog", Array As Object("Confirm Dialog"))
Log("Confirm Dialog: " & res.Value)
End Sub`
`Sub btnPrompt_Click (Params As Map)
Dim res As Future = ws.RunFunctionWithResult("promptDialog", Array As Object("Prompt Dialog", "Default Text"))
Log("Prompt Dialog: " & res.Value)
End Sub`
In HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 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" 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>
<body>
<!-- The actionbar which is a table with one row looking like a toolbar --->
<div id="toolbar">
<table id="tbltoolbar">
<tr>
<td>
<button id="btnalert">Alert</button>
<button id="btnconfirm">Confirm</button>
<button id="btnprompt">Prompt</button>
<button id="btnabout">About</button>
</td>
<td><id="result"></td>
</tr>
</table>
</div>
<!-- Script for handling Server Connection and the javaScript Dialogs -->
<script>
//
$( document ).ready(function() {
// Connect to the server and fetch the data = the handler ToDoMain.bas is called
b4j_connect("/ws");
});
// Dialogs
// Alert
// Returns none
function alertDialog( amsg ) {
alert(amsg);
};
// Confirm
// Returns true or false
function confirmDialog( cdmsg ) {
return confirm(cdmsg);
};
function promptDialog( pdmsg, pddefault)
{
var p=prompt(pdmsg,pddefault);
return p;
};
</script>
</body>
Copy Text to Clipboard
Example using 2 fields
$('#btncopy').click(function( event ){
window.prompt("Copy to clipboard: Ctrl+C, Enter", $("#field1").val() + "\r" + $("#field2").val())
// alert($("#field1").val());
event.preventDefault();
});
Various Hints
Define a Carriage Return
<script language="JavaScript">
alert("This carriage return is placed\rin the middle of this line!");
</script>

Changed: , Category: WebApps, File: T6C277M2069.htm, ID: 2069