X-Editable Bootstrap field loads only on the first link

I’m using Bootstrap X-Editable along with bootstrap-wysihtml5.

I have a comment list on every post page with an edit link under each comment.

But I can only edit the first comment on the last (the newest submitted comment) and the rest simply don’t load the X-Editable field.

$('#note').editable({
     validate: function(value) {
         if($.trim(value) == '')
                  return 'Value is required.';
          },
           type: 'wysihtml5',
           title: 'Edit Comment',
           placement: 'top',
           send:'always',
           ajaxOptions: {
               dataType: 'json',
               type: 'post'
           }
  });
  $('#pencil').click(function(e) {
         e.stopPropagation();
         e.preventDefault();
         $('#note').editable('toggle');
  });

And the HTML

<div id="note" 
         class="note" 
         data-type="wysihtml5" 
         data-toggle="manual" 
         data-pk="{{ $each_comment->id }}" 
         data-placement="top" 
         data-url="{{ url($each_comment->post_id . '/comment/update') }}">
        {!! $each_comment->comment !!}
    </div>
    
    <a href="#" 
       id="pencil" 
       class="pencil" 
       data-type="wysihtml5" 
       data-toggle="manual" 
       data-pk="{{ $each_comment->id }}" 
       data-placement="top" 
       data-url="{{ url($each_comment->post_id . '/comment/update') }}">
    <i class="icon-pencil" style="padding-right: 5px"></i>[edit]
    </a>

UPDATE

I made some changes, I added a pen class to the edit link

<a href="#" id="pencil" class="pen" data-pk="{{ $each_comment->id }}">[edit]</a>

And I call it with a.pen

('a.pen').click(function(e) {
        e.stopPropagation();
        e.preventDefault();
        console.log($('#note').attr("data-pk"));
        $('#note').editable('toggle');
    });

Now all edit links are loading the X-Editable field but they’re all showing the same comment with id 142 which is the latest submitted comment.

console.log prints the same id whenever I click on the edit link.

This isn’t really my area but I’m assuming you have unique IDs on each of those notes and are not calling them all #pencil and #note? IDs must be unique.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.