x-editable form loaded with ajax into a div

Question

I want to load a form directly into a using ajax call.

The container page has already all the needed css/scripts inclusion for x-editable forms.

I can load the html code directly inside the div, but the problem is that the x-editable fields are not rendered. Here is my code: The div that will contain the remote content

<div id="mycontent">
....
</div>

And the javascript function:

 $("#create-button").click(function(){
    document.location.href = '/fip-dt/insertProject';
    $('#mycontent').html('');
    ajaxRead('/insertProject');
 });

 function ajaxRead(file){
   var htmlObj = null;
   if(window.XMLHttpRequest){
       htmlObj = new XMLHttpRequest();
   } else if(window.ActiveXObject){
       htmlObj = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
       return;
   }
   htmlObj.onreadystatechange = function(){
     if(htmlObj.readyState == 4){
        updateObj(htmlObj);
      }
     }
     htmlObj.open ('GET', file, true);
     htmlObj.send ('');
   }
   function updateObj(data){
    document.getElementById("mycontent").innerHTML=data.responseText;
   }

I cannot use jquery directly to updated the content of div, because it seems to entirely remove the tags.

Into the remote div, i have the following javascript code:

$.fn.editable.defaults.mode = 'inline';
$('table#projectform > tbody > tr > td > a').editable();
$('.myeditable').editable({
    url: '/post'
});
$('#project-name').editable('option', 'validate', function(v){
    if(!v) return 'Required Field';
});
$('#save-btn').click(function(){
    $("p#prova").html("TEST");
}); 

It seems that this piece of code is not executed when the remote content is loaded into the div.

Any idea?

Answer 1

Try adding your code after the div has been renderd