Jeditable to edit a link. Help

Question

I have been playing around with jeditable for 2 days now, and it's great!

But I got a little problem, I have a link which should be editable, but whenever the field become editable, I can't edit that field, when I click, it jumps right to that link.

Any solution?

Here is my code

<a href="$homeurl/$hashkey" class="editsubject" id="$hashkey">$subject</a><span class="edittrigger" style="cursor:pointer;background:#EEEEEE;">edit</span>


$(document).ready(function() {
             $('.editsubject').editable('editsubject.php', {  
                    event : 'editclick',
                    cancel : 'Cancel',
                    submit : 'OK',
                    indicator : 'Wait...',
                    id : 'hk',
                    name : 'ns',
                    css : 'inherit'
             });
            $('.edittrigger').bind('click', function() {
                $(this).prev().trigger('editclick');
            });
         });

Thanks

I wonder why you need link text to be editable? How do you intend the user to click on the link to follow the link vs click on the link to edit the text? You may want to consider separating the 2. — Vincent Ramdhanie, Dec 03 '09 at 16:00
I am using a seperate trigger to edit the link title. So, when user click on the link, they will follow the link, and when they click the edit link, the link title will become editable. — Santana, Dec 04 '09 at 05:33
I'm having exactly the same problem. Did you manage to solve it? — zaius, Jan 22 '10 at 21:46

score 7 · Accepted Answer · answered Jun 18 '10 at 21:19

jEditable problem, here's a workaround

I would use a hidden span and then have it replace the text of the link on submit, and when you click on the trigger, make the link invisible and show the hidden span

<script type='text/javascript'>
$(document).ready(function() {
    $('.proxyedit').editable('editsubject.php', {  
        event : 'editclick',
        cancel : 'Cancel',
        submit : 'OK',
        indicator : 'Wait...',
        id : 'hk',
        name : 'ns',
        css : 'inherit',
        callback : function(value, settings) {
            $(this).css({'display':'none'});
            $('.editsubject').text($(this).text()).css({'display':'inline'});
        }

    });
    $('.edittrigger').bind('click', function() {
        $(this).prev().trigger('editclick');
        $('.proxyedit').css({'display':'inline'});
        $('.editsubject').css({'display':'none'});
    });
});
</script>

in the body

<a href="$homeurl/$hashkey" class="editsubject" id="$hashkey">$subject</a><span style="display:none;" class="proxyedit">$subject</span><span class="edittrigger" style="cursor:pointer;background:#EEEEEE;">edit</span>

score 2 · Answer 2 · answered Jun 29 '11 at 10:54

Use javascript to disable the link in the case that it contains a form. Job done:

$(document).ready(function() {
  $('a.my-editable-link').click(function() {
    form = $(this).find('form');
    if (form.length) {
      form.submit();
      return false;
    } else {
      return true;
    }
  }
})

score 1 · Answer 3 · answered May 31 '12 at 13:27

1

You can disable links which are editable with jQuery. Something like:

$(".editable a").bind("click", function(event) {
    return false;
});

answered May 31 '12 at 13:27

Mika Tuupola

19,877
5
42
49

Jeditable to edit a link. Help

3 Answers3