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 *

I know your question was asked a while back but I am currently trying to implement something very similar. I have it working with the click of a link, but is there a way to remove the click event of the element you wish to edit? In other words only make the editable element, editable from the link and not when you click it specifically? Thanks. — flowy, May 18 '11 at 20:50
You can try unbind() to remove the click event binding for that object. — yoavf, May 19 '11 at 08:19
Sorry but can you provide some code? I am pretty new to this. Would the unbind() go within the .editable(url,{});? — flowy, May 19 '11 at 13:42
Thanks but I have figured a work around. I have kept the ability to edit the element by clicking it or the edit link. Thanks for you help. — flowy, May 19 '11 at 15:49

score 24 · Accepted Answer · answered Jul 10 '09 at 10:58

24

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

answered Jul 10 '09 at 10:58

Mika Tuupola

19,877
5
42
49

3

It's worth noting that in some contexts, `$(this).prev()` might not necessarily be the element you actually want to set the editable mode on. (In this example, though, it is.) It's probably more durable to select `$("#unique_id")` or `$(".edit[id='unique_id']")` to ensure you're editing the right element. – pjmorse Nov 08 '12 at 19:02
That is great though. I just used trigger('click') so I didn't have to set a special trigger and i had something other functions set to kick off on click as well. But this was exactly what i needed. – Jake Dec 18 '12 at 05:41
1

@Mika, how do I edit multiple fields using Jeditable plugin, just found my self in a situation where I need to edit multiple field and validate against each other. – Sam Samson Dec 28 '12 at 07:42

score 2 · Answer 2 · answered Dec 14 '08 at 16:40

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

score 2 · Answer 3 · edited May 23 '17 at 11:53

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

edited May 23 '17 at 11:53

Community

1
1

answered Dec 14 '08 at 22:08

yoavf

20,945
9
37
38

score 1 · Answer 4 · answered Nov 06 '09 at 06:59

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

Jeditable - Activate edit of X by clicking on Y

4 Answers4

Linked