Is it possible to force re-avaluating/re-parsing of HTML?

[Paul Gorodyansky]

Hi,

Ran into the following problem while trying to have a code to
attach a Virtual Keyboard to any user's form:

User clicks a button and my JavaScript changes outerHTML
of say <textarea - adding things like ONCLICK='saveCaret(this)'
etc. and it also tries to save any text that user could've entered
before the button press.

a) Value - (already typed text) is not assigned back
b) outerHTML is still the same - both in alert() text and via

javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x;

The code is simple so I wander whether we have a way to force HTML to be
re-avaluated/re-parsed via a button click

(if I do the same via <script....</script> line placed above the button
then everything is OK - because HTML is being changed _before_ the
page load is over)

=======================================
function vkb_addAttributes(obj)
{

var obj_value = ""; if (obj.value != "") obj_value = obj.value;


var kA=" onFocus='vkb_txtControl=this;' OnSelect='vkb_saveCaret(this)'";

var obj_HTML = obj.outerHTML;
var pos = obj_HTML.indexOf('>');
var part1 = obj_HTML.substring(0,pos);
var part2 = obj_HTML.substring(pos);
obj.outerHTML = part1 + kA + part2;

obj.value = obj_value;
}
=============================================

Thanks,
Paul

 

[Jake Barnes]

User clicks a button and my JavaScript changes outerHTML
of say <textarea - adding things like ONCLICK='saveCaret(this)'
etc. and it also tries to save any text that user could've entered
before the button press.

Why are you adding to the elements onclick in reaction to a user click?
Is it that the user has many choices, and each choice assigns a
different event to the element's onclick? If not, then you should just
add to the elements onclick onload, with something like this:


http://simon.incutio.com/archive/2004/05/26/addLoadEvent

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* more code to run on page load */
});

 

[Paul Gorodyansky]

Hi,

Why are you adding to the elements onclick in reaction to a user click?
Is it that the user has many choices, and each choice assigns a
different event to the element's onclick?

No, just sample onclick.

But I want to add them to <textarea NOT on page load, but later -
when a user clicks on my button (because s/he may never need
Virtual Keyboard - why them should I change input fields HTML?)

Please see 1st message once more to see what I mean.

 

[Danny]

Yes, by the way, you need some SOAP and AJAX, pun intended , SOAP
a metadata file in markup, your HTML fragment, and AJAX, Asynchronous
Javascript And XML, nevermind the XML part, it really manages
anything ASCII, but originally intended for XML, though it does XML
metadata as nodes as well. The Asynchronous means, you don't serve
the fragment(s) on pageload, or at once upon pageload or preloaded
synchronously with the page, you do it asynchronously, at a later
time, in this case, by onclick, to load the metadata string in html
markup from the server upon the event. One used by many is the
"Prototype" set, which is a premade one for requesting files
asynchronously to the webserver. Just google for it.




Danny

 

[Bo Yang]

Hi,

Ran into the following problem while trying to have a code to
attach a Virtual Keyboard to any user's form:

User clicks a button and my JavaScript changes outerHTML
of say <textarea - adding things like ONCLICK='saveCaret(this)'
etc. and it also tries to save any text that user could've entered
before the button press.

a) Value - (already typed text) is not assigned back
b) outerHTML is still the same - both in alert() text and via

As far as I know , you can just add or modify the element's
attribute to accomplish what you want . You needn't to
let the explorer to re-parse the HTML !

 

[Paul Gorodyansky]

As far as I know , you can just add or modify the element's
attribute to accomplish what you want . You needn't to
let the explorer to re-parse the HTML !

It's what I thought, too but no, it does not work if my change
function is called on a button click - Source shows that HTML code
of <textarea was not changed

I tried in both IE and Firefox. It's why I asked
"how to force browser to re-parse HTML _after_ the page load is over -
on a button's click"

 

[Paul Gorodyansky]

Hi,

Yes, by the way, you need some SOAP and AJAX, pun intended , SOAP
a metadata file in markup, your HTML fragment, and AJAX, Asynchronous
Javascript And XML, nevermind the XML part, it really manages
anything ASCII, but originally intended for XML, though it does XML
metadata as nodes as well. The Asynchronous means, you don't serve
the fragment(s) on pageload, or at once upon pageload or preloaded
synchronously with the page, you do it asynchronously, at a later
time, in this case, by onclick, to load the metadata string in html
markup from the server upon the event. One used by many is the
"Prototype" set, which is a premade one for requesting files
asynchronously to the webserver. Just google for it.

Danny

No, I can not use any _server_ stuff - need to solve using only client
things - browser and JavaScript

 

[fjanon]

I am not sure why you need to modify the HTML to add a JS event
handler. Just add the event handler in JS like this:

myelement.onload = myfunction;

function myfunction()
{
}

 

[Jake Barnes]

Hi,



No, just sample onclick.

But I want to add them to <textarea NOT on page load, but later -
when a user clicks on my button (because s/he may never need
Virtual Keyboard - why them should I change input fields HTML?)

You add the event handler on page load. That is, once the page is
loaded, add a function to the textarea's event handlers. Do you want
something to happen when focus shifts to the textarea? Then add a
function to the onfocus event of the textarea (add it on page load to
ensure the HTML of the textarea is really there).

Or if you really want to add it to the button, then add it to the
onclick of the button on page load.

Can we see the page? A url?

 

[Paul Gorodyansky]

Hi,

Sorry, was out of town

You add the event handler on page load. That is, once the page is
loaded, add a function to the textarea's event handlers.

It's what I was doing (see above) - by changing outerHTML of that
<textarea. How else can I add eventhandler? I saw some other methods
but they were "Internet Explorer only"

So if I add an eventhandler such as say onfocus or onclick this way
then everything works Ok:
<script type="text/javascript">vkb_Init();</script>
because the page is still under evaluation by the browser so it 'sees'
that some new handlers have been added.

But if I want to avoid having such line as above and what to perform
same vkb_Init() when a user clicks a button then those additional
eventhandlers are NOT seen by browser (for example,

javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x;

does not show them) - they do NOT work -
it seems that "it's too late to add eventhandlers"

So this does not work:

Or if you really want to add it to the button, then add it to the
onclick of the button on page load.

and this is why I asked the question the way I did - how to force
a browsers to re-look at a text object to realize that some new
eventhandlers have been added.

Can we see the page? A url?

http://RusWin.net/vkbFly2e.htm



--
Regards,
Paul Gorodyansky
"Cyrillic (Russian): instructions for Windows and Internet":
http://RusWin.net
Russian On-screen Keyboard: http://Kbd.RusWin.net

 

[Paul Gorodyansky]

Hi,

I am not sure why you need to modify the HTML to add a JS event
handler. Just add the event handler in JS like this:

myelement.onload = myfunction;

function myfunction()
{
}

What does "onload" means? Page's onload? Is it "IE-only" method?

I don't need to do anything on "onload" - I need to _modify_
text inout fields by adding some evenhandlers to them:

Say a page has <textarea and/or <input type-text objects
and my Virtual Keyboard needs to "attach" itself to those input
fields - for them to have the following eventhandlers:

onFocus='vkb_txtControl = this;' OnSelect='vkb_saveCaret(this)' OnClick='vkb_saveCaret(this)' OnKeyUp='vkb_saveCaret(this)'

--
Regards,
Paul Gorodyansky
"Cyrillic (Russian): instructions for Windows and Internet":
http://RusWin.net
Russian On-screen Keyboard: http://Kbd.RusWin.net

 

[Ian Collins]

Hi,



What does "onload" means? Page's onload? Is it "IE-only" method?

I don't need to do anything on "onload" - I need to _modify_
text inout fields by adding some evenhandlers to them:

Which you can do in your window.onload() method.

 

[Paul Gorodyansky]

Which you can do in your window.onload() method.

It's not _my_ page - I am preparing the code of my Virtual Keyboard
for _other_ people to use on their sites/forums - often their
pages are PHP-generated.

It's why I don't whant to use things like
<body onload...>

It's too intrusive, IMHO.

But it's not the point any way - there is no difference between my
current approach - asking them to insert the following line
below their input fields -
<script type="text/javascript">vkb_Init();</script>
and asking them to insert
onload...
stuff to their <body statement.

In both cases I cause their objects to be modified EVEN if
a button that calls Virtual Keyboard will never be pressed!

I am trying (and asking here) to add evenhandlers to some one's
input fields in a different way - ONLY if an end user click
Virtual Keyboard button - I want, during the very first click -
do the same that vkb_Init(); does currently - add several
eventhandlers (onfocus, onkeyup, ...) to all text input fields -

but it does NOT work - "too late" - the page has already been loaded
and browser does not see those added evenhandlers
(please see my today's answer to Jake above)



--
Regards,
Paul Gorodyansky
"Cyrillic (Russian): instructions for Windows and Internet":
http://RusWin.net
Russian On-screen Keyboard: http://Kbd.RusWin.net

 

[Ian Collins]

It's not _my_ page - I am preparing the code of my Virtual Keyboard
for _other_ people to use on their sites/forums - often their
pages are PHP-generated.

It's why I don't whant to use things like
<body onload...>

It's too intrusive, IMHO.

But it's not the point any way - there is no difference between my
current approach - asking them to insert the following line
below their input fields -
<script type="text/javascript">vkb_Init();</script>
and asking them to insert
onload...
stuff to their <body statement.

In both cases I cause their objects to be modified EVEN if
a button that calls Virtual Keyboard will never be pressed!

I am trying (and asking here) to add evenhandlers to some one's
input fields in a different way - ONLY if an end user click
Virtual Keyboard button - I want, during the very first click -
do the same that vkb_Init(); does currently - add several
eventhandlers (onfocus, onkeyup, ...) to all text input fields -

but it does NOT work - "too late" - the page has already been loaded
and browser does not see those added evenhandlers
(please see my today's answer to Jake above)

Ah, OK, I missed the bit about other code.

DOM manipulation can an will take effect when applied. Have you tried
just setting the target element's onclick property?

 

[Paul Gorodyansky]

...
DOM manipulation can an will take effect when applied. Have you tried
just setting the target element's onclick property?

Yes, it was 1st thing I tried to use but could not find a way to do it
and this is why started to use outerHTML to add onclick onfocus onkeyup
to the input fields HTML code.

Don't remember now where I looked - I do remember that I searched
Google exactly for that -
"set element's onclick property" - but found only something like this -

http://www.devguru.com/Technologies/javascript/10846.asp
or this: http://bton.com/tb16/jsref/object4.html#anchor540568

where I could not find what I was looking for - how to _add_
onclick="myFunction", onfocus="myFunction", onkeyup="myFunction",
onkeypress="myFunction".

I saw some other methods but they were "Internet Explorer only".

 

[Paul Gorodyansky]

I saw some other methods but they were "Internet Explorer only".

I meant the following (which, being it cross-browser thing, would be
exactly what I need):

<SCRIPT LANGUAGE=javascript FOR=textEl EVENT=onfocus>
myFunction(event);
</SCRIPT>

 

[Ian Collins]

Yes, it was 1st thing I tried to use but could not find a way to do it
and this is why started to use outerHTML to add onclick onfocus onkeyup
to the input fields HTML code.

Don't remember now where I looked - I do remember that I searched
Google exactly for that -
"set element's onclick property" - but found only something like this -

http://www.devguru.com/Technologies/javascript/10846.asp
or this: http://bton.com/tb16/jsref/object4.html#anchor540568

where I could not find what I was looking for - how to _add_
onclick="myFunction", onfocus="myFunction", onkeyup="myFunction",
onkeypress="myFunction".

I saw some other methods but they were "Internet Explorer only".

What exactly is the sequence of events you use? The user loads a page
(any page?) and then does something to add a virtual keyboard, how?

 

[Paul Gorodyansky]

What exactly is the sequence of events you use? The user loads a page
(any page?) and then does something to add a virtual keyboard, how?

Currently I offer site owners or forum Administrators the following
(seeing on http://RusWin.net/readme_e.htm and say
on working example at http://RusWin.net/vkbFly2e.htm ):

1) Add one line to <head> with vkb_load.js
(this .js loads then other .js and several .css 'silently' to the
<head>)

2) Below last input field of the form (it could be numerous <textarea
and/or <input type=text fields) insert the line

<script type="text/javascript">vkbInit(document.inputForm);</script>

that function successfully adds onfocus, onkeypressed, and other I need
to
the text input field (because it's executed while the page is still
under "evaluation" by the browser, so browser does notice those
additional evenhandlers on text fields)

If I copy this into the address bar (found somewhere on the Web)
javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>');
document.body.innerHTML = x;

then I see my changes! That is, I see onfocus=, onclick=, etc. in text
fields' HTML

3) Add a line that user of their site/forum woudl use to call Virtual
Keyboard, say
<BUTTON TYPE=button onclick="blur(); showKbd(); return false;" .........

===========================================

The above works just FINE - as working examples show.

But I created this thread to try to do the same DIFFERENT way -
without item (2) - to avoid changing objects 'just in case' -
who knows may be a user never clicks on Keyboard button -

instead of (2) I wanted to execute that vkb_Init() which adds
evenhandlers only when a user clicks on Keyboard button.

I tried and it failed and it's why I opened this thread -
looks like when I do the additions after a user clicks the button,
it's too late - the page has already been evaluated by the browser
and browser does NOT see the additions (onfocus, onclick,...) I made
in vkb_Init() when it's called after a user clicks the button -
nothing works and also page's source does not show those additions
if I paste the "look at source" line into the address bar.

So I am asking, "How to force a browser to re-evaluate HTML code
of the forms' elements".

But if it's not possible:

may be it does not work because I do those additions via
outerHTML of the objects. Is there another way to add eventhandlers?

outerHTML was the only (cross-browser) thing I found when I used
Google for something like, "Add textarea properties".

Because again, this thing (which is what I want) is IE-only:
<SCRIPT LANGUAGE=javascript FOR=textEl EVENT=onfocus>
myFunction(event);
</SCRIPT>

 

[Ian Collins]

I tried and it failed and it's why I opened this thread -
looks like when I do the additions after a user clicks the button,
it's too late - the page has already been evaluated by the browser
and browser does NOT see the additions (onfocus, onclick,...) I made
in vkb_Init() when it's called after a user clicks the button -
nothing works and also page's source does not show those additions
if I paste the "look at source" line into the address bar.

So I am asking, "How to force a browser to re-evaluate HTML code
of the forms' elements".

But if it's not possible:

may be it does not work because I do those additions via
outerHTML of the objects. Is there another way to add eventhandlers?

Could be, I've never tried that.

Just do theTextarea.onfocus = yourMethod();

 

[Ian Collins]

I tried in IE and Firefox - same result - does not work:

2 input fields; onfocus suppose to let me know which one
has focus (and I added t++ to check the behavior):

var t=0; var textControl=null;
function myFunction(obj)
{
t++; textControl=obj;
}

The line like
<script>txtField.onfocus=myFunction(this); </script>

or
<script>vkb_Init(); </script>

where 1st lines are
txtField = document.inputForm.text_Area;
txtField.onfocus=myFunction(this);

supposed to "add onfocus evenhandler for future, when focus
will be in that field". Right?

But in reality:
- it executes at once (no focus was placed by a user) -
if I place alert(obj) into myFunction() I see that

That's because I accidentally mislead you,it should be

txtField.onfocus=myFunction; <- note no parenthesis.

Sorry...