Hint making screens close

[MyBrainIsFull]

Hope this helps someone
I have a quiz and I wanted to show at the end of a question if the student got it right (green shooting start) or wrong (red X), So I wanted a screen (Mem Form) to open for a second then automatically close. 

If you try to run javascript you will soon find controls are referenced by their ID
and I wanted to press the Cancel Button,  but every time the form is generated the random ID is different.  So I used the ClassName to find the Cancel Button as it is known as "nt-cancel-button"

So on tbe form which just has a red or green image there is a cancel button. On the form you go to the XHtml tab and insert the code below here - I used location = After </Form>  so the following gets inserted under the main form.

This locates an element on the document (page) by the class name "nt-cancel-button" and finds the random ID assigned to it that pulls back a zero based list, so I want element zero the first cancel button it finds. 

Then as a debug step this throws up a message box with the ID in it (Alert) so you can test that its working OK.  When you are happy delete the Alert line.

Now I have the ID I can set a timer (in mSecs) to click the Cancel button.

So you answer a quiz question and press submit, the server side code figures if thats right or wrong, and opens a good form or a bad form that closes by itself after 2 seconds (2000 mSecs)

-------------------------------------------------------------------[ XHtml ]---
<script>
<!--
var xId = document.getElementsByClassName("nt-cancel-button")[0];

alert( xId.id );

setInterval(function ()
{document.getElementById(xId.id).click();}, 2000);
-->
</script>

[Bruce]

Morning Kevin,

An excellent topic - and well worth discussing for those that are tipping their feet into the JavaScript world.
There are a couple "improvements" to the script we can make though. (Yours will work perfectly - these are more syntax improvements than functional improvements.)

a) Use console.log instead of alert for debugging.
console.log('somestring' + ' some other string')
is like the "debugview" of JavaScript where Alert is more like a Clarion STOP.
Sending to the console has the advantage of not requiring a click from you, so it makes debugging faster. And obviously more useful when you are putting in more than 1 or 2 messages. The output appears in the firebug console.

b) Selecting by class is fine - and in this case the class isn't likely to change - but there are other possibilities here as well.
Firstly, some syntax. Because the apps are built on jQuery you can use jQuery syntax. And one of the things jQuery does _really_ well is selecting an item, or group of items on the page.

var xId = document.getElementsByClassName("nt-cancel-button")[0];

becomes

xld = $('.nt-cancel-button')

the leading . indicates selecting by class. For selecting by ID (not useful here) you'd use a #.

In NetTalk all the "buttons that do something" have a data-do attribute. You can also select by this;

xld = $('[data-do="cancel"]')

In this case the square brackets indicate an attribute - note also that JavaScript allows " inside ' and vice versa.

jQuery also allows the call to "chain" to something.
so instead of

xld = $('[data-do="cancel"]')
$(xld).click()

you can have simply

$('[data-do="cancel"]').click()

so "selector" and "action" all in one line.

There's more - but this is enough to be getting on with for now...

cheers
Bruce

[MyBrainIsFull]

The more you get your feet wet

The deeper it becomes........


k