For some reason I can't refer to the element I'm editing as $(this)
when I use the onreset handler.
However, I can use use $(this)
in my callback. I'm sure onreset works because I've done an alert. Furthermore, when I do an alert on $(this).attr('id')
I get "undefined".
What's going on?
CODE
$('.edit').editable('ajax/save.php?editnotetext', {
type : 'mce',
submit : '<button class="save_button">Save</button>',
cancel : '<button class="cancel_button">Cancel</button>',
event: 'dblclick',
placeholder : 'Doubleclick to edit...',
indicator : 'Saving...',
tooltip : 'Doubleclick to edit...',
onblur: 'custom',
callback : function(){
console.log('unlocked');
$.post('ajax/save.php?unlocknotetext', {"id" : $(this).attr('id')});
},
onreset : function(){
console.log('unlocked');
//myId = $(this).attr('id');
//alert(myId); this shows up as undefined!
//alert("onreset works!");
$.post('ajax/save.php?unlocknotetext', {"id" : $(this).attr('id')});
}
});
this comment seems to explain it:
It seems inside
onreset
andonsubmit
,this
points to the form, not its container, so you have to use$(this).parent()
instead.
An easy fix would be to do this:
$('.edit').each(function() {
var $this = $(this);
$this.editable(... /* use $this instead of $(this) here*/)
});