### JavaScript Hints

Hints and Tips using JavaScript in B4J Webapps (B4J webserver)
Writing to the Console
If the browser supports debugging, use the console.log() method to display JavaScript values in the browser.
Activate debugging in the browser with F12, and select "Console" in the debugger menu.
Example:
Define script:
<script>
...
console.log("setSwitchState :: Start");
...
</script>
Output Browser Debug Window:
setSwitchState :: Start localhost:51042 (line 144)
Changing HTML Elements
The document.getElementById(id) method can be used to access an HTML element from JavaScript.
Identify the HTML element by using the "id" attribute (do not forget to specify!).
Example getting Input Value
<script type="text/javascript">
function checkField(){
var fieldName = document.getElementById('fldName');
if(fieldName.value != "")
alert("Yourname is " + fieldName.value)
else
alert("Please enter your name!")
}
</script>
<input type='text' id='fldName' />
<input type='button' onclick='checkField()' value='Name Checker' />
Example manipulate Text
<script type="text/javascript">
function changeText(){
document.getElementById('setBold').innerHTML = 'Website';
}
</script>
<p>Welcome to the site <b id='setBold'>this site</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
Note: Ensure to set the set the HTML element id attribute! Without an id, this method does not work.
Defining an About Button and call B4J Event
In HTML prior SCRIPT Section
<!-- Button: About dialog. A B4J Event is called straight by binding the button click (see under script) -->
<a data-role="button" id="btnabout" data-ajax="false" data-mini="true" data-inline="true" data-theme="b" data-transition="pop">About!</a>
In SCRIPT Section
// Dialog About call the B4J about event. No parameter provided.
$("#btnabout").on( "click", function() {
b4j_raiseEvent("about_event", {});
});
In B4J Class Module:
`Sub about_event(Params As Map)
ws.Alert("Hello World")
End Sub`
Note if parameters are required, then specify (as an example)
$("#btnabout").on( "click", function() {
b4j_raiseEvent("about_event", {"message": "Hello World"});
});
In B4J Class Module:
`Sub about_event(Params As Map)
ws.Alert(Params.Get("message"))
End Sub`
Open a new Browser Window (Tab)
' Open authors homepage in a new browser tab
ws.Eval("window.open(arguments[0])", Array("http://www.mysite"))
Display a message in a new window with title
' Note: The addressbar remain visible
`Private Sub showMessage(title As String, msg As String)
Dim s As String
s = "var myWindow = window.open('', '_blank', 'addressbar=0, menubar=no, toolbar=no, scrollbars=yes, resizable=yes, location=no, top=200, left=500, width=400, height=400');"
s = s & "myWindow.document.write(""" & msg & "

"");"
ws.Eval(s, Null)
End Sub`
Select the content of a text field
Information about the jQuery Select Event: http://api.jquery.com/select/
HTML
<form>
<input type="text" size="80" id="txtmessage"></input><button type="submit" id="btnsend">Send</button>
</form>
B4J
Private btnSend, txtMessage As JQueryElement
' Select the content by running the jQuery method select
txtMessage.RunMethod("select", Null)
Handle PageLoad & PageUnload
Example of handling pageload and page unload events
<script type='text/javascript'>
// Handle page unload event
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, IE8 compitable
myEvent(chkevent, function(e) { // For >=IE7, Chrome, Firefox
var confirmationMessage = 'Are you sure to leave the page?'; // a space
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
// Handle page load event
// executes when complete page is fully loaded, including all frames, objects and images
$(window).load(function()
{
alert("The window is loaded!");
});
// Set the ready functions
$( document ).ready(function()
{
// Connect to the B4J server
b4j_connect("/ws");
});
</script>
Set the value of a selector
HTML define the selector
<body>
...
<div id="lbltime"></div>
...
Script Section to update the value of the selektor
<script>
...
//Get the actual time and update the selector
var d = new Date();
var n = d.toLocaleTimeString();
$("#lbltime").text('Time updated: ' + n);
...
</script>
Random Number
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
</script>
var randomNumberBetween0and19 = Math.floor(Math.random() * 20);
function randomWholeNum() {
return Math.random();
}

Changed: 2018-06-07 09:27, Category: WebApps, File: T6C277M2070.htm, ID: 2070