5

I am using jQuery editinPlace plugin, the default way of doing edit in place is using a click event on a selector, but the way I am trying to do is through context menu which calls a function "rename();". So how do I block the inline edit on click event. Please share some idea on how to do this...

$('.context').editInPlace({ 
        callback: function(idOfEditor) {
        var renameUrl = "http://www.google.com/"+tablerowId+"/"+enteredText+"";
        return enteredText;
        }
    });
Sullan
  • 1,147
  • 2
  • 22
  • 39

1 Answers1

1

Open the /jquery.editinplace.js source file. (Online version > http://code.google.com/p/jquery-in-place-editor/source/browse/trunk/lib/jquery.editinplace.js)

In the first function declaration $.fn.editInPlace Line#26, change the following line :

new InlineEditor(settings, dom).init();

into > 

dom.theEditor = new InlineEditor(settings, dom);
dom.theEditor.init();
dom.data("theEditor", dom.theEditor);

Now inside the click event of your context menu function, call this >

$("#myContextMenuElement").live("click", function (e) {
                    //your other code
                    rename(e); //you need to pass the event argument to it now 
});

make sure the pass the 'e' into it.

and in the rename function > 

function rename(e) { 
   $("#myElementToEditInPlace").data("theEditor").openEditor(e);
}

works like a charm !

EDIT:

To ensure that you don't allow user to active editor by clicking on the para itself > use this code :

var myDelegate = { 
      shouldOpenEditInPlace: function (a, b, c) { 
         if (c.target.id != "idOfYourContextElement") { //if the edit was not invoked through the context menu option
              return false; //cancel the editor open event
         }
         return true;
    } 
};

and add the delegates in your initialization>

$('.context').editInPlace({ 
        callback: function(idOfEditor) {
           var renameUrl = "http://www.google.com/"+tablerowId+"/"+enteredText+"";
            return enteredText;
        },
        delegate: del
    });
neebz
  • 11,465
  • 7
  • 47
  • 64
  • It works fine for the first time... once i click on the context menu, the editplace works fine, but the next time, if I directly click the class="context", the editinplace happens.. I do not want users to do that.. the code i am using is as follows.. $('.renameFunc').live("click", function (e) { $(".context").editInPlace({ callback: function(idOfEditor, enteredText, orinalHTMLContent, settingsParams, animationCallbacks) { return enteredText; } }); rename(e); }); function rename(e) { $(".context").data("theEditor").openEditor(e); } – Sullan May 05 '11 at 06:31
  • How do i detach the editinplace event after getting triggered for the first time.. i tried unbinding like this (unbind('.editInPlace')), but if i use this i wont be able to do editinplace on the element after the first time.. – Sullan May 05 '11 at 06:36
  • Thanks @nEEbz.. and sorry for the delay in replying to ur answers, now i am back at my workplace.. :-) I've tried out what you said and created this jsfiddle which doesnt seem to work.... http://jsfiddle.net/Sullan/txXxH/7/ – Sullan May 09 '11 at 01:50
  • I've updated it a bit now. Your changes in the editinplace source code is perfect. You just need to initialize it correctly. I've done that in the same above link. It's working bootifully :) – neebz May 09 '11 at 10:19
  • glad i could help; wasn't there a bounty on this question? – neebz May 12 '11 at 09:25
  • Yes.. and I have donated 50 points for it.. u c how desperate i was to get that fixed :-) – Sullan May 12 '11 at 11:02