Take the 2-minute tour ×

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>  \

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

App.showInvitePrompt = function(){
    document.getElementById('invite_holder').innerHTML = App.inviteFBML;

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


rather than


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

<script type="text/fbml">  

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?

share|improve this question
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 <html> element, so it is valid. –  Daniel Schaffer Jan 1 '10 at 6: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 1 '10 at 23:58
@ironsam, it makes it valid xml/xhtml, and yes, it should validate. –  Daniel Schaffer Jan 22 '10 at 20:46

4 Answers 4

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:

  url: "/my/url",
  datatype: 'text',
  success: function(html) {
    var ele = $('myselector')[0];
    ele.innerHTML = html;

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

share|improve this answer
Thanks, had the same problem, and this fixed it. This should be the accepted answer! –  Matt Huggins Feb 7 '11 at 23:21

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:

share|improve this answer
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 5 '09 at 17:40
:-/ this is so bad..... –  TheVillageIdiot Oct 5 '09 at 18:40

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

<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');
share|improve this answer

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>");
share|improve this answer

protected by Will Nov 15 '10 at 11:12


Would you like to answer one of these unanswered questions instead?
