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.

What is going on is 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 anyway to have jquery not reformat my string before inserting it?

Answer 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);

Answer 2

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>

Answer 3

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>");

Answer 4

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

Sou 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 included in the html will be run upon insertion.

Answer 5

Tal, your idea solved my issue - thanks :)