在ScriptManager.RegisterStartupScript之后的代码中调用脚本后，jQuery document.ready不会触发

Question

I have a filtered list of items using https://mixitup.kunkalabs.com/

see screen for example

The user then selects to add another action - this uses fancybox as a popup and shows the user the next image:

Once the user has added the data, the pages does a partial post back using an update panel. the code then calls a js function from the code behind to close the popup and then call the mixitup function to reinitialize the list as it now has a new item in it, but it doesn't work.

Here's the code behind that calls the js

ScriptManager.RegisterStartupScript(Me, [GetType](), "Load", "ReloadData();", True)

and here is the js that will be called:

function ReloadData() {
    parent.jQuery.fancybox.close();
    $(document).ready(function () {
        $('#Container').mixItUp({layout: {display: 'block'}});
    });
}

The fancybox closes but the mixitup never gets fired as it it never passes the docment.ready test meaning its not loaded so cant run the jQuery, but I am unsure why?

Answer 1

$(document).ready() fires after the document is finished rendering. So, if you already rendered your page and are now interacting with it, that ready statement no longer has any relevance, until you reload the page. So, don't put that inside a function.

Just call your mixItUp code inside the function block.

function ReloadData() {
    parent.jQuery.fancybox.close();
    $('#Container').mixItUp({layout: {display: 'block'}});
}

As a suggestion: if you're already using jQuery, don't bother with update panels. Just do your ajax calls through $.ajax .

Answer 2

You should place the following code outside the ReloadData() function.

$(document).ready(function () {
        $('#Container').mixItUp({layout: {display: 'block'}});
    });

document ready function should always be kept at the top level. Also please check if there is any JS error while loading page.