Javascript MAC innerHTML

TIG

I've a specialized ruby-based tool that I wrote a year or two ago that uses several webdialogs.
I've had very few problems with it, both with PC and MAC users, but now I've got one MAC user having problems that I can't figure out...
In his case the webdialog displays as expected and editable fields fill in and change as he edits... BUT the 'fixed' fields' labels on various parts of the dialog are all 'blank'.
It's setup as a 'table' with unique 'id=' labels for each of the cells, which all start off as blank by default.
The ruby code 'populates' the dialog as it opens and it changes the 'innerHTML' of each of these labels [found by their id] to be a text-string, which is translated to suit the user's locale - if there's no matching translation or the locale is already EN-US it should pass as the original EN-US string anyway - and in his case that's what he should see, however, it is "" [blank] in any field where 'innerHTML' is used
I conclude that something in his MAC/Safari/Javascript settings [all of which seem to be very 'current'] is adrift and causing the issue?
I have no MAC to test on and the code-package is somewhat confidential so I can't post too much...
This is an example - the html says...
<table id="project_configuration1" style="padding:0px; margin:3px; width:576px; border-style:none;">
In the ruby code itself it changes the html code's parts' values to suit your entered settings and so on by using javascript calls - and also to update text-fields to suit a locale - when it executes a snippet of javascript to change a cell's "innerHTML", when translating its text-string with deBabelizer [shortcut to db()], e.g.
js=("document.getElementById(\"project_configuration_label\").setAttribute(\"innerHTML\",\" "+(db("Project Configuration"))+"\");") @dlg.execute_script(js)
Are there any know issues with MAC/Safari/Javascript failing to change 'innerHTML' strings in webdialogs ??
There are literally dozens of innerHTML changes made in these dialogs so an easy fix for this lone case would be good
Any help/advice appreciated...

tbd

because you set an attribute instead of using a property(method) ->
<div id="project_configuration_label" innerhtml="Project Configuration">

js=('document.getElementById("project_configuration_label").innerHTML = ' + db("Project Configuration"))
@dlg.execute_script(js)

TIG

TBD

Thanks for the advice... but I don't fully understand.
It works fine on every other PC and MAC installation it's tested on.
It's just on this one MAC that it fails ??
It doesn't use 'div' but 'table' and cells in tr/td etc...
Each id=label has an innerHTML="" even if it's not declared explicitly ?
Using the javascript to rest the attribute to the required value usually works ??
So you are saying if the innerHTML is set directly it'll still work AND avoid this rare glitch ???
That is
js=("document.getElementById(\"project_configuration_label\").setAttribute(\"innerHTML\", \" " + (db("Project Configuration")) + "\");")
becomes
js = 'document.getElementById("project_configuration_label").innerHTML = "' + db('Project Configuration') + '";'
then
@dlg.execute_script(js)
Give or take a (, ), ", ', \ etc or two to get the syntax right

BUT... isn't 'innerHTML' an attribute you can set ?
I can see that setting it direct with innerHTML="" will probably work too... BUT I can't see why my version fails - if you see what I mean ???
I'll try it and see...

fredo6

TIG

I confirm what Dan says. InnerHTML is a property, so you can use directly the dot notation

Also, when you need to set a property programmatically (i.e. the property name is itself a variable), you have to use the dot notation too


// Set node property
function j6_set_prop(id, sprop, sval) {
	node = document.getElementById(id) ;
	eval("node." + sprop + "= " + sval.toString()) ; 
}

Fredo

tbd

I tested your code in my safari 5.0.5 and firefox 4.01 and it fails because it sets an attribute instead of using the property to set the value of the node.

table:

<table><tr><td id="mycell">Data</td></tr></table>

code:


cell = document.getElementById("mycell")

cell.setAttribute("innerHTML","XXX")
> <td id="1" innerhtml="XXX">Data</td>

cell.innerHTML = "YYY"
> changes the cell content

TIG

Thanks for your help...

It's odd that for the last year or two it's worked fine on PC AND MAC, so recent changes to Safari/FF must have tightened the javascript/html code interpretation.

The innerHTML did set fine as an 'attribute' AND a 'property' on all versions... BUT now seems to fail when set as an 'attribute' on the more recent MAC browsers... very weird

I'll now recode to use the 'property' method in the dozens of cases

Thanks

thomthom

@tig said:

It's odd that for the last year or two it's worked fine on PC AND MAC, so recent changes to Safari/FF must have tightened the javascript/html code interpretation.

Recently browsers has picked up development - and I think some are making them stricter in order to push standards. The safest is always to check the specifications and code for that.

The last years I've used jQuery exclusively - makes me not have to bother about cross compatibility. Just learn the jQuery API. So much happier JS coding.

TIG

Update:-

I replaced all of the innerHTML setting as 'properties' rather than as 'attributes'.
The dialogs now work [just as before!] on all older PC/MAC installations, AND more importantly on the newer MAC ones too

Thank you all for you help.

Dan Rathbun

Awhile back, I noticed some quirky behaviour when trying to use innerHTML (on PC with IE7.)

I think I switched to using innerText instead and that worked. If you are not actually inserting any HTML tags within the target element, I would say use innerText instead.

I have not tested this yet since I upgraded to IE8, (and forget now even what it was I was working on, when I had the problems.)

Anyway... FYI, just a note on innerText vs innerHTML.