Response title
This is preview!
- Screen name: Snitz
Snitz's Profile
2 Posts
1 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 23-Oct-2015 03:44 PM
- Forum: Using jQuery Plugins
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.- Hello,
This is my url
I'm trying to make all comments on all posts to be hidden on page load of my frontpage. When user hovers over ".comments_wrapper" the .comments_list will show.
I'm using the following JS- $(document).ready(function(){
- $(".comments_list").hide();
- $(".comments_wrapper").show();
- $('.comments_wrapper').hover(function(){
- var parentId = $(this).data('data-parent-id');
- $(".comments_list").slideToggle()
- });
- });
- <div class="comments_wrapper ui-comment" data-parent-type="post" data-parent-id="400885" data-parent-url="post/400885/" data-parent-user-id="86217" data-comment-offset="3" data-comment-total="9" data-comment-order="score DESC" data-view="feed" data-vote-types="vote" data-deletes="true">
- <ul class="comments_list" style="display: none;">
- <li class="comment depth_0 admin" data-comment-id="267683" data-viewer-value="0" data-total-likes="1" data-total-dislikes="0" data-depth="0" data-total-comments="0"></li>
- </ul>
- «Prev
- Next »
Moderate user : Snitz