Dynamically loaded Jquery dialog causes site to redirect user to login after upgrading to latest ver-CodePudding

We have a MVC application we recently upgraded jquery to version 3.6. Since we did that, all of our dynamically loaded dialog modals, no longer function correctly.

What we have as a dyanmically built table, each row has a link. Click on that link is supposed to open a jquery dialog which displays details about the row they clicked.

When a user clicks on a link that should load and open the dialog, instead the dialog starts to open and populate with data and then "suddenly" the user is redirected to the root URL of the site instead of staying on the page with the dialog open.

It's behaving as if something is hijacking the request pipeline or aborting the running java-script on the page.

Here are the elements in the html where link (in a dynamically built table) is created:

<tr  id="@item.ID">
    <td  data-label="Date" scope="row">
        <a href="#@item.ID">@item.CreateDate.ToShortDateString()</a>
    </td>

Here is the html for the jquery dialog modal:

<div  tabindex="-1" id="RefundDlg" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div >
        <div  id="RefundDlgHeader">
            <div  id="RefundBody">
            </div>
            <div >
                <button id="closeRefundDlg"  data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

Here is the script that loads the content into the body:

        $("#refunds tr[id]").each(function (index) {
            var id = this.id;

            $(this).children("td").children("a").click(function () {
                $("#refundMethod").val(id);
                var url = '@Url.Action("DetailsRefund", new { id = "-1" })';
                url = url.replace("-1", id);

                $("#RefundBody").load(url, null, function () {
                    $("#RefundDlgHeader").focus();
                    $("#RefundDlg").modal('show');
                });
            });
        });

I should note that the load command in the code above does return the correct data for the dialog and if I take that link and put it in a separate window, it does return the correct data on the page, just not in the modal, obviously.

basically our issue happens on this line:

$("#RefundBody").load(url, null, function ()

Running DEV tools in Chrome, you can see the requested data is returned, for a brief moment when running this I see the dialog with data, then I am suddenly redirected to index.

All this code above worked until we upgraded to the latest jquery. Any assistance or guidance someone can provide is much appreciated!

CodePudding user response：

Figured out a fix by way of a colleague who helped me out tremendously.

The problem is actually here:

<a href="#@item.ID">@item.CreateDate.ToShortDateString()</a>

For some reason the #@item.ID in the id of the anchor tag is causing jquery to redirect to index. Not really sure why this is the case or if there is a better way to solve the issue, but what we did is create a js file with the following script and then referenced it in our layout page:

$(document).ready(function () {
$("a").each((a, b) => {
    $(b).click(e => {
        if ($(b).attr("href")[0] == "#") {
            e.preventDefault();
        }
    })
});

});

Basically its preventing the default behavior on that anchor tag which apparently was to redirect, which is not what we wanted in this case. So we have it NOT do that if the anchor tag id has a # in it.