Jeditable to edit a link. Help.

Question

Hi, 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

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>