views:

455

answers:

3

I want to attach and event to the Jeditable Input box as soon as it gets created. There is an "onblur" but no onfocus as far as I can tell. Does anyone know a fast approach to do this?

A: 

By default, the plugin works on the click event, so try $(selector).editable(options).click(function () {foo();});

Shawn J. Goff
this is good, but the problem with click is that I am attaching the plugin "counter" to this input element and it will be duplicated everytime I click. (This wouldn't happened onfocus) the plugin is called like this $(element).counter();
Sam3k
Hm. Can you give me a link to the counter plugin page?
Shawn J. Goff
Can you not do $(selector).editable(options).counter().click(function () {foo();}) ?
Shawn J. Goff
@Shawn, no I tested your script but the problem is that each time the user clicks inside the box, it calls again the plugin, duplicating the plugin multiple times on the screen. Here is the plugin: http://www.djangosnippets.org/snippets/1239/
Sam3k
@Shawn, I should add, that a quick dirty hack I have in place is to remove the current element created by the plugin right before calling it again on the click script you posted. $(selector).editable(options).counter().click(function() { $(this).children(':nth-child(1)').children('.counter_container').remove(); $('.input_jeditable').counter(); });
Sam3k
I think the jeditable plugin adds a property called "editing" to the object, so maybe $(selector).editable(options).counter().click(if (!$(this).editing) { function () {foo();}});
Shawn J. Goff
A: 

Depending on what you want to do, you could bind your click event to the editable elements instead of onfocus:

$(document).ready(function() {
  $('.edit').editable('http://www.example.com/save.php');
  $('.edit').click(function () { ... }
});
RioTera
A: 

There's more than one way to do it but custom inputs are one. You could do something like:

$.editable.addInputType('textarea_hover', {
    element : $.editable.types.textarea.element,
    plugin  : function(settings, original) {
        $('textarea', this).bind('focus', function() {
            /* Do something on focus. */
        });
    }
});

And then call Jeditable like:

$('.edit_area').editable('http://www.example.com/save.php', { 
    type      : 'textarea_hover',
    cancel    : 'Cancel',
    submit    : 'OK'
});
Mika Tuupola