jQuery parsing HTML unexpectedly and wrongly

Question

So I have a non-jQuery solution to this problem, but I would rather use jQuery if there is a way, and also I am very curious as to why this is happening.

I have a Facebook iframe application, and I am using Facebox to dynamically load a some XFBML in an on-page pop-up.

Now the XFBML I have loading happens to be the fb:serverfbml tag, which creates an iframe pointed at Facebook and renders the FBML. Which essentially means I need to dynamically add the FBML and then re-parse the XFBML after I display the popup. So I have code that looks like:

var App = {};

App.inviteFBML = '\
<fb:serverfbml style="width: 300px; height: 225px;"> \
    <script type="text/fbml">  \
        <fb:fbml>  \
        </fb:fbml>\
    </script>\
</fb:serverfbml>';

App.inviteFBMLHolder = "<div id='invite_holder' style='width: 300px; height: 250px;'></div>";

App.showInvitePrompt = function(){
    $.facebox(App.inviteFBMLHolder); 
    document.getElementById('invite_holder').innerHTML = App.inviteFBML;
    FB.XFBML.Host.parseDomElement(document.getElementById('facebox'));
};

Now the above code works, however notice that I am using

document.getElementById('invite_holder').innerHTML

rather than

$('#invite_holder').html();

If I use jQuery's .html function it actually restructures my HTML before inserting it. It restructures it to the following:

<fb:serverfbml style="width: 300px; height: 225px;"> 
</fb:serverfbml>
<script type="text/fbml">  
    <fb:fbml>  
    </fb:fbml>
</script>

I assume it is doing this because it contains non-standard tags, but is there any way to have jQuery not reformat my string before inserting it?

Someone might want to rename the title for this as it is not html being parsed incorrectly but rather a proprietary Facebook format. — ironsam, Dec 31 '09 at 23:07
... but it *is* being parsed incorrectly... part of FBML implementation involves adding an xmlns:fbml declaration to the element, so it is valid. — Daniel Schaffer, Jan 01 '10 at 06:18
Does adding an xml namespace to a html document, then using xml tags from said xml namespace make the tags valid html? Certainly this stuff wouldn't validate. — ironsam, Jan 01 '10 at 23:58
@ironsam, it makes it valid xml/xhtml, and yes, it should validate. — Daniel Schaffer, Jan 22 '10 at 20:46

score 3 · Answer 1 · edited Nov 15 '10 at 08:37

Alternatively it's jQuery's HTML parser that messes things up. So if you set the innerHTML manually it'll work fine.

So you can load it all in using:

$.ajax({
  type:"GET",
  url: "/my/url",
  datatype: 'text',
  success: function(html) {
    var ele = $('myselector')[0];
    ele.innerHTML = html;
    FB.XFBML.Host.parseDomElement(ele);
  }
});

The only issue with this is that none of the JavaScript code included in the HTML will be run upon insertion.

score 1 · Answer 2 · answered Oct 05 '09 at 17:29

1

As you are using FB.XFBML.Host.parseDomElement(document.getElementById('facebox')); to parse the added html. I'm hazarding a guess that the function should be looking for simple text. You can try adding the stuff as text rather than HTML using jquery like:

$('#invite_holder').text(App.inviteFBML);

answered Oct 05 '09 at 17:29

TheVillageIdiot

40,053
20
133
188

Nice try, however using .text will escape any html characters that should normally be escaped in text. Thus instead of getting render-able xfbml, I get a text version of my html – jtymann Oct 05 '09 at 17:40

score 1 · Answer 3 · answered Dec 30 '09 at 22:50

I was doing something similar, had the same issues with jQuery rearranging my code, but I was able to get around it by doing the following:

<fb:serverfbml id="fbml">
</fb:serverfbml>

<script type="text/javascript">
function populateInviteFbml() {
    $('#fbml').load('/getinvitefbml', null, renderInvite); // gets the FBML from <script type="text/fbml"> on in
}

function renderInvite() {
   FB_RequireFeatures(['XFBML'], function() {
         FB.Facebook.init('abcdabcdabcdabcd', '/xd_receiver.htm');
            });
}
</script>

score 0 · Answer 4 · answered Dec 31 '09 at 23:04

It looks like jQuery is much more lenient with what is created inside a <script> tag versus what normal html tags not in a script block. You could create the outer non-html tag first with an id and then append to that:

$(".inner").append("<fb:serverfbml id='someID' style='width:300px; height: 225px;'>");
$("#someID").append("<script type='text\fbml'><fb:fbml></fb:fbml></script>");

jQuery parsing HTML unexpectedly and wrongly

4 Answers4