Ajax go to page of url

Question

I have an ajax call like so:

$("#Navbar-Search-Button").click(function (e) {
    SendToController();
    return false;
});

function SendToController() {
    var regNumber = $("#IDValue").val().trim();
    $.ajax({
        url: '/ControllerName/ActionName',
        data: { 'argument': regNumber },
        type: 'GET',
        cache: false,
        success:function(data) {
            $("body").html(data);
            $(".dropdown-toggle").dropdown();
            document.location = url.val();   // tried this doesn't work
        },
        error: function () {
            $("#Dialog").dialog('open');   
        }
    });
}

Now I know ajax updates without a page refresh, but on success I would like the page to be the url parameter, and not the page that I called the ajax function on

Any help is appreciated.

`window.location.replace(url)` http://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-page-in-jquery — Patrick Murphy, Jan 13 '17 at 18:58
Hi if you are using MVC then you can call Url.Action method which have action and control name and it will redirect . — Yashveer Singh, Jan 13 '17 at 18:59
@PatrickMurphy I just tried that, and when I hit the submit button on page `http://localhost:57878/Controller1/Index`, i was shown the page I desire, but the url was still `http://localhost:57878/Controller1/Index` — Grizzly, Jan 13 '17 at 19:00
@PatrickMurphy [`url`](http://api.jquery.com/jQuery.ajax/) is a string containing the URL to which the request is sent.. but I also need the page to go to that url — Grizzly, Jan 13 '17 at 19:02
Do you actually want to navigate to a new page? Or just change the address bar? — epascarello, Jan 13 '17 at 19:06
oh dear someone closed the question so no points for me ...... Any way I can get point for this ? — Yashveer Singh, Jan 13 '17 at 19:10

Rion Williams · Accepted Answer · 2017-01-13T19:16:17.563

3

Current, it looks like you are making an AJAX request and then immediately reloading the page, which will cause your newly loaded content to disappear, which is worth noting. If you don't want this to occur, simply just update the content and don't navigate away.

Regarding Navigating

Set the window.location.href attribute to handle this within your success block :

success:function(data) {
        $("body").html(data);
        $(".dropdown-toggle").dropdown();
        // This will navigate to your preferred location
        window.location.href = url;   
},

Updating the URL without Navigating

If you wanted to update the content within the URL without actually navigating away, you could consider using an approach that relied on updating the history as opposed to navigating away using something like this via the history.pushState() function :

success:function(data) {
        $("body").html(data);
        $(".dropdown-toggle").dropdown();
        // This will navigate to your preferred location
        history.pushState({},"Your Title,url);
},

Regarding Using an MVC URL Directly

At present, you currently have your URL hard-coded to a given location, which can work in some scenarios, however it can make your code frail if any changes occur.

A recommendation would be to store the proper URL (resolved from MVC) in a data attribute and then use it when performing your navigation as seen below :

<!-- HTML -->
<input id="Navbar-Search-Button" type="submit" class="btn btn-default" value="Search" data-url="@Url.Action("Action","Controller")" />

<!-- Javascript -->
$("#Navbar-Search-Button").click(function (e) {
    // Resolve your URL here
    let url = $(this).data('url');
    SendToController(url);
    return false;
});

function SendToController(url) {
    var regNumber = $("#IDValue").val().trim();
    $.ajax({
        url: url,
        data: { 'argument': regNumber },
        type: 'GET',
        cache: false,
        success:function(data) {
            $("body").html(data);
            $(".dropdown-toggle").dropdown();
            document.location = url;
        },
        error: function () {
            $("#Dialog").dialog('open');   
        }
    });
}

edited Jan 13 '17 at 19:16

answered Jan 13 '17 at 19:04

Rion Williams

74,820
37
200
327

I have tried this, and when I hit the button to call the ajax function, the address in the url bar does not change, but the page does.. – Grizzly Jan 13 '17 at 19:05
Try using the `history.pushState()` approach that I mentioned within the second half of the post, which should change the actual URL bar without explicitly navigating away. – Rion Williams Jan 13 '17 at 19:07
Yashveer answer worked for me: `success:function(data) { $("body").html(data); $(".dropdown-toggle").dropdown(); @Url.Action("ActionName", "ControllerName") },` – Grizzly Jan 13 '17 at 19:10
It's worth noting that you shouldn't include your Razor code within your Javascript directly if you plan on possibly ever including it within its own file. Consider setting the URL as a data attribute on your HTML element and read it (i.e. passing in the URL to your function). It's going to be a bit of a cleaner approach. – Rion Williams Jan 13 '17 at 19:11
Can you post an example in this comment thread of the html element? like this? `` – Grizzly Jan 13 '17 at 19:13
how do you write `@Url.Action("ActionName", "ControllerName")` in js? Because that actually changed the url on success callback – Grizzly Jan 13 '17 at 19:16
I've added an example to help demonstrate that concept. – Rion Williams Jan 13 '17 at 19:16
I get a red squiggly under `let` because my current language level is ECMAScript 5 – Grizzly Jan 13 '17 at 19:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133109/discussion-between-bville-kid-and-rion-williams). – Grizzly Jan 13 '17 at 19:22

Ajax go to page of url

1 Answers1