document.getElementById().innerHTML Doesn't work on device

[artinteg]

While it work on emulator.

Any idea?


Snippet of what I did: (work on emulator, failed on X3 device)

tmpText = tmpText+ "mwl.insertHTML(\"#breadcrumb2\", \" | detail\");";
tmpText = tmpText+ "mwl.removeClass(\"#contentHolder\", \"show\");";
tmpText = tmpText+ "mwl.addClass(\"#contentHolder\", \"hide\");";
tmpText = tmpText+ "mwl.removeClass(\"#contentDetailHolder\", \"hide\");";
tmpText = tmpText+ "mwl.addClass(\"#contentDetailHolder\", \"show\");";
tmpText = tmpText+ "mwl.scrollTo(\"#header\");";
tmpText = tmpText+ "mwl.insertHTML(\"#contentDetailHolder\", document.getElementById(\"news_detail_" + item.link_id + "\").innerHTML);";

[isalento]

Hi,

Could you elaborate context where tmpText is used?

-Ilkka

[artinteg]

Hi,

Thanks for quick reply.

Here's the WGT: http://dl.dropbox.com/u/1636195/LintasBerita_v1.wgt

You'll see the problem on step after clicking 'news' in 'detail news'

[isalento]

Hi,

Bad news.
Use case can be simplified to following form

<div id="source">
		source
	</div>
	
	<div id="dest">
		destination
	</div>
	
	<div onclick="mwl.insertHTML('#dest', document.getElementById('source').innerHTML);">
		Click me  
	</div>

Simulator is capable to process JavaScript and it will interpret document.getElementById as Javascript sentence. Then again Ovi browser does not recognize it and will use it only as a plain text.

From the log:

Translated { <div onclick="mwl.insertHTML('#dest', document.getElementById('source').innerHTML);"></div> } to { <div onclick="mwl.insertHTML('#dest', document.getElementById('source').innerHTML);" class="x149" n="66"/> }

After clicking "Click me" on a device div "dest" is populated with "document.getElementById('source".

So some sort of workaround is needed. Unfortunately I don't have one to offer for now.

-Ilkka

[oren.levine@nokia.com]

I ran into a similar problem (http://discussion.forum.nokia.com/fo...wl.switchClass))

I think the issue has to do with combining MWL and regular DOM commands in the same place. The simulator can handle this, but the device does not. I solved the problem in my app by moving DOM code to a separate JS function.

I suspect that this issue is related to the proxy server architecture of web apps. MWL commands execute locally on the client, while other JS (like document.getElementById()) execute on the proxy server. Perhaps the device gets confused when these are combined...

[artinteg]

I solved the problem in my app by moving DOM code to a separate JS function.

Can you share some code snippet?

[oren.levine@nokia.com]

Can you share some code snippet?

OK.

Original code combines MWL and DOM calls:

<img id="get_bus" src="img/go_button.png" onclick="mwl.switchClass('#slider', 'show_toc', 'show_scratchpad'); 
					mwl.insertHTML('#subtitle', 'Next bus at stop ID ' + document.getElementById('stop_id').value);
					getAction1(document.getElementById('stop_id').value);" alt="" />

Modified code: moved the DOM logic from the index.html page to the getAction1() JS function. Note that I replaced the original text with "Loading...." since there will be a wait until the server processes the JS.

<img id="get_bus" src="img/go_button.png" onclick="mwl.insertHTML('#subtitle', 'Loading . . .' ); 
									mwl.switchClass('#slider', 'show_toc', 'show_scratchpad'); 
								getAction1();" alt="" />

...and the function itself

function getAction1()
{
	var sid = document.getElementById('stop_id').value;
    mwl.insertHTML('#subtitle', 'Next bus at stop ID ' + sid);	
	
	getNextBus(sid);
	
    document.getElementById('scratchpad').innerHTML = '<div>' + sid + '</div>';
}

Hope this is useful.

[artinteg]

ow, like that. But, it will create unneeded server roundtrip for my application.

[oren.levine@nokia.com]

ow, like that. But, it will create unneeded server roundtrip for my application.

True, but I don't think there's a way around that right now.