1

My programming skills are rudimentary at best, so please forgive me if I sound a little clunky discussing these things. I'm learning, but at a chimp's pace.

Here's my issue: I'm using JQuery Mobile to bring in some form content as a dialog via ajax. This content is contained in the document itself, in second div with a data-role="page" attribute.

Within that second page div, I have some javascript that defines a few vars, then writes them into the doc with document.write().

However, when I click the link (the far right link in the nav), instead of popping up a nice dialog, Firefox instead briefly loads a new page with the fist var (not dynamically but as a static page), then redirects back to the starting page, leaving a "wyciwyg(00000)..." in my browser history. Upon said redirect, "WYCIWYG" is displayed in the browser's title bar. Other browsers choke in slightly different ways (Safari doesn't redirect, Chrome displays all the vars and doesn't redirect, etc.), but the WYCIWYG-in-the-history factor is in play in all three. If I remove the document.write commands, the link behaves as expected.

I've scoured the web for hours and not found an answer... similar problems show up in 10 year old Mozilla bug reports, but not much else. The only resolution I've found is not to use document.write() in content loaded via ajax. Unfortunately, I have no clue what the alternative would be, or how I would even begin to execute it. The Javascript code originated at Google - front-end code for a transit trip planner.

Below is some stripped-down code that illustrates the issue. Any guidance would be greatly appreciated, bearing in mind the whole chimp's-pace thing. Thanks in advance.

<!DOCTYPE HTML>
<html>
<head>

<title>WYCIWYG</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile.structure-1.2.1.min.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<script type='text/javascript' src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>

<script>

var startExample = "USC";
var endExample = "201 N Los Angeles St.";
var zip = "90012";

</script>
</head>

<body>
<div data-role="page">
<div data-role="navbar">

<ul data-mini="true">
<li><a href="#mNavDash" data-prefetch="true" id="dashLink">Service 1</a></li>
<li><a href="#mNavCE" data-prefetch="true" id="ceLink">Service 2</a></li>
<li><a href="#planTrip" id="planTripLink" data-rel="dialog">PLAN TRIP</a></li>
</ul>
</div>

</div>
<div data-role="page" id="planTrip">
Some document.write js:
<script>
document.write(startExample);
document.write(endExample);
document.write(zip);
</script>
</div>
</body>

Halfacre
  • 475
  • 6
  • 22
  • 1
    I'm slightly confused as that what you are attempting to accomplish. Do you want the "USC 201 N Los Angeles St. 90012" to show up in a modal dialog box? – Justin Wood Aug 27 '13 at 21:13
  • var newEl = document.createElement('div'); newEl.innerHTML = 'startExampleContent
    endExampleContent
    zip'; document.getElementById('planTrip').appendChild(newEl);     – enhzflep Aug 27 '13 at 21:36
  • First of all, dialog widget will be removed on JQM v 1.4, so I recommend using popup widget. Also, with JQM 1.2 and higher, use jquery v 1.8.3 or higher, better use jquery 1.9 – Omar Aug 27 '13 at 22:07

1 Answers1

0

You could simply use jQuery.html() on placeholder elements:

Source: http://jsfiddle.net/fiddlegrimbo/suD6s/6/

Demo: http://fiddle.jshell.net/fiddlegrimbo/suD6s/6/show/light/

<div data-role="page" id="planTrip">
Some document.write js:
<p id="start"></p>
<p id="end"></p>
<p id="zip"></p>
<script>
$("#planTrip #start").html(startExample);
$("#planTrip #end").html(endExample);
$("#planTrip #zip").html(zip);
</script>
</div>
Paul Grime
  • 14,517
  • 4
  • 31
  • 55
  • Great, this got me where I needed to be. In integrating it into the real situation I had to think around some corners, but I got it running pretty fast. I'm now that much less of a noob than before, so thanks, @Paul Grime. On to the next thing... – Halfacre Aug 28 '13 at 15:24
  • Glad you got it working. FYI, as a rule `document.write()` is usually the wrong way to do something, unless you know exactly what you're doing - http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice. – Paul Grime Aug 28 '13 at 18:46