Add non-standard tag to DOM with jQuery

Question

I'm trying to put tag into JQuery-ui dialog widget. Due to some other problems i need to load this from server as ajax call.

Returned is:

    <div id="ajax-body">
    give gift
 <fb:serverFbml width="650px">

  <script type="text/fbml">
  <center>
      <fb:request-form action="${shareGiftUrl}" type="Podíl na Zlaté soše" method="POST"
        content="Daroval jsem ti cuhlu" invite="false">
            <fb:multi-friend-selector cols="4" rows="3" 
             showborder="false" max="1" 
             actiontext="Vyber přítele, kterému chceš darovat podíl a klikni na              'Posílat mi žádosti typu Podíl na Zlaté soše'" 
             email_invite="false" bypass="cancel" import_external_friends="false" 
             exclude_ids="${excludeIds}" />
     </fb:request-form> 
     </center>
     </script>
     </fb:serverFbml>
    </div>

if i put this into div prepared for dialog like $(div).html(data):

    function loadAjax(url, title) {
 $.get(url,
   function(data) {
    $("#ajaxModal").html(data);
    $("#ajaxModal").show();
    $("#ajaxModal").dialog( {
     modal : true,
     title : title,
     width : 680,
     height : 500,
     close : function(event, ui) {
      $("#ajaxModal").dialog("destroy");
      $("#ajaxModal").html("");
     }
    });
   });
}

it deosn't work, the tag is not in the tag in the modal dialog.

The script tag is made last child of the body tag - and so is sibling to ui-dialog div

Any ideas?

Answer 1

The problem is, that jQuery handles sript tags differently then others. If it fidns it in structure passed as parameter of html function it takes it out and run eval on it and then put it at the end of document.

Way around this is to take the script tag and put it in the structure vira normal JavaSript

var script = document.createElement('script');
script.type = 'text/fbml';
script.text = scripttext;

It can then be added like

$("#ajaxModal").append(script);

I'm using regexp to extract script from ajax response