注意：我知道bootstrap中存在一个错误导致popovers /工具提示两次调用content function() ，但我不认为这是这种情况。
我正在使用bootstrap popovers与FullCalendar gem一起更新事件。
在popover内部，有多个div被隐藏/显示，具体取决于用户所在的视图（即，有一个用于显示事件信息的视图和另一个用于更新视图的视图）。 我正在处理这个的方法是使用addClass('hide')和removeClass('hide') ，所以如果这是不正确的，请纠正我。
当我点击一个事件时，它会显示弹出窗口，并将内容添加到一次（好）。 当我导航到popover中的update div并发送一个.ajax({type: 'PUT'}) ，更新事件的popover会显示两个内容div （bad）; 然而，这是随机发生的。
如果我重新加载整个DOM并一遍又一遍地重做该过程，这种重复发生的时间只有一半。
在DOM加载后单击popover（好）
在调用ajax PUT后单击popover时 ，此SOMETIMES HAPPENS （即使没有更改字段）
这是我发送.ajax请求的方式：
// SAVE button for LESSONS, POPOVER ***/ $('body').on('click', 'button.popover-lesson-save', function() { var title = $('.popover input.popover-lesson-title').val(); var note = $('.popover input.popover-lesson-note').val(); // Retrieve event data from popover var idStr = $('.popover div.popover-body').data('id'); var id = parseInt(idStr); // Store event data into a hash for AJAX request and refetches events var data = { title: title, note: note }; // Make PUT AJAX request to database $.ajax({ url: '/lessons/' + id, type: 'PUT', data: data, dataType: 'json', success: function(resp){ $('.popover div.popover-lessons-edit').addClass('hide'); $('.popover div.popover-lessons-view').removeClass('hide'); $('.popover').popover('hide'); $('#calendar').fullCalendar( 'refetchEvents' ); }, error: function(resp){ alert('Error code 2-502-1. Oops, something went wrong.'); } }); });以下是我在FullCalendar回调中的操作：
// calendar options $('#calendar').fullCalendar({ .. eventRender: function(calEvent, element, view){ if (typeof $(element).data('bs.popover') === 'undefined'){ // Find content html (append and clone prevents parent div from being overwritten) var content = $("<div />").append($('.popover-lessons-content').clone()); var id = calEvent.id; // Attach popover to html element $(element).popover({ container: 'body', placement: 'left', html: true, content: function(){ return content.html(); // This randomly duplicates } }); } } }Note: I understand there's a bug in bootstrap that causes popovers/tooltips to call the content function() twice, but I do not think that is the case here.
I am using bootstrap popovers in conjunction with the FullCalendar gem to update events.
Inside the popover, there're multiple divs that get hidden/shown depending on which view the user is on (i.e. there is a view for displaying the event info and another for updating the view). The way I'm handling this is by using addClass('hide') and removeClass('hide'), so correct me if this is improper.
When I click on an event, it displays the popover with the content added it to once (good). When I navigate to the update div inside the popover and send an .ajax({type: 'PUT'}), the popover for the updated event displays two of the content divs (bad); however, this happens randomly.
If I reload the entire DOM and redo the process over and over again, this duplication happens ~half the time.
When popover is clicked just after DOM loads (good)
When popover is clicked after ajax PUT is called, this SOMETIMES HAPPENS (even if no fields are changed)
Here's how I send the .ajax request:
// SAVE button for LESSONS, POPOVER ***/ $('body').on('click', 'button.popover-lesson-save', function() { var title = $('.popover input.popover-lesson-title').val(); var note = $('.popover input.popover-lesson-note').val(); // Retrieve event data from popover var idStr = $('.popover div.popover-body').data('id'); var id = parseInt(idStr); // Store event data into a hash for AJAX request and refetches events var data = { title: title, note: note }; // Make PUT AJAX request to database $.ajax({ url: '/lessons/' + id, type: 'PUT', data: data, dataType: 'json', success: function(resp){ $('.popover div.popover-lessons-edit').addClass('hide'); $('.popover div.popover-lessons-view').removeClass('hide'); $('.popover').popover('hide'); $('#calendar').fullCalendar( 'refetchEvents' ); }, error: function(resp){ alert('Error code 2-502-1. Oops, something went wrong.'); } }); });And here is what I do in my FullCalendar callbacks:
// calendar options $('#calendar').fullCalendar({ .. eventRender: function(calEvent, element, view){ if (typeof $(element).data('bs.popover') === 'undefined'){ // Find content html (append and clone prevents parent div from being overwritten) var content = $("<div />").append($('.popover-lessons-content').clone()); var id = calEvent.id; // Attach popover to html element $(element).popover({ container: 'body', placement: 'left', html: true, content: function(){ return content.html(); // This randomly duplicates } }); } } }最满意答案
有些东西告诉我，而不是在这里append()
var content = $("<div />").append($('.popover-lessons-content').clone());你应该使用appendTo() 。 但是还不确定clone()用途，所以我认为它看起来像：
var content = $("<div />").appendTo('.popover-lessons-content');并且为了避免重复，$（'。popover-lessons-content'）事物应该在追加之前被清除。
Thanks to @c-smile, I've realised that the bug lied in how I retrieve my html template from my view file:
var content = $("<div />").append($('.popover-lessons-content').clone());Instead, I should have done this (and this worked after much tinkering):
var content = $('.popover-lessons-content').html(); $(element).popover({ container: 'body', placement: 'left', html: true, content: function(){ return content; } });It takes the direct html instead of cloning the div and making a big mess.
更多推荐
发布评论