Redirecting on successfull AJAX call does not work

Question

I have this AJAX call:

$.ajax({
    type: "post",
    dataType: "json",
    data: { "json": JSON.stringify(json) },
    url: hostUrl,
    success: function (data) {
        if (data.status) {
            window.location.href = data.redirect;
        }
        else {
            alert(data.message);
        }
    },
    error: function (err) {
        console.log(err);
    }
});

data.redirect contains URL, which user should be redirected to, but unfortunately, it does nothing.

Can anybody tell me what is the issue?

I tried to redirect to other ASP controllers, or even www.google.com, but nothing works.

This is JSON response:

{"status":true,"message":"successful authentication","redirect":"/Users"}

I am working with ASP.NET Core, I set breakpoint in Users controller, to which I am redirecting. It was hit just once. After that one redirect, it stops to redirect to that page. But even if breakpoint was hit, it didn't redirect to returned view.

It's like just getting refreshed

EDIT:

HTML, which appeared to be important:

<form method="post">
    Login: 
    <input name="loginName" type="text" /> <br/>
    Password: 
    <input name="passwordInput" type="password" /><br/>    
    <button id="authBtn" onclick="handleLogin()" value="Get message"></button>
</form>

Using the debugger built into your browser, set a breakpoint on the `if (data.status)` line and another one on the `console.log(err)` line. Then do whatever it is that triggers the ajax. One of those breakpoints will be hit and stop execution of the code. If it's the one on `if (data.status)`, hover your mouse over `status` and the browser will show you its value. It would appear that whatever that value is, it's falsy (so it's `0`, or `""`, or `false`, etc.). — T.J. Crowder, Feb 01 '20 at 16:22
Maybe something else is happening, but the code you posted works for me with the response you shared (ie it redirects to the specified URL). — haldo, Feb 01 '20 at 16:32
@haldo - No, you don't. Relative URLs will get expanded as normal. — T.J. Crowder, Feb 01 '20 at 16:34
Okay, so if it's `true` and you step foward, do you see the assignment to `href`? What value is being assigned? Etc., etc. We can't solve this for you, it's a debugging problem. — T.J. Crowder, Feb 01 '20 at 16:35
Try using `assign()` instead:`window.location.assign(data.redirect);` — Rahul Sharma, Feb 01 '20 at 19:08

score 0 · Accepted Answer · answered Feb 01 '20 at 19:40

This ajax call was placed in form element in HTML, which was sending HTML request as well.

When AJAX call and redirect was handled, it came back to original HTTP request amde by form element and returned to original page, thus it looked like it was refreshing.

score 0 · Answer 2 · answered Feb 01 '20 at 20:03

0

Suppress the form submission. Change button type from submit to button

<button type="button" id="authBtn" onclick="handleLogin()" value="Get message"></button>

answered Feb 01 '20 at 20:03

Beingnin

2,288
1
21
37

You mention it or not, a button inside a form tag will be a submit type by default. You need to explicitly change it to type button if you need to avoid the submit behaviour – Beingnin Feb 01 '20 at 20:31
Check vicky gonsalves answer in here https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit – Beingnin Feb 01 '20 at 20:35

Redirecting on successfull AJAX call does not work

2 Answers2