how to avoid redirection in a javascript function

Question

I have a function name HideN which triggers when user click on a link like shown below

<a href="<?php echo $dn5['link']; ?>" onclick="HideN('<?php echo $dn5['id'];?>','<?php echo $dn5['from_user'];?>')" class="media">

this gives me

<a href="/page/example" onclick="HideN('25','username')" class="media">

Now i want to send an ajax request onclick, then redirect the user to /page/example but it always abort the ajax request and redirect the page

function HideN(t, a) {
    var e = {
        id: t,
        user: a
    };
    $.ajax({
        type: "POST",
        url: "https://www.example.com/ajax/hideN?status=hideIt",
        data: e,
        success: function(t) {}
    })
};

How can i first send an ajax request then redirect the page after success response

the link is dynamically generated from database, every link will be different

Why not just submit a regular form, if all you want to do is redirect anyway — adeneo, May 25 '16 at 19:26

Avijit · Answer 1 · 2016-05-25T19:42:24.067

You need prevent the default click by event.preventDefault() and redirect on ajax success

<a href="" onclick="HideN(event, '<?php echo $dn5['id'];?>','<?php echo $dn5['from_user'];?>', '<?php echo $dn5['link'];?>')" class="media">

        function HideN(ev,t, a, lk) {
            ev.preventDefault();
            var e = {
                id: t,
                user: a
            };
            $.ajax({
                type: "POST",
                url: "https://www.example.com/ajax/hideN?status=hideIt",
                data: e,
                success: function(t) {
                window.location.href = lk;
}
            })
        };

score 0 · Answer 2 · answered May 25 '16 at 19:33

I think i found myself

<a href="javascript:void(0);" onclick="HideN('<?php echo $dn5['id'];?>','<?php echo $dn5['from_user'];?>','<?php echo $dn5['link'];?>')" class="media">

which gives me

<a href="javascript:void(0);" onclick="HideN('25','username','/page/link')" class="media">

function HideN(t, a, c) {
    var e = {
        id: t,
        user: a
    };
    $.ajax({
        type: "POST",
        url: "https://www.example.com/ajax/hideN?status=hideIt",
        data: e,
        success: function(t) {
            window.location.href = c;
        }
    })
};

score 0 · Answer 3 · edited May 23 '17 at 12:15

Rather than putting the link in the anchor tag like:

<a href="/page/example" onclick="HideN('25','username')" class="media">

you can put href="javascript:void(0);" so that the link won't actually try to change the page:

<a href="javascript:void(0);" onclick="HideN('25','username')" class="media">

Now your ajax call will complete, and you can redirect inside the success function.

success: function(t) {
    window.location.href = "<?php echo $dn5['link']; ?>";
}

If the javascript is in a separate .js file that you can't change through PHP, you can change the link to:

<a href="javascript:void(0);" onclick="HideN('<?php echo $dn5['id'];?>','<?php echo $dn5['from_user'];?>','<?php echo $dn5['link']; ?>')" class="media">

and change the javascript to:

function HideN(t, a, link) {
    var e = {
        id: t,
        user: a
    };
    $.ajax({
        type: "POST",
        url: "https://www.example.com/ajax/hideN?status=hideIt",
        data: e,
        success: function(t) {
            window.location.href = link;
        }
    })
};

Now the link will be passed as a parameter to the HideN function, and can be used to redirect inside the success function.

Another option for the link, as suggested in a comment on the question Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"? is to use the HideN function as the href value:

<a href="javascript:HideN('<?php echo $dn5['id'];?>','<?php echo $dn5['from_user'];?>','<?php echo $dn5['link']; ?>')" class="media">

Edit: Changed to href="javascript:void(0);" instead of href="#" after comments and further research suggest that it is better.

@Mohammad Do you always have to do that when preventing a link from going somewhere, or does using `javascript:void(0);` remove that need? — jonhopkins, May 25 '16 at 19:39
@Mohammad I didn't have it anywhere. I was asking if using it would make it so I don't have to use `preventDefault()` — jonhopkins, May 25 '16 at 19:44

Razvan Dumitru · Answer 4 · 2016-05-25T19:36:55.827

-1

If you want to redirect the user only if the ajax is successful then place the redirect window.location.href = 'your redirect page' in the success callback.

Otherwise if you need to redirect either is successful or not, use complete callback.

   function HideN(t, a) {
        var e = {
            id: t,
            user: a
        };
        $.ajax({
            type: "POST",
            url: "https://www.example.com/ajax/hideN?status=hideIt",
            data: e,
            success: function(response) { window.location.href = "http://google.com"}
        })
    };

Later edit @codenoire : you should change the href attribute to "javascript: void(0)" or you can use preventDefault

edited May 25 '16 at 19:36

answered May 25 '16 at 19:25

Razvan Dumitru

11,815
5
34
54

the link is dynamically generated from database, every link will be different – May 25 '16 at 19:27
Then you must return that link to client side. – Razvan Dumitru May 25 '16 at 19:31
When you will hit an endpoint with this ajax request probably you are able to compute the link that is dynamically generated. So what you need to do is to return that link in response object and that object will be available in your ajax success callback – Razvan Dumitru May 25 '16 at 19:33
1

This is a good example. BUT you should change the href attribute to "javascript: void(0)" because you don't want the browser to actually go to the value specified in the href attribute. – Xavier J May 25 '16 at 19:34

score -1 · Answer 5 · answered May 25 '16 at 19:37

<a href="<?php echo $dn5['link']; ?>" onclick="HideN('<?php echo $dn5['id'];?>','<?php echo $dn5['from_user'];?>', '<?php echo $dn5['link']; ?>')" class="media">

Then have this function:

function HideN(t, am, link) {
    var e = {
        id: t,
        user: a
    };
    $.ajax({
        type: "POST",
        url: "https://www.example.com/ajax/hideN?status=hideIt",
        data: e,
        success: function(t) {
            window.location = link;
        }
    })
    return false;
};

Syed Ekram Uddin · Answer 6 · 2016-05-25T19:38:59.977

-2

add

return false;

to your HideN function last line. or

use

preventDefault

to stop click event default behavior

https://api.jquery.com/event.preventdefault/

edited May 25 '16 at 19:38

answered May 25 '16 at 19:29

Syed Ekram Uddin

2,907
2
29
33

1

That won't help. You have to return false from the event handler function. Not some callback that might be executed at some point in the future. – Quentin May 25 '16 at 19:30
sorry you need to use it in HideN function. you need to stop click function default behavior to prevent redirection – Syed Ekram Uddin May 25 '16 at 19:33
Much simpler to use something like `href="javascript:;"` then – vp_arth May 25 '16 at 19:34
yes good solution indeed, i just point out the redirection reason, – Syed Ekram Uddin May 25 '16 at 19:34
No, it needs to go in the onclick function, not the HideN function – Quentin May 25 '16 at 19:46
@vp_arth — That violates [a basic principle](https://en.wikipedia.org/wiki/Unobtrusive_JavaScript) of good design. – Quentin May 25 '16 at 19:46
Yes inline JS, even CSS sometime confusing and not clean design approach. – Syed Ekram Uddin May 25 '16 at 20:18

how to avoid redirection in a javascript function

6 Answers6