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

Answer 1

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 2

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 3

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(); });

Answer 4

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");
});