CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
Zet
Zet

Reputation: 571

Ajax call is failing

I'm trying to create a jquery/ajax script. The purpose is to take data from a database, compare results in the successFunc and do the next ajax call to a mvc actionResult which would render a view according to the result. For some reason it is not working.

function GetPageData() {
$.ajax({
    type: "Post",
    url: '/Track/GetPageData',
    dataType: "json",
    data: param = "",
    success: successFunc,
    error: errorFunc
});
function successFunc(data, status) {
    alert('data; '+data+', '+'status: '+status);
    if (data == 'contact') {
        $.ajax({
            type: "Post",
            url: '/Track/Contact',
            dataType: 'json',
            success: successF,
            error: errorF
        });
        function successF() {
            alert('services')
        }
        function errorF() {
            alert('servicesFail')
        }
    }

One of ActionResults methods:

public ActionResult Contact()
    {
        return View();
    }

During debugging I can see that call is made to ActionResult Contact() but it does not render the view. Any idea why the code is not working?

Upvotes: 0

Views: 113

Answers (3)

Zet
Zet

Reputation: 571

At the end I used a solution which works for me:

function GetPageData() {
$.ajax({
    type: "Post",
    url: '/Track/GetPageData',
    dataType: "json",
    data: param = "",
    success: successFunc,
    error: errorFunc
});
function successFunc(data, status) {
    alert('data; '+data+', '+'status: '+status);
    if (data == 'services') {
        window.location = "/Track/Services";
    }
    else if (data == 'contact') {
        window.location = "/Track/Contact";
    }
    else{
        window.location = "/Track/About";
    }   
}

Thank you for your help

Upvotes: 0

Percy
Percy

Reputation: 3125

Your ajax call to get the view should follow the pattern below, this is one I use for a password reset:

$.ajax({
        url: '@Url.Action("ActionName","ControllerName")',
        cache: false,
        data: { userId: userId, newPassword: password },
        type: 'GET',
        success: function (data) {                        
            $('#unlockResult').html(data);
        },
    });

The Action looks like this and returns a PartialView:

public async Task<ActionResult> UnlockUserAccount(string userId, string newPassword)
    { 
    //other stuff here
    return PartialView("_AjaxResponse");
}

The data parameter in the success part of the ajax call is the html for the PartialView, this is then injected into the div I have in the page:

<div id="unlockResult"></div>

In my scenario, the PartialView returns a bit of success/fail HTML that is added to the existing page. As said in the comments, if you're trying to load a completely new page then you don't want to be using ajax.

Upvotes: 1

Nadeem Shaikh
Nadeem Shaikh

Reputation: 362

You have not ended GetPageData function after first ajax call. Write it down as below and check - 

function GetPageData() {
    debugger;
    $.ajax({
        type: "Post",
        url: '/Track/GetPageData',
        dataType: "json",
        data: param = "",
        success: successFunc,
        error: errorFunc
    });
}
    function successFunc(data, status) {
            $.ajax({
                type: "Post",
                url: '/Track/Contact',
                dataType: 'json',
                success: successF,
                error: errorF
            });

    }
    function successF() {
        alert('services');
    }
    function errorF() {
        alert('servicesFail');
    }
    function errorFunc() {
        alert('servicesFail');
    }

Upvotes: 0

Related Questions