How to execute jquery plugin inside a Modal window?

Question

I am using the Jeditable plugin to edit in place. If I use it directly on the page, the plugin works perfectly; but if I use it in the modal window, it does not work anymore. The data populating the modal comes from a PHP file via AJAX, it seems that the plugin does not load in the modal.

This is the code that ajax receives from PHP:

<div class='edit2' id='div_1'>Dolor</div>

And this is the plugin call that I make:

$(document).ready(function() {
     $('.edit2').editable('http://www.example.com/save.php');
});

If i do this directly on the page, it works fine; but not in the modal.

Answer 1

From the description and the code in the question, it looks like the problem is the time in which you call the editable() function.

Right now, you call it when the document is ready (inside the $(document).ready() function). This is fine and will work great if the element with class .edit2 is already in the page (eg: when you use it directly on the page), but it doesn't work if the element is not there yet (eg: when you load it later using AJAX).

The solution to this issue would be to move the call:

 $('.edit2').editable('http://www.example.com/save.php');

from the page load into the success function of the AJAX call, right after you have added the content into the modal. That way, .edit2 will exist when the plugin is called, and it should work normally.