Question

SOLUTION

Thanks to Arman’s P. proof of concept, finally got it to work with my site.

CODE

//Edit Note
$(function(){
    function makeEditable() {
        $(".edit").editable('ajax/save.php?editnotetext', {
            type : 'mce',
            submit : '<button class="save_button">Save</button>',
            event: 'dblclick',
            indicator : 'Saving...',
            tooltip : 'Doubleclick to edit...',
            onblur: 'ignore',
            width : '700px',
            height : '100px',
            callback : function(value, settings){
                      console.log('unlocked');
                      $.post('ajax/save.php?unlocknotetext', {"id" : $(this).attr('id')});
                      $(this).effect("highlight", {}, 3000);
                      $(this).parents('.panel').effect("highlight", {}, 3000);
            },
            'onreset' : function(){
                console.log('unlocked');
                $.post('ajax/save.php?unlocknotetext', {"id" : $(this).attr('id')});
            }
        });
    };

    makeEditable();

     $('.edit').live('click', function() {
          console.log('locked');
          $.post('ajax/save.php?locknotetext', {"id" : $(this).attr('id')});
     });

    $(".edit").click(function() {
        $.post('ajax/save.php?checklock', {"id" : $(this).attr('id')},
            function(data) {
                // USE SAME OPTION IN BOTH PLACES
                // IF YOU USE 1ST OPTION, YOU CAN TAKE JEDITABLE OUT OF makeEditable() and do everything without that function
                if (data[0].is_locked == 1) {
                  // Option 1
                  //$(this).editable('disable');
                  //alert(data[0].username.toUpperCase() + " is editing this note!");
                  // Option 2
                  $(".edit").unbind('dblclick');
                } else {
                  // Option 1
                  //$(this).editable('enable')
                  // Option 2
                  makeEditable();
                }
            },
            "json"
        );
    });
}); 

---

UPDATE

So now, as per what I think Arman suggested, I made JEdtiable only work if a custom event is triggered. I’m trying to trigger the event only if I find no lock. But now JEditable doesn’t get called. There’s something wrong with how I’m trying ot trigger it. [Note that JEditable does get called if if I test it with a button like <button onclick="$('.edit').trigger('custom_event');">Click to Edit</button>]

CODE

So here’s my new code

$(function(){
    $(".edit").bind("dblclick",function() {
        $.ajax({ // first check to see if locked
                type: "POST",
                url: "ajax/save.php?locknotetext",
                data: {"id" : $(this).attr('id')},
                dataType: "json",    
                success: function(data){
                    if (data[0].is_locked == 1){ // if locked then alert someone is editing ntoe
                        alert(data[0].username.toUpperCase() + " is editing this note!"); 
                    }
                    else{
                        $(this).trigger('custom_event');
                        $(this).unbind('custom_event.editable');
                    }
                }
        }); //close $.ajax(
    });
});

Here’s the JEditable pieces

$(function(){
   $(".edit").editable('ajax/save.php?editnotetext', {
      type : 'mce',
      submit : '<button class="save_button">Save</button>',
      event: 'custom_event',
      indicator : 'Saving...',
      tooltip : 'Doubleclick to edit...',
      onblur: 'ignore',
      width : '700px',
      height : '100px',
      callback : function(value, settings){
                console.log(this, value, settings);
                $(this).effect("highlight", {}, 3000);
                $(this).parents('.panel').effect("highlight", {}, 3000);
                $.ajax({
                    type: "POST",
                    url: "ajax/save.php?unlocknotetext",
                    data: {"id" : $(this).attr('id')} 
                }); //close $.ajax(
                //$(this).addClass("edit");
      }
//   },
//      function(value, settings) {
//      $(this).unbind('settings.event');
    });
});

---

BACKGROUND

I’m creating a website where people can share and edit notes. What I would like to do is if someone is editing a note, the note gets locked so that another user can’t edit the note.

I’m using JEditable. Users can double click so edit a note.

If a user doubleclicks, I do an AJAX call to see if there’s a lock in the note. If there isn’t then I lock the note and the user can edit. If there is a lock, I alert the user the “userX is currently editing the note”.

PROBLEM

My problem is that I only want to call JEditable when there is no lock. Otherwise, I just want to alert the user that someone else is editing it. The problem I’m getting with my code below is that JEditable is called no matter what. I’ve also tried using another class name for the editable and adding the class only when there is no lock in that callback of the first AJAX call, but that doesn’t work either.

Any suggestions would be much appreciated!

Answer 1

JEditable supports this natively at this point:

$.fn.editable = function(target, options) {

    if ('disable' == target) {
        $(this).data('disabled.editable', true);
        return;
    }
    if ('enable' == target) {
        $(this).data('disabled.editable', false);
        return;
    }

This seems to work:

$(...).editable("disable")
$(...).editable("enable")