jQuery ajax post on asp.net mvc2 - javascript

I have a jQuery function that is called when the "submit" button is clicked:
function SubmitForm() {
var idList = [];
var list = $('#TableAdminPortfolio .CheckBoxProjects');
list.each(function () {
var id = $(this).closest('td').children('.hiddenId').val(); // parseInt()
idList.push(id);
});
$.ajax({
url: $(this).href,
type: 'POST',
data: idList,
success: function (result) {alert('Successful');},
error: function (result) {alert('Error');}
});
}
My controller looks like:
[Transaction]
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index(IEnumerable<int> projects)
{
...
}
The paramater (projects) is always null. I've stepped through my jQuery code inspecting it each step of the way and the idList is definitely populated. I've also tried my $ajax like this:
$.ajax({
url: $(this).href,
type: 'POST',
data: { projects : idList },
success: function (result) {alert('Successful');},
error: function (result) {alert('Error');}
});
And still the same results. Any ideas what is going on? And yes, I have a reason for doing an Ajax Post rather then a Form Post.
TIA
NOTE:
I am using jQuery v1.6.4 and ASP.NET MVC 2.0.

try converting your array to json using JSON.stringify
$.ajax({
url: $(this).href,
type: 'POST',
dataType: "json",
data: JSON.stringify(idList),
traditional: true,
success: function (result) {alert('Successful');},
error: function (result) {alert('Error');}
});

try:
var mylist='{"projects":'+ JSON.stringify(idList)+'}';
then
data:mylist,

Related

Ajax Request: Json Data Not Being Passed to Controller

I'm building a program that searches documents in ASP.NET Core. I'm passing the search data from a text box to the controller through an Ajax request but the controller isn't receiving the string.
I've tried changing how the ajaxData field is defined, adding quotations around 'search' and even turning the whole thing into a string but I can't get it to pass to the controller.
This is the code for the request:
ajaxData = {search: $("#textSearchBox").val()}
console.log(ajaxData);
$.ajax({
type: 'POST',
url: "#Url.Action("GetDocuments", "DocumentSearchApi")",
data: ajaxData,
dataType: "json",
contentType: "application/json; charset=utf-8",
error: function (e) {
//Error Function
},
success: function (jsonData) {
//Success Function
},
fail: function (data) {
//Fail Function
}
});
And this is the top of the Controller's GetDocuments function:
[Route("GetDocuments")]
public async Task<IActionResult> GetDocuments(string search)
{
No error messages anywhere. The Console shows an Object that contains 'search: "Test"' but when I hit the breakpoint in GetDocuments 'search' is null.
I think is more elegant way to use GET in this case then you should change your code to
var ajaxData = $("#textSearchBox").val();
url: "#Url.Action("GetDocuments", "DocumentSearchApi")"?search=ajaxData
and remove data: ajaxData
Because you want to get something from the search. Using the post is when you want to modify the data from API
you need use JSON.stringify() when sending data to a web server, the data has to be a string not a object
$.ajax({
type: 'POST',
url: "#Url.Action("GetDocuments", "DocumentSearchApi")",
data: JSON.stringify(ajaxData),
dataType: "json",
contentType: "application/json; charset=utf-8",
error: function (e) {
//Error Function
},
success: function (jsonData) {
//Success Function
},
fail: function (data) {
//Fail Function
}
});

ajaxStart does not work on Ajax Post

I have ajaxStart event that is working fine for ajax loads. But when I do a POST is not working at all.
Here the code that is always render per all pages.
$(document).ajaxComplete(function () {
hideIcon();
if (stepState !== '' && stepState !== CONSTANTS.DISABLED_FORM) {
enableElement();
}
});
$(document).ajaxStart(function () {
showIcon();
disableElement();
});
And here my post.
var sendRequest = function (url, data) {
$.ajaxPrefilter(function( options ) {
options.global = true;
});
$.ajax({
dataType: "json",
method: "POST",
url: url,
data: data,
success: function (data) {
applicationAlerts.showStatus(data);
loadDocumentGroup();
}
});
};
I follow this tickets here https://forum.jquery.com/topic/ajaxstart-is-not-working, but in my case does not work.
I´m using JQuery 1.11
Any suggestion?. Thanks!
I think you made mistake in ajax function.Try to change like this
$.ajax({
dataType: "json",
type: "POST",
.....
});
There is no Parameter like method in ajax Request.You need to use type parameter to specify the type of Request.(GET OR POST)
Hope it will works!. Thanks
If you are using jquery version 1.9 or later use:
method: "POST"
or
type: "POST"
if the version is below 1.9, only use:
type: "POST"
For your reference

Making a AJAX request with jquery and parsing JSON

EDIT- I have figured out that the request is working correctly but I don't know what to do with the data once it has been retrieved from the server. I don't know how to access the JSON, how do I do this?
I am trying to do a jQuery AJAX request and parse the JSON which is hopefully received. Here is my code:
search.onsubmit = function() {
$.getJSON("http://www.geocodefarm.com/api/forward/json/d4abb1b19adb13e42eac5a7beac6f4dbeb4b4ba4/" + searchBox.value, function(data) {
var rawJSON = $.parseJSON(data);
alert(rawJSON.COORDINATES.latitude);
});
alert("test");
}
I known that the getJSON function is not working because the test alert appears. Why does it not work?
You can do it like so:
sendAjax: function (url, dataObj) {
$.ajax({
url: url,
type: "POST",
data: JSON.stringify(dataObj),
contentType: "application/json; charset=utf-8",
timeout: 30000,
success: function (result) {
//do shit..
}
,
error: function (result) {
}
});
}

How to call json object from AJAX?

Here is my script:
$.ajax({
type: "Get",
url: "Sample.js",
datatype: 'json',
data: JSON.stringify({ key:key }),
success: function (data) {
var sample = data.name;
$("#html").html(sample);
},
error: function () {
alert("Error");
}
});
This is my Sample.js file:
{ "name": "user" }
When I run this code I get a blank screen. This is my script using getJSON():
$.getJSON("Sample.js", function (data) {
var sample = data.name;
$("#html").html(sample);
})
This produces "user" perfectly. What is the problem with $.ajax code?
In the getJSON version your don't send any data. Could this be the reason why that works? To me it looks like this could be sth. on the server side that delivers an empty JSON object when you pass the key parameter.
As the jQuery documentation states:
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});
Try modifying the dataType param.
change your datatype to dataType. Its case sensitive. Refer http://api.jquery.com/jQuery.getJSON/
Remove JSON.Stringify and change Get to GET
$.ajax(
{ type: "GET",
url: "Sample.js",
dataType: "json",
data: {key:key },
success: function (data)
{ var sample = data.name; $("#html").html(sample); },
error: function () { alert("Error"); }}
);

Call another method onSuccess event of an Ajax call

I have an AJAX call on MVC3 it looks like this
save: function () {
$.ajax({
url: "#Url.Action("Save")",
type:"post",
data: ko.toJSON(this),
contentType:"application/json",
success: function(result){alert(result.message)}
});
}
The trouble is the line
success: function(result){alert(result.message)}
I want to pass all the messing things in a HtmlHelper, however, the success line prevents me from doing so, is there a way I can specify a function for that line
success: doSomeStuff(result)
and
function doSomeStuff(result){alert(result.message)}
Thanks in advance
Simply pass the function name to the success: method and it will pass the data onwards, as such:
save: function () {
$.ajax({
url: "#Url.Action("Save")",
type:"post",
data: ko.toJSON(this),
contentType:"application/json",
success: doSomeStuff
});
}

Categories