Getting data from JS to RB

This had been puzzling me before my code vacation, but I think I'll look at it with fresh eyes.

There are a number of circumstances in which it may be ideal to get a value from Javascript into Run BASIC. For instance, using a framework like OpenRico or script.aculo.us, it would be possible to do some pretty neat effects and other stuff. I know there are other use cases, but I just can't think of any right now... my brain is fried ATM...

Anyway, my first approach was to set up a hidden textbox that is used to pass values back to the script. The only drawback to this (beta 5) was that a textbox's contents$() method doesn't seem to catch values entered using the element's "value" DOM property. I haven't tried it outside RB, but the stuff I was putting in using JS did show up on-screen when I un-hid the textbox.

Perhaps, and this is just a muse, the script needs to throw the "blur" DOM event.

If anybody has any input, it'd be much appreciated!

thanks,
- Bill

cls
textarea #xyz, ""
print ""
link #abc, "Click me", [nownow]
print " ";
html "<a href=""#"" onclick=""document.getElementsByTagName('textarea')[0].value='testing 1 2 3';"">Testing</a>"
wait

[nownow]
cls
html "<h1>" + #xyz contents$() + "</h1>"

Try that.

Hmm... this could do the trick. Will try after RC1 hits.

- Bill

Thanks, I got it to work. You'll be in the credits for #lib_js. :)

W00T!

the code :

html "<a href=""#"" onclick=""document.getElementsByTagName('textarea')[0].value='testing 1 2 3';"">Testing</a>"


Should be :

html "<a href=""#"" onclick=""document.getElementsByTagName('textarea')[1].value='testing 1 2 3';"">Testing</a>"

no ? otherwise, the JS value gets to be written in RB's main editor window.

@+


Stefan: changed JB's to RB's

Yes! textarea[0] refers to the RB IDE textarea... while programming. But it refers to the first created textarea when running as a published program, or when running in the IDE as Full Screen.

And there's a good lesson in that, too. Any Javascript calls or CSS rules that reference document elements have to take into account the fact that RB programming and deployment happens in a browser environment. Test them by publishing and running the program from the Published access, or in the IDE run as "Full Screen". With other languages, you write the code cold, outside of the operating environment, and environmental references come into play in the DEPLOYMENT environment. With RB, you have to pay attention to when sandbox you're playing in. ::)

Best would be to use getElementsByID, so you will get the correct element despite from displaying the IDE or not.
The SETID() method of RB1.01 is a real helper in this area.

Thanks for these explanations. Internet programming is pretty tricky but I feel I've got somewhere today: :)



'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
' html :
' ID is a universal attribute. Same as "class" except it applies to
' one element only and stays valid in the whole
' document. example <img src="whale.jpg" alt="logo" id="logo">
'
' JavaScript :
' "getElementById" is a function which gives you access to an
' element(like the textbox in this program). It
' takes the ID as a parameter.
'
' RB :
' SETID :sets the ID value in generated HTML for the following web
' widgets: LINK, CHECKBOX, TABLE, LISTBOX, TEXTBOX,
' TEXTAREA, PASSWORDBOX. By default the ID will be the same as the widget's handle.
'
' ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

cls
textarea #xyz, ""
#xyz SetID("xyz")
print ""
link #abc, "Click me", [nownow]
print " ";
html "<a href=""#"" onclick=""document.getElementById('xyz').value='testing 1 2 3';"">Testing</a>"
wait

[nownow]
cls
html "<h1>" + #xyz contents$() + "</h1>"


Here, the textbox is hidden so the data is passed transparently from JS to RB.
It works ! :o
But I don't really understand why the element ID must be 'nodisplay' in the first link, and #xyz in the second link ? ::)



cls
cssid #nodisplay,"{display:none;}"
textarea #xyz, ""
#xyz SetID("nodisplay")
print ""

print " ";
html "<a href=""#"" onclick=""document.getElementById('nodisplay').value='testing 1 2 3';"">Save JS value</a>"
print
link #abc, "Is it really saved?", [nownow]
wait

[nownow]
print
string$=#xyz contents$()
print "JS value = ";string$


SETID sets the CSSID of the widget, so you need to use the handle of the CSSID.
If you like to access the widget, you need to use the handle of the widget, that it got during creation.
Clear ???