on my Wordpress site I add a button that when clicked calls a modal to open via ajax. When I click the button once on a fresh reload of the page it seems to work fine without any hiccups. If I close that modal then and click the button to open it again, without refreshing the page it will open, but flicker once and then stay opened. If I close it again and open it back up it flickers 3-4 times before staying open. And this continues with more flickers the more I click the button.
jQuery(document).ready(function ($) {
// LAUNCH CALCULATOR/QUIZ MODAL
function qdLoadModal(){
var options = {
modal: true,
height:300,
width:500
};
$('#qdModalWindow').load('/wp-content/themes/gift/qdCalcModal.php');
$('#qdModal').addClass('open');
$('#qdModal').animate({
opacity: 1.0,
}, 250, function() {
// Animation complete.
//qdQuestionHeight();
});
}
//Launch Quiz Modal
$('.calcLaunch').click(function( event ) {
event.preventDefault();
qdLoadModal();
});
});
That is the jQuery I am using to load in the modal file on button click. I can't figure out why the modal does the flickering thing when opened multiple times without reloading the page. If more information about my code is needed I can supply it, but really not sure what to do to fix it after a few hours of trying to troubleshoot it.
EDIT: I actually found a fix for this. I changed the click function to:
$('.calcLaunch').one("click", function( event ){
event.preventDefault();
qdLoadModal();
});
Changing the function to this then only runs it once on click removing the flicker.
on my Wordpress site I add a button that when clicked calls a modal to open via ajax. When I click the button once on a fresh reload of the page it seems to work fine without any hiccups. If I close that modal then and click the button to open it again, without refreshing the page it will open, but flicker once and then stay opened. If I close it again and open it back up it flickers 3-4 times before staying open. And this continues with more flickers the more I click the button.
jQuery(document).ready(function ($) {
// LAUNCH CALCULATOR/QUIZ MODAL
function qdLoadModal(){
var options = {
modal: true,
height:300,
width:500
};
$('#qdModalWindow').load('/wp-content/themes/gift/qdCalcModal.php');
$('#qdModal').addClass('open');
$('#qdModal').animate({
opacity: 1.0,
}, 250, function() {
// Animation complete.
//qdQuestionHeight();
});
}
//Launch Quiz Modal
$('.calcLaunch').click(function( event ) {
event.preventDefault();
qdLoadModal();
});
});
That is the jQuery I am using to load in the modal file on button click. I can't figure out why the modal does the flickering thing when opened multiple times without reloading the page. If more information about my code is needed I can supply it, but really not sure what to do to fix it after a few hours of trying to troubleshoot it.
EDIT: I actually found a fix for this. I changed the click function to:
$('.calcLaunch').one("click", function( event ){
event.preventDefault();
qdLoadModal();
});
Changing the function to this then only runs it once on click removing the flicker.
Share Improve this question edited Jul 30, 2018 at 14:53 Logan C asked Jul 30, 2018 at 14:26 Logan CLogan C 291 silver badge4 bronze badges 2- WordPress is sort of incidental here. This is mostly a pure JavaScript question. You'll probably have more luck asking at stackoverflow – Jacob Peattie Commented Jul 30, 2018 at 14:39
- even i am facing the same issue , but the above mentioned solution did not work for me, is there any other way to resolve this? – user192284 Commented Jul 27, 2020 at 9:10
1 Answer
Reset to default 1Try removing children inside #qdModalWindow
before attempting load new content inside it.
$('#qdModalWindow').children().remove();