I'm using Twitter Boostrap with a website re-design, and I need some jQuery help. I'm using the 'Popover' add-on that is packaged with bootstrap, and I have it in a #div tag (#onlinedata to be specific), and I'm using jquery to reload the div every 10 seconds. This works fine, however, if you happen to be hovering over the link that activates the popover when the div refreshes, the popover gets stuck.
I'm using this code for the refresh:
setInterval(function(){
$("#onlinedata").load("http://website.com #onlinedata");
}, 10000);
And if needed, the code that activates the popover:
$(function () {
$('a[rel=popover]').popover({
placement:'right',
title:'Title',
content: $('#div-that-contains-data').html()
});
});
Is there a way to avoid the popover from being stuck open when the div reloads?
Any help is greatly appreciated.
Associated HTML
The $id is a key specific for each popover because I have multiple popovers.
The popover portion which is hidden until the popover_controller is hovered:
<div id="controller_popup_$id" style="display:none;">
<div style="font-size:11px">
//data_fetched_from_database
</div>
</div>
The link that triggers the popover
<li>Link Title</li>
And finally, the current javascript I'm using (it gets looped through the database records so each record gets the following javascript):
$(function () {
$('a[rel=popover_controller_$id]').popover({
placement:'right',
title:'Title (this is fetched from the database for each popover)',
content: $('#controller_popup_$id).html()
});
});
$(document).ready(function() {
// refreshing code
setInterval(function() {
$('#controller_popup_$id').hide(); // close any open popovers
// fetch new html
$('#onlinedata').load('http://website-link.com #onlinedata', function() {
// after load, set up new popovers
$('a[rel=popover_controller_$id]').popover({
placement:'right',
title:'Title (this is fetched from the database for each popover)',
content: $('#controller_popup_$id').html()
});
});
}, 10000); // 10 second wait
});
**New Code Witch Semi-Works**
I'm using the following code which semi-works. The only problem I'm having is after it reloads the #onlinedata div, it multiplies the popover links.
$(document).ready(function() {
$('a[rel=popover_controller_$id]').popover({
placement:'right',
title:'Title',
content: $('#controller_popup_$id').html()
});
// refreshing code
setInterval(function() {
// fetch new html
$('a[rel=popover_controller_$id]').load('http://websiteurl.com/ #onlinedata', function() {
$('a[rel=popover_controller_$id]').popover('destroy'); // remove old popovers
// after load, set up new popovers
$('a[rel=popover_controller_$id]').popover({
placement:'right',
title:'Title',
content: $('#controller_popup_$id').html()
});
});
}, 10000); // 10 second wait
});
Like this answer, I think you will need to reapply the plugin to the new DOM elements that have been load-ed. This effectively means adding a copy of the popover code after the load call. If old popovers are hanging around, you may have to hide them. This gives us:
$(document).ready(function() {
// refreshing code
setInterval(function() {
$('a[rel=popover]').popover('destroy'); // remove old popovers
// fetch new html
$('#onlinedata').load('/onlinedata.html #onlinedata', function() {
// after load, set up new popovers
$('a[rel=popover]').popover({
placement:'right',
content: $('#div-that-contains-data').html()
});
});
}, 10000); // 10 second wait
});
Related
I am using Bootstrap 5.1.3 (in Rails). Our application consists of dynamically loaded data, that is not always the fastest to load (some complicated SQL queries / huge amounts of data to make calculations with).
We use tooltips on different elements to show extra information / indicate (click)actions. Tooltips are added like this.
On the element that should get the tooltip:
data-bs-toggle="tooltip" data-bs-placement="top" title={question.questionDescription}
In that Bootstrap file:
componentDidUpdate(previousProps, previousState)
{
// Enable all tooltips.
TooltipHelper.enableTooltips([].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')));
}
And then TooltipHelper:
static enableTooltips(targets)
{
var enabledTooltips = targets.map(function (target) {
return new bootstrap.Tooltip(target, { trigger: 'hover' });
});
}
The tooltips work, but don't always go away. My guess is that when a tooltip is shown (because hovering over something) and then that element (or a parent of that element) gets changed, for example the content of it, the tooltip stays there. No matter if I click somewhere of hover over other elements.
I've tried adding a delay within the enableTooltips()-function. This seems to work, but the needed delay is too big. Also, it still breaks when elements are dynamically added and content is loaded, when the page isn't reloaded.
My hacky solution:
static enableTooltips(targets)
{
setTimeout(function() {
var enabledTooltips = targets.map(function (target) {
return new bootstrap.Tooltip(target, { trigger: 'hover' });
});
}, 5000);
}
Anyone know of a solution? Thanks
I have the following code which works exactly as I need for refreshing a page using a submit button.
However I have added code in it to make it scroll down to a specific location after updating, the problem is, it scrolls down to the location, then springs back to the top of the page
any ideas why anybody please?
$(".visitpage").on('click', function() {
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div><center><span style="font-size:22px;color:#000000;z-index:99999;"><b>Updating your results...</b></span></center></div>');
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
$('html, body').animate({
scrollTop: $("#search-results").offset().top
}, 2000);
});
function removeLoader() {
$("#loadingDiv").fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$("#loadingDiv").remove(); //makes page more lightweight
});
}
You will surely need the scrollTo method of the window object in javascript. Then I would figure out how far down your element is by getting a reference for that object in pixels on the page. See Retrieve the position (X,Y) of an HTML element for how to do that, since part of your answer would be a duplicate question I will let you read it. And this article is helpful http://javascript.info/coordinates
window.scrollTo(500, 0);
https://www.w3schools.com/jsref/met_win_scrollto.asp
Maybe I'm wrong here; but if you created a div where you want the page to scroll, or if you have on there make sure it's named, then right after the refresh command add
window.location.href = "#YOURDIVTAGHERE"; so
So if this is the part of the page you want it to go down to:
<div id="search-results">
CONTENT
</div>
so then your JS code, maybe try:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(".visitpage").on('click', function(){
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div><center><span style="font-size:22px;color:#000000;z-index:99999;"><b>Updating your results...</b></span></center></div>');
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( "#loadingDiv" ).fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$( "#loadingDiv" ).remove(); //makes page more lightweight
});
window.location.href = "#search-results";
}
Hi guys I'm using infiniteajaxscroll to load my photos on scroll down, the problem is the lightbox I'm using wont work on loaded pages.
My ininiteajaxscroll jquery
var ias = $.ias({
container :'.wrap', // main container where data goes to append
item:'.box-foto', // single items
pagination:'.paginacao', // page navigation
next:'.paginacao a', // next page selector
text: 'LOAD MORE PHOTOS'
});
ias.extension(new IASSpinnerExtension( ));
ias.extension(new IASTriggerExtension({offset: 10}));
This is my lightbox code: http://sachinchoolur.github.io/lightGallery/
function zoomPhotos(){
$("#list-photos-int").lightGallery({
thumbnail:true,
selector: '.box-thumb'
});
}
How can I use both components together on loaded pages?
Thanks.
You need to load lightgallery in a callback like this:
ias.on('rendered', function(items) {
$("#list-photos-int").lightGallery({
thumbnail:true,
selector: '.box-thumb'
});
});
I wonder how I get my Select2 dropdown working inside of a Bootstrap popover. I know the issue is that the popover content is loaded after the popover-event-click is initiated, so that the JS-code for the Select2 wont work. I just don't know how to fix it.
Example:
http://hammr.co/8234009/6/problems.html
Try pressing "submit" on the fourth problem named "Aaaah!" and you'll get the popover visible. Then try pressing the "Alabama"-dropdown (which is the Select2 dropdown) and it wont work (since the JS isn't initiated because the popover content is loaded after the DOM).
Anyone knows how to make it work?
yes possible
thanks to
bootstrap popover callback modification
/* override bootstrap popover to include callback */
var showPopover = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
showPopover.call(this);
if (this.options.showCallback) {
this.options.showCallback.call(this);
}
}
$(this).popover({
container:'#maincont',
placement:'right',
html : true,
title: function() {
return $('#'+pk).html();
},
content: function() {
return $('#'+pk).clone();
},
showCallback : function() {
$(".popover-content select").select2({
containerCss : {"display":"block"},
allowClear: true,
});
},
});
I am using Simple Modal and I have it working perfectly except for one thing.
I can't work out how to handle cases where the modal is already visible and another modal is called.
What I want is something like shadowbox where it will resize the box to the size of the new content.
Although if not possible I will settle with the box disappearing and the new one appearing.
How would I do this?
This is my current code
//show/hide animations
$.extend($.modal.defaults, {
onOpen: function (dialog) {
dialog.overlay.fadeIn('fast', function () {
dialog.data.show();
dialog.container.show('slide', {direction: 'down'}, 'medium');
});
},
onClose: function (dialog) {
dialog.container.hide('slide', {direction: 'up'}, 'medium', function () {
dialog.overlay.fadeOut('fast', function () {
$.modal.close();
});
});
}
});
//triggers
$('#subscribe_form').modal({
minWidth: 860,
minHeight: 390
});
//this link is both inside the subscribe_form modal, and on a menu bar
$('.login_link').live('click', function() {
$('#login_dialog').modal();
});
This doesn't seem like the greatest solution, but you could try:
http://jsfiddle.net/Xwn3G/
$('.login_link').live('click', function() {
setTimeout(function(){$('#login_dialog').modal();}, 1500);
$.modal.close();
});
From what I can tell, the call to the show the new modal has to follow the completion of the model close; or, it's canceling the events of the elements within the model html onClose. I was also able to get it to work with 1000 milliseconds, but that will probably depend on the user's browser.
You could do this doing a fake get call
$('.login_link').live('click', function() {
$.get('', function(){
$('#login_dialog').modal();
});
});
That way the modal function will be called on the callback and would work. I am not sure the reasons why this doesn't work without getting out of the current scope but at least works :)