Syntax Error: Unexpected end of input - javascript

I suspect that I have a missing bracket but I can't find one if there is
$(document).ready(function () {
$("#additional_info_submit").click(function (e) {
e.preventDefault();
jQuery.ajax({
type: "POST",
url: "advice_response.php",
//contentType: "text/json; charset=utf-8",
dataType: "json",
data: $('#form').serialize(),
success: function (response) {
alert('yay');
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
}
});
});
});

The json_encode on the advice_response.php was missing a semi colon at the end.

I had the same problem for "PUT" method but I'm using Web Api server side so I had to change in my Web Api Controller Put Method from this :
return Request.CreateResponse(HttpStatusCode.OK);
to this:
return Request.CreateResponse(HttpStatusCode.OK, MyUpdatedObject);

Related

how to dynamically generate JSon object?

I was trying to send/receive JSon between client and server.
I generated JSon (I thought) by a function
self.gen_data=function()
{ //create request data
var input_array =self.input_value();
myJson={
request_type:1, //send request for problem 1
data_list:{}
};
for(var k=0;k<input_array.length;k++)
{
myJson.data_list[k]=input_array[k]; //a number in array
}
console.log(myJson);
return myJson;
}
can't read it on server
$.ajax({
type: "POST",
url: self.serverURI,
data: JSON.stringify(self.gen_data()),
dataType: 'json',
success: function (result)
{
//console.log(result);
alert(JSON.stringify(result));
//alert(result.a);
},
error: function (xhr, ajaxOptions, thrownError)
{
console.log(xhr);
}
});
on server
var data=req.body;
console.log("request_type: ",req.body.request_type);
console.log("data_list size: ",data.data_list.length);
/*
for(var i=0;i<data.data_list.length;i++)
{
console.log(data.data_list[k]);
}
*/
but it displayed as:
data_list size: undefined
try to read array elements caused error.
JSON.stringify() returns a JSON string, but it seems you want the JSON object.
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
Try without JSON.stringify:
$.ajax({
type: "POST",
url: self.serverURI,
data: self.gen_data(),
dataType: 'json',
success: function (result)
{
//console.log(result);
alert(JSON.stringify(result));
//alert(result.a);
},
error: function (xhr, ajaxOptions, thrownError)
{
console.log(xhr);
}
});

Ajax call no error but does not work

Here my Ajax Call and it does not produce any error but it does not call the php file (I can see it in the network tab of my chrome, and when I call it in the javascript console, it's does return false as expected :
function submitData() {
$('#sortable2').sortable({
axis: 'y',
update: function(event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: './post_occupation_data.php'
});
}
});
return false;
}
Thank you
Try this code and and check the if you are getting alert messages are not.. if 404 alert message please check your URL
function submitData() {
$('#sortable2').sortable({
axis: 'y',
update: function(event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: './post_occupation_data.php',
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
},
success: function(result){
alert(result);
}
});
}
});
return false;
}
try to stringify the parameter like below
data: JSON.stringify(data)
Also add below parameters in your ajax call
contentType: "application/json; charset=utf-8",
dataType: "json",

jQuery Ajax Error object is undefined

I hvae a webmethod called using jquery ajax. I hits the error callback. Fine - I thought I will analyze the error - but it is coming as undefined.
What are the possibilities for the error values to be undefined? How to fix this, if it is a trivial error?
Note: xhr,status and error are undefined.
Note: I am using Chrome version 35 and IE 8
CODE
$(document).ready(function () {
function errorFunction(xhr, status, error) {
console.log(xhr);
if (xhr == 'undefined' || xhr == undefined) {
alert('undefined');
} else {
alert('object is there');
}
alert(status);
alert(error);
}
$.ajax({
type: "POST",
url: "admPlantParametersViewEdit.aspx/GetResult",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert("success");
alert(msg.d);
},
error: errorFunction()
});
});
You need to pass a reference to the function so change this:
error: errorFunction()
to this:
error: errorFunction
When you put the parens there, you were actually calling the function immediately and passing it's return. Without the parens, it is just a reference to the function that can be called later by the jQuery ajax infrastructure.
To further understand what was happening, your code error: errorFunction() was calling errorFunction() immediately with no arguments (which is what you were seeing in your debugging) and then fetching the return value from that function (which is undefined) and then putting that into your data structure which was passed to the ajax call. So essentially, you were doing the equivalent of this:
$(document).ready(function () {
function errorFunction(xhr, status, error) {
console.log(xhr);
if (xhr == 'undefined' || xhr == undefined) {
alert('undefined');
} else {
alert('object is there');
}
alert(status);
alert(error);
}
// obviously, not what you intended
errorFunction();
$.ajax({
type: "POST",
url: "admPlantParametersViewEdit.aspx/GetResult",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert("success");
alert(msg.d);
},
// also not what you intended
error: undefined
});
});
If you aren't using errorFunction() in other places, then a more common way to do this is to define it inline like you did with the success handler like this:
$(document).ready(function () {
$.ajax({
type: "POST",
url: "admPlantParametersViewEdit.aspx/GetResult",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert("success");
alert(msg.d);
},
error: function(xhr, status, error) {
console.log(xhr);
if (xhr == 'undefined' || xhr == undefined) {
alert('undefined');
} else {
alert('object is there');
}
alert(status);
alert(error);
}
});
});

Visual Studio not recognizing javascript function because of Html.Action

When I put an #Url.Action inside a javascript function, Visual Studio will not recognize that function. There will be not collapse/expand option.
function exeAjax(id, destination) {
$("#contents").show();
destination.html("loading...");
$.ajax({
cache: false,
type: "GET",
url: '#Url.Action("MyAction")',
data: { "id": id },
success: function (data) {
destination.html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert('failed');
}
});
}
The line will be recognizable if I change from:
url: '#Url.Action("MyAction")'
To:
url: 'MyAction'
Edit:
There's no error and the code runs exactly as expected.
It's just the function region is not recognized by the IDE.
Firstly you should not add any Razor code in Javascript/ Jquery. Because you will ideally like to have all the Javascript/ Jquery in a .js file, and # will try to invoke a razor code. for your issue you can do
$.ajax({
cache: false,
type: "GET",
url: '../MyAction', // path to your action
data: { "id": id },
success: function (data) {
destination.html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert('failed');
}
});
Hope it works, happy coding

jQuery: Calling a function from AJAX request

I'm trying to call a function when I get success from my ajax call, but it's not working. This is what I've tryed so far.
function dtMRPReasonCode(dt) {
var data = null;
jQuery.ajax({
type: "POST",
data: {},
url: "Index.aspx/getMRPReasonCodeReport",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
if (msg.d) {
console.log(dt);
console.log(msg.d);
buildTableBody(dt, msg.d);
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert("Error: dtMRPReasonCode");
}
});
return false;
}
function buildTableBody(dt, obj) {
dt.fnClearTable();
data = [];
$(obj).each(function(index, value) {
element = [];
element.push(value.Metric);
element.push(value.Region);
element.push(value.Plant);
element.push(value.Customer);
element.push(value.IMAC);
element.push(value.NotFilled);
element.push(value.Filled);
element.push(value.Total);
data.push(element);
});
dt.fnAddData(data);
}
Thanks in advance!
Edit #1
I used console.log in order to show you what I got from dt and msg.d (Image)
Edit #2
If I paste the commands from buildTableBody function in the success: handler instead of calling buildTableBody function in the success: handler it actually works:
function dtMRPReasonCode(dt) {
var data = null;
jQuery.ajax({
type: "POST",
data: {},
url: "Index.aspx/getMRPReasonCodeReport",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
dt.fnClearTable();
data = [];
$(msg.d).each(function(index, value) {
element = [];
element.push(value.Metric);
element.push(value.Region);
element.push(value.Plant);
element.push(value.Customer);
element.push(value.IMAC);
element.push(value.NotFilled);
element.push(value.Filled);
element.push(value.Total);
data.push(element);
});
dt.fnAddData(data);
},
error: function(xhr, ajaxOptions, thrownError) {
alert("Error: dtMRPReasonCode");
}
});
return false;
}
But it makes no sense to me, since this actually should work in both ways.
Pretty sure you have a typo on your function call
buildTableBody(td, msg.d);
should be
buildTableBody(dt, msg.d);
Also what is the return type from Index.aspx/getMRPReasonCodeReport? If it is string, you've got to unescape the string before you can treat it as JSON.
Try removing contentType : "application/json utf-8" from your AJAX call. That is the type of the data sent to the server. It is likely that you want the default content type.
Unless your server-side resource was configured to accept json it likely accepts application/x-www-form-urlencoded
http://api.jquery.com/jQuery.ajax/

Categories

Resources