JavaScript Using jquery.blockUI.js

[LiliGoncalves]

Good morning,
I use javascript a few times and when I use it, it's almost always for the same.
But this time I need to block the page while the event (which takes a long time) takes place.
In the searches I found jquery.blockUI, I identify it in the HTML as "selectVersionId"

@Html.DropDownListFor(m => m.VersionId, this.Model.versions, new { @class = "form-control", @Id = "selectVersionId" })

and then in the treatment

    $(document).ajaxStop($.unblockUI);

    $('#selectVersionId').change(function () {
            $.blockUI({ message: '<h1><img src="../assets/img/loading_icon.gif" /> Just a moment...</h1>' });
            test();   
    });

    function test() {
        /* Get the selected value of dropdownlist */
        var StrDock = $('#IdDock').val();
        var selectedID = $(this).val();

        if (selectedID && selectedID != '') {
            $.ajax({
                url: 'GetDonglesByVersionId',
                type: 'GET',
                cache: false,
                data: { versionId: selectedID, dockSearch: StrDock },
                }).done(function (result) {
                    $('body').html(result);
            });
        }
        $("#selectVersionId").trigger("change");
    }

The blocking happens but doesn't go to function "url: 'GetVersionId'" and stalls at blockUI!!

What am I doing wrong?

Thanks

 

[Antero360]

Good morning,
I use javascript a few times and when I use it, it's almost always for the same.
But this time I need to block the page while the event (which takes a long time) takes place.
In the searches I found jquery.blockUI, I identify it in the HTML as "selectVersionId"

@Html.DropDownListFor(m => m.VersionId, this.Model.versions, new { @class = "form-control", @Id = "selectVersionId" })

and then in the treatment

    $(document).ajaxStop($.unblockUI);

    $('#selectVersionId').change(function () {
            $.blockUI({ message: '<h1><img src="../assets/img/loading_icon.gif" /> Just a moment...</h1>' });
            test();  
    });

    function test() {
        /* Get the selected value of dropdownlist */
        var StrDock = $('#IdDock').val();
        var selectedID = $(this).val();

        if (selectedID && selectedID != '') {
            $.ajax({
                url: 'GetDonglesByVersionId',
                type: 'GET',
                cache: false,
                data: { versionId: selectedID, dockSearch: StrDock },
                }).done(function (result) {
                    $('body').html(result);
            });
        }
        $("#selectVersionId").trigger("change");
    }

The blocking happens but doesn't go to function "url: 'GetVersionId'" and stalls at blockUI!!

What am I doing wrong?

Thanks

HI there, do you get any error messages in console?

 

[LiliGoncalves]

HI there, do you get any error messages in console?

Hi.

It pretty much stays here, like a loop.

I checked in the console and it gives this: "InternalError: too much recursion."

 

[Antero360]

Hi.

It pretty much stays here, like a loop.

I checked in the console and it gives this: "InternalError: too much recursion."

View attachment 2023

Might wanna check your code lol. According to that error message, seems like you may have yourself a good ol' "infinite loop" issue

 

[Antero360]

Hi.

It pretty much stays here, like a loop.

I checked in the console and it gives this: "InternalError: too much recursion."

View attachment 2023

If I had to place a bet... Would place it here


Do me a big favor: just for the shits and the giggles, comment out call to test() and that blockUI stuff.. and just add a simple call to console to log,
console.log('To infinity and beyond');

 

[Deleted member 2829]

The change trigger of #selectVersionId calls function test() which then, on its last line, calls the change trigger again. And nowhere a condition that might put a stop to this recursion. So yes, the JS engine eventually throws in the towel.