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

Polycarp

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. – Burkes

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. – Polycarp

I'm having exactly the same problem. Did you manage to solve it? – Akerley

Answer 1

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>

Sago

Answer 2

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

Ultramicrochemistry

Answer 3

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

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

Atavism