jquery - Ajax Modal Flickers When Opened Multiple Times

admin管理员组

文章数量:1332628

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.

• ajax
• jquery
• javascript

Share Improve this question edited Jul 30, 2018 at 14:53 Logan C asked Jul 30, 2018 at 14:26 Logan CLogan C 2911 silver badge44 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Try removing children inside #qdModalWindow before attempting load new content inside it.

  $('#qdModalWindow').children().remove();

本文标签： jqueryAjax Modal Flickers When Opened Multiple Times