[jquery] editableText plugin enabling problem

Question

Hi, I've been experimenting with this plugin http://valums.com/edit-in-place/, so far so good... But i ran into this problem. I want to update my page when update or new request to save data is sent but if i update this function(edit-in-place) it will add second set of buttons, third, fourth and so on. How could i tell it that it would update just on that returned data, but not all elements? I have an idea it has to do something with each function of jquerys, but I'm not sure as I'm quite new to jquery. Thanks for any help!

Answer 1

You can give the selector a context, so for example if you're doing this now:

 $('.editableText').editableText({
    newlinesEnabled: false
 });

In your ajax callback, give it a context when calling it in the success or complete method, wherever you're adding elements, like this:

$.ajax({
  ...options here...
  success: function(data) {
    $('.editableText', data).editableText({
      newlinesEnabled: false
    });
    //insert the elements somewhere...
  }
});

The , data gives it a context (you can see options for $(selector, context) here), this means it's only searching for elements of that class within the returned data/html, not all elements on the page. This should eliminate your repetition issue of it selecting and running the plugin on elements it's already run on.