I think at some point in time it would make some sense to do a webinar or training or something on JavaScript - and especially the way NetTalk uses JavaScript, and the way jQuery makes the JavaScript easier.
For example, here's how you would add this bit of JavaScript to your form. (while it's position is almost immaterial, it makes sense to add this in the last embed in the Value::
FieldName routine. (This is all one line)
p_web.script('$("#MAI__SizeLimit").off("keyup.nt").on("keyup.nt",function(){{this.value=this.value.replace(/[^0-9]/,"")})')since this is the key to pretty much all JavaScript power, it's worth breaking down to see what's happening.
Note that for convenience I use double quotes (") in the javascript code rather than single quotes, as it makes the Clarion code easier to read. Also note the requirement for a {{ instead of a { - this is a clarion string convention. The JavaScript of course has but one {.
So firstly the p_web call
p_web.Script(string)
This call works in both page mode, and ajax mode, and so simplifies all the work you would typically need to do to handle both modes.While there are other optional parameters to the Script method, the vast majority of cases just use the one parameter.
The JavaScript is of course the "string" parameter, which in this case is
$("#MAI__SizeLimit").off("keyup.nt").on("keyup.nt",function(){{this.value=this.value.replace(/[^0-9]/,"")})
let's reformat that a bit to make it easier to read
$("#MAI__SizeLimit")
.off("keyup.nt")
.on("keyup.nt",function(){{
this.value=this.value.replace(/[^0-9]/,"")
}
)
The first line $("#
someid") identifies the element(s) to which this bit of code will be attached. The "#someid" is known as a "selector" and is just absurdly powerful. Feel free to read
http://api.jquery.com/category/selectors/ for more on selectors. You will honestly weep when you realize how staggeringly elegant, and powerful selectors are. If jQuery has two core bits of magic, the first is the whole idea of using selectors.
The second core magic is the idea that method calls can be "chained" together. So starting with a selector you can
.dothis().thenthat().thensomethingelse()
Each of these 3 methods are called in turn, on the same "collection" of elements. this is the same as
$("selector").dothis();
$("selector").thenthat();
$("selector").thensomethingelse();
but takes less code, and is faster.
In the actual code above, two methods are being called, the first called
off, the next called
on.
The second and third lines are related. "off " is the opposite of "on" (duh) and removes any previous things, with the same name, that you may have hooked. Because NetTalk pages are very dynamic, it's good practice to do an off before an on.
Both take an event as the first parameter. In this case we're looking for a keyup event. We've narrowed the scope by adding a random, arbitrary, "extension" to the event name. This allows the "off" to be very specific. The .nt part of keyoff.nt is just "made up" to narrow the scope of the
off to that very specific
on.
The second parameter to "on" is a simple JavaScript function (which I lifted from your code. The only change I made was using double quotes instead of single quotes.)
JavaScript, and jQuery are not hard to use, once you get the basic idea, and the most powerful things are usually quite straight-forward to code. Wrapping them in a p_web.Script call in turn make it easy to embed the JavaScript on dynamic web page.
Topic: Entry picture tokens (Read 4841 times)