Jeditable - Activate edit of X by clicking on Y

Question

I'm trying to use Jeditable as an inline editing solution.

The default behavior (click on the element to edit it) works quite well, but I would like to activate an element by clicking on another element.

For example clicking on a.activateEdit will activate the next div.edit (obviously should be done using jQuery selectors).

I've looked into Jeditable docs for this, but couldn't find the right syntax

FYI, the default Jeditable syntax is something along the lines of:

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

*Edit: found a better solution *

Answer 1

Above code is not quite correct either. It triggers click event on ALL Jeditable instances.

There are many ways to do it and it all depends on your HTML, but for example if you have following HTML:

<div class="edit" id="unique_id">Editable text</div> 
<a href="#" class="edit_trigger">Edit me!!</a>

Then you can use following JavaScript:

/* Bind Jeditable instances to "edit" event. */
$(".edit").editable("http://www.example.com/save.php", {
    event     : "edit"
});
/* Find and trigger "edit" event on correct Jeditable instance. */
$(".edit_trigger").bind("click", function() {
    $(this).prev().trigger("edit");
}); 

Answer 2

You can place this code in click function of another element. example:

HTML:

<a class="clickme">Click me to edit</a>
<div class="edit">Edit Me!</div>

jQuery:

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

Answer 3

Ok, Ata's answer didn't quite work but it did set me on the right path:

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

Answer 4

I've combined the powers of the previous two responses to target the next editable element like so:

/* Find and trigger "edit" event on next Jeditable instance. */ $(".edit_trigger").livequery( 'click', function() { $(this).next().click(); });