Ajax request is not working? - javascript

When i try to POST my JSON am not able to see any request and also my local server not even getting these calls.
This is my ajax part
function callserver(){
var markers = {"regDate" : 1451330123000, "specialities" : " ", "isActive" : true, "mobileNo" : "876876","id" : 0, "completed" : false,"mcname" : "", "password" : "hgh","role" : "SuperAdmin,Consultant","logins" : [],"email" : "testtestets#test.com","name" : "regcg","organization" : "hghjg"};
alert(markers);
$.ajax({
type: "POST",
data:markers,
headers: {
'Accept':'application/vnd.company.productname-v1+json',
'X-PD-Authentication':'42</B7Tg8o5C7`7<7Ar0?]pJs`#Noplt>I1m>QYQn[v=osDl:unWyx`SYqBK#0?w',
'Content-Type':'application/json'
},
dataType: "json",
url: "http://x.x.x.x:9001/users",
success: function(data) {
alert("success");
},
error: function () {
alert("failure");
}
});
}
Till alert(markers); is working but after that
am not getting "Success" or "failure" alert.
Console screenshots
Please help me

As you are not ready to show the full HTML, it looks like you are using another library with jQuery, because jQuery works. So kindly change all the $ to jQuery:
function callserver(){
var markers = {"regDate" : 1451330123000, "specialities" : " ", "isActive" : true, "mobileNo" : "876876","id" : 0, "completed" : false,"mcname" : "", "password" : "hgh","role" : "SuperAdmin,Consultant","logins" : [],"email" : "testtestets#test.com","name" : "regcg","organization" : "hghjg"};
alert(markers);
// Change here
jQuery.ajax({
type: "POST",
data:markers,
headers: {
'Accept':'application/vnd.company.productname-v1+json',
'X-PD-Authentication':'42</B7Tg8o5C7`7<7Ar0?]pJs`#Noplt>I1m>QYQn[v=osDl:unWyx`SYqBK#0?w',
'Content-Type':'application/json'
},
dataType: "json",
url: "http://x.x.x.x:9001/users",
success: function(data) {
alert("success");
},
error: function () {
alert("failure");
}
});
}

Related

jQuery AJAX: Uncaught SyntaxError: Unexpected token

I am trying to update my div content with new content when the user uses the search textbox:
$('#business_request_filter_search_textbox').on('input propertychange paste', function () {
$.ajax({
url: "/ajax/housekeeping/business/" + $("#search_filter_selection")[0].selectedIndex == 1 ? "get-requests-by-username" : "get-requests-by-business-name";
type: "GET",
cache: false,
data: { search: $('input#business_request_filter_search_textbox').val() },
beforeSend: function(xhr) {
$('#request_area').html('<center>Please wait while we gather results...</center>');
},
success: function(data) {
$('#request_area').html(data);
},
});
});
Now I have a dropdown selecting what they want to filter the search by, the username or the business name. This is the line that is throwing the error.
url: "/ajax/housekeeping/business/" + $("#search_filter_selection")[0].selectedIndex == 1 ? "get-requests-by-username" : "get-requests-by-business-name";
Am I doing something wrong?
You should have a comma ',' at the end of the url line:
$('#business_request_filter_search_textbox').on('input propertychange paste', function () {
$.ajax({
url: "/ajax/housekeeping/business/" + $("#search_filter_selection")[0].selectedIndex == 1 ? "get-requests-by-username" : "get-requests-by-business-name",
type: "GET",
cache: false,
data: { search: $('input#business_request_filter_search_textbox').val() },
beforeSend: function(xhr) {
$('#request_area').html('<center>Please wait while we gather results...</center>');
},
success: function(data) {
$('#request_area').html(data);
},
});
});
You don't have dataType defined for the ajax call.
Add dataType which is the expected format of your ajax request which can be text, json etc
Try This Code
$('#business_request_filter_search_textbox').on('input propertychange paste', function () {
$.ajax({
url: "/ajax/housekeeping/business/" + $("#search_filter_selection")[0].selectedIndex == 1 ? "get-requests-by-username" : "get-requests-by-business-name",
type: "GET",
cache: false,
data: { search: $('input#business_request_filter_search_textbox').val() },
beforeSend: function(xhr) {
$('#request_area').html('<center>Please wait while we gather results...</center>');
},
success: function(data) {
$('#request_area').html(data);
},
});
});
Hope This help You :) Enjoy :)

Jquery ajax url eval

I have to fire an ajax call against two different domain based on the platform of the client (mobile/desktop):
var baseDomain = (isMobile()) ? "http://m.test.com" : "http://www.test.com";
function AddProduct(ProductId, ButtonClientId) {
$.ajax({
type : "POST",
eval("url : \""+baseDomain+"/data/call.aspx/AddToShoppingCart\",");
contentType : "application/json; charset=utf-8",
data : '{productId:' + ProductId + ', quantity: 1, isSingle: true}',
dataType : "json",
success : function(data) {
ProductAddedSuccess(data.d, ButtonClientId);
},
error : ProductAddedError
});
}
I cannot go thru this as I always get the "SyntaxError: missing formal parameter". Where I'm wrong?
Try this:
$.ajax({
type : "POST",
url : baseDomain + "/data/call.aspx/AddToShoppingCart",
contentType : "application/json; charset=utf-8",
data : '{productId:' + ProductId + ', quantity: 1, isSingle: true}',
dataType : "json",
success : function(data) {
ProductAddedSuccess(data.d, ButtonClientId);
},
error : ProductAddedError
});
The URL is just a string, so create the string you want in a variable and assign it to the url property of the Ajax options:
var baseDomain = isMobile() ? "http://m.test.com" : "http://www.test.com";
function AddProduct(ProductId, ButtonClientId) {
$.ajax({
type : "POST",
url: baseDomain + "/data/call.aspx/AddToShoppingCart",
contentType : "application/json; charset=utf-8",
data : '{productId:' + ProductId + ', quantity: 1, isSingle: true}',
dataType : "json",
success : function(data) {
ProductAddedSuccess(data.d, ButtonClientId);
},
error : ProductAddedError
});
}
The reason for the error is you are placing a function call (to eval()) in the middle of an anonymous object declaration!
e.g.
{
propName1: "Value 1",
someFunctionCall(),
propName2: "Value 3"
}
Which makes no sense to Javascript :)

Cross Domain Request display data results

I have test code for WordPress here.
jQuery(document).ready(function($) {
var link = 'http://000.00.00.00/cgi-bin/test.cgi';
$("#sub").click(function() {
$.ajax({
type:'POST',
url: link,
crossDomain: true,
crossOrigin: true,
headers: {
'Accept': 'application/json',
'Content-Type': 'text/html'
},
dataType: "json",
success: function(data) {
console.log(JSON.stringify(data));
},
error: function(e) {
console.log("Error: " + e);
},
});
});
the request seems fine because when i view my chrome network > headers tab status code is OK but the problem is that there is no data. I should have a working output like this..
{ "loyalty" : { "status" : { "rows" : "1", "sql" : "success", "result" : "ok" }, "data" : [ { "card_number" : "1410104000350018" , "card_type" : "BEAUTY ADDICT" , "first_name" : "TINA" , "middle_initial" : "M" , "last_name" : "LIM" } ] } }
You can use JSONP to get data from other domain than your javascript host, which is something like blow:
$("#sub").click(function() {
$.ajax({
url: link,
dataType:'jsonp',
jsonp:'callback',
success: function(data) {
console.log(JSON.stringify(data));
},
error: function(e) {
console.log("Error: " + e);
},
});
and because JSONP transmit data through GET, so In your server side code you need retrieve data from $_GET like this(if you use PHP):
$your_param = $_GET['your_param'];
$callBack = $_GET['callback'];
//do something .....and get $result
echo($callBack . '(' .json_encode($result) . ')');

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

Hi there are already lots of threads related to this problem.
But still i got stuck into the same . When I am trying to access this REST api, I couldnt able to get the response. I cannot control server side response header because its public API .can any body help on this.
Below is my code
$(document).ready(function() {
$("#medication").autocomplete({
select : function(request, response) {
//$(this).value(response.item.value);
getMedicationIdByName(response.item.value);
},
search : function(){$(this).addClass('working');},
open : function(){$(this).removeClass('working');},
source : function(request, response) {
$.ajax({
headers : {
Accept : "application/json; charset=utf-8",
"Content-Type" : "application/json; charset=utf-8"
},
type : "GET",
url : "http://rxnav.nlm.nih.gov/REST/spellingsuggestions",
data : "name="+ request.term,
crossDomain: 'true',
dataFil ter : function(data) {
return data;
},
success : function(data) {
try {
//alert("success!!"+JSON.stringify(data));
data = data.suggestionGroup.suggestionList["suggestion"]+ "";
data = data.split(",");
response($.map(data,function(item) {
//alert("success!!"+JSON.stringify(item))
return {
value : item
};
}));
} catch (e) {
alert(e);
}
},
error : function() {
alert('Cannot connect to REST API!!!');
}
});
},
minLength : 4
});
});
You need to set dataType to jsonp in your ajax request.
type: "GET",
headers: {
Accept : "application/json; charset=utf-8",
"Content-Type": "application/json; charset=utf-8"
},
url: "http://rxnav.nlm.nih.gov/REST/spellingsuggestions",
data: { name: "bard"},
dataType: "jsonp",
crossdomain: true,

JavaScript/jQuery Variable Scope Issue with Nested .ajax() calls

I'm having a difficult time passing the variable postData which is a serialized jQuery array object to a nested child .ajax() call. postData is passed successfully to the first .ajax() call, but when I attempt to use it in the second .ajax() call, it does not post any form elements, as the variable is undefined at that level:
$(".myForm").submit(function () {
var postData=$(this).serializeArray();
$.ajax({
type : "POST",
async : false,
cache : false,
url : "./insertComment.php",
data : postData,
success: function() {
$.ajax({
type : "POST",
async : false,
cache : false,
url : "./getComments.php",
data : postData,
success: function(comments) {
$(".Comments").html(comments);
}
});
}
});
return false;
});
I tried creating a second variable _postData attempting to perpetuate the variable on to the next .ajax() call, but it was unsuccessful (also tried var _postData=$(this).parent().serializeArray(); but I still wasn't able to perpetuate the variable):
$(".myForm").submit(function () {
var postData=$(this).serializeArray();
$.ajax({
type : "POST",
async : false,
cache : false,
url : "./insertComment.php",
data : postData,
success: function() {
var _postData=$(this).serializeArray();
$.ajax({
type : "POST",
async : false,
cache : false,
url : "./getComments.php",
data : _postData,
success: function(comments) {
$(".Comments").html(comments);
}
});
}
});
return false;
});
I tried implementing so-called JavaScript closure (something I still don't fully grok), but that led to more undefined variables and more failure:
$(".myForm").submit(function () {
var postData = function() {
$(this).serializeArray();
}();
$.ajax({
type : "POST",
async : false,
cache : false,
url : "./insertComment.php",
data : postData,
success: function() {
$.ajax({
type : "POST",
async : false,
cache : false,
url : "./getComments.php",
data : postData,
success: function(comments) {
$(".Comments").html(comments);
}
});
}
});
return false;
});
I tried searching around and tried implementing several other techniques, including jQuery traversal (.parent(), .filter(), etc.), but was unsuccessful. I know this is a common problem for a lot of folks, but so far I have not found a simple, understandable solution. Any suggestions would be greatly appreciated. Thanks!
Try this:
$(".myForm").submit(function ()
{
var postData=$(this).serializeArray();
$.ajax({ type : "POST",
async : false,
cache : false,
url : "./insertComment.php",
data : postData,
success: (function(pData)
{
// capture the posted data in a closure
var _postData = pData;
return function()
{
$.ajax({ type: "POST",
async: false,
cache: false,
url: "./getComments.php",
data: _postData,
success: function(comments)
{
$(".Comments").html(comments);
}
});
}
})(postData) // execute the outer function to produce the colsure
});
return false;
});
Here's what I ended up doing:
$(".myForm").submit(function () {
var postData = $(this).serializeArray(); // Gets all of the form elements
var myID = $(this.ID).val(); // Takes only a single value from the form input named ID
$.ajaxSetup({
data : "ID=" + myID // Sets the default data for all subsequent .ajax calls
});
$.ajax({
type : "POST",
async : false,
cache : false,
url : "./insertComment.php",
data : postData, // Overwrites the default form data for this one instance only, including all form elements
success: function() {
$.ajax({
type : "POST",
async : false,
cache : false,
url : "./loadComments.php", // Notice there is no data: field here as we are using the default as defined above
success: function(comments) {
$(".Comments").html(comments);
}
});
}
});
return false;
});

Categories