how to dynamically generate JSon object? - javascript

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);
}
});

Related

Getting error trying to submit data using JQuery ajax

When I try to run the following JQuery ajax, I get an error saying that a parameter is missing and it will not send the data. I can't find any syntax errors. What am I doing wrong?
Here is the javascript with the JQuery ajax code:
function submitAction(actionname) {
if (actionname == "illustrationgenerate.htm") {
var thisForm = document.getElementById("illustrationTypeForm");
var fd = new FormData(thisForm);
$.ajax({
url: "illustrationgenerate.htm",
type: "POST",
data: fd,
datatype: "xml",
cache: false,
success: function (result, status, xhr) {
document.getElementById('errorMessage0').value="Success";
},
error: function (xhr, status, error) {
alert(xhr.status);
alert(request.responseText);
}
});
} else {
document.forms[0].action = actionname;
document.forms[0].method = "POST";
document.forms[0].target = '';
document.forms[0].submit();
}
}
Why not use jQuery native form encoder?
$.ajax({
...
data: $('#illustrationTypeForm').serializeArray(),
...
});
Try This
Here is the javascript with the JQuery ajax code:
function submitAction(actionname) {
if (actionname == "illustrationgenerate.htm") {
var thisForm = document.getElementById("illustrationTypeForm");
var fd = new FormData(thisForm);
$.ajax({
url: "illustrationgenerate.htm",
type: "POST",
data: $('#illustrationTypeForm').serializeArray(),
datatype: "xml",
cache: false,
success: function (result, status, xhr) {
document.getElementById('errorMessage0').value="Success";
},
error: function (xhr, status, error) {
alert(xhr.status);
alert(request.responseText);
}
});
} else {
document.forms[0].action = actionname;
document.forms[0].method = "POST";
document.forms[0].target = '';
document.forms[0].submit();
}
}
To make ajax request using jQuery a type 'POST' you can do this by following code :
$.ajax({
url: "test.php",
type: "post",
data: values ,
success: function (response) {
// you will get response from your php page (what you echo or print)
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});

how to get the value from json object that have a similar id

im sending a ajax call that return a json like this
{"2":"/orangehrm/symfony/web/index.php/pim/viewPhoto/empNumber/1","3":"/orangehrm/symfony/web/index.php/pim/viewPhoto/empNumber/2","1":"/orangehrm/symfony/web/webres_552df88c832965.06437943/orangehrmMessengerPlugin/image/default-photo.png"}
the calling function have argument passed this is a integer
i want to get the value that correspond to given id for example 2 how to do this
is the way im using correct
function getUrl(sid){
$.ajax({
type: 'POST',
url: shortUrl + 'messenger/getImgUrls',
data: {suids: [sid]},
dataType: 'json',
async: false,
cache: true,
success: function (msg) {
conversationId = msg.sid;
},
error: function (xhr, textStatus, errorThrown) {
console.log(xhr.status);
console.log(errorThrown);
console.log(xhr.responseText);
}
});}
}
figured it out
have to use
conversationId = msg[sid];

jquery pass 2 ajax result outside ajax

I have a simple working ajax with result.
jQuery.ajax({
type: "POST",
url: my_url_query
success:function(response){
}
}).done(function(response) {
//Assuming the response for currChild1 is 12
res1 = response;
window.$vars = { currChild1: res1 };
window.$vars = { currChild2: res2 }; //----> How will I do this
$.getScript( "assets/js/main/request_add_staff.js");
});
Is it posible to create another ajax to pass another vars to the getscript
Anyway I think This is what im looking..
async:false
kinda long code.
but if you have an idea to shorten this... that will do.
jQuery.ajax({
type: "POST",
url: "index.php/form_dashboard/get/Senior/"+ dataid,
success:function(response){
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
},
async:false
}).done(function(response) {
res_Senior = response;
});
//Result for Junior
jQuery.ajax({
type: "POST",
url: "index.php/form_dashboard/get/Junior/"+ dataid,
success:function(response1){
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
},
async:false
}).done(function(response1) {
res_Junior = response1;
});
window.$vars = { currChild: res_Senior, currChildJunior: res_Junior };
$.getScript( "assets/js/main/request_add_staff.js");

Syntax Error: Unexpected end of input

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);

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