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?
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');
}
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.
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