Search code examples
javascriptjqueryedit-in-place

How to toggle edit-in-place functionality in jQuery?


I've been playing around with jQuery In Place Editor and I can't figure out how to properly disable it. Below is the code I have so far.

I'm using jQuery toggle method to initialize and terminate the plugin functionality on a list of links. There are some extra bits in the code below which are probably not related to my issue but I left them there just in case.

The problem is that the code below works as I expect on first 2 clicks (i.e. 1st click - enable editInPlace plugin, 2nd click - disable it) but it doesn't re-enable edit in place functionality on 3rd click.

Any ideas why?

(shoppingList.editButton).toggle(function() {
            (shoppingList.editButton).attr('value', 'Finish editing');
            (shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable some functionality on links
                                     .addClass('inplace-editor') // add class to links I want to be editable
                                     .removeAttr('href') // make links unclickable
                                     .editInPlace({ // editInPlace plugin initialized
                                         url: 'http://localhost:8000/edit-ingredient/',
                                         show_buttons: true
                                     });

        }, function() {
            (shoppingList.editButton).attr('value', 'Edit items');
            (shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // bring back the functionality previously removed
                                     .removeClass('inplace-editor') // remove the class from links that were editable
                                     .attr('href', '#') // make the links clickable again
                                     .unbind('.editInPlace') // remove editInPlace plugin functionality
                                     ;
        });

Solution

  • Found a solution that works:

    $('input[name="edit-items"]').toggle(function() {
        $(this).attr('value', 'Finish editing');
        (shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
                                 .removeAttr('href');
        $('.editme').editable("enable");
        $('.editme').editable('http://localhost:8000/edit-ingredient/');
    }, function() {
        $(this).attr('value', 'Edit item');
        (shoppingList.$ingrLinks).attr('href', '#');
        $('.editme').editable("disable");
        (shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
    
    });