Question

I am trying to embed a flash movie on a webpage through AJAX using jQuery. The flash movie takes in several commands from the querystring.

Thru an AJAX command jQuery returns HTML code that embeds the flash movie, this code has & in the querystring which then get converted to & – this breaks the code and stops the flash movie from being displayed. The dataType is “text”, not “html” in the ajax call.

Ive search around and seen a few people have suffered with this problem. Apparently the main problem is that using .html() or .append() to insert code into a webpage automatically converts & to & – Id like to be able to insert code without this happening. However Id settle for simply converting them back again (which seems to be the main solution to the problem Ive seen), but this isnt working for me at all.

I am running this bit of code to replace all the & with &:

$(target+' embed').attr('src',function(){
  var currentHref=$(this).attr('src');
  var newHref=currentHref.replace(/amp;/ig,'');
  return newHref;
});

Where target is the Id of the container div the flash movie is in. This code doesnt find any & – but when I view the source the & are still present and the flash movie is still not working.

Id love to be able to insert code without this & to & conversion happening. Can this be done with jQuery? Failing that, how can I get this bit of code to replace all the & with &?

Sorry for the long question and TIA.

Answer 1

A bare, unescaped & is simply invalid HTML. There is no reason ever to include one in markup.

Any browser, when it sees a & that is not part of an entity reference, will fix it up for you to correct your mistake. This happens at parse time, either when loading the document, or on setting innerHTML as html() and append() do.

The browser does not remember your original markup, but only a set of objects and properties (the ‘DOM’) that reflects the current state of the page. These objects are populated by parsing your input HTML, but if you fetch markup by reading innerHTML or html() you will get a freshly-serialised set of markup created from the DOM objects and not the markup you originally put in. You will see differences in whitespace, attribute order, and any mistakes in the original markup will be fixed.

When you interact with the document from script, on the level of properties, attr() or text(), you’re going directly to the DOM without asking it to serialise the information it has back into HTML markup. In that case you will get on-page ampersands as simple &, not escaped. So naturally in this case your regexp will not find any to replace; there is simply no ‘underlying markup’ for you to make edits to.

So the real question is really, what string are you ending up with that is ‘making the code fail’, and how is that being handled? This isn’t visible in the posted question.