Develop Reference

Issues executing an AJAX request

I am building a Facebook messenger bot. I got to a point where I need to show a webview. This webview does some payment processing and on success, I call a Messenger SDK's function to close the webview and then do an Ajax call to continue messaging the user. Now I have an issue, the webview does not close until the ajax has finished executing i.e. sending the messages to the user. If I place the Messenger close function outside the ajax call, the webview closes but the ajax is not executed. Please how do I close the webview and then continue executing the ajax request.This is what I am currently doing:
$.ajax({
type: 'POST',
dataType: 'JSON',
url: '/api/payment/'+userId+'/'+payRef,
data: 'userId='+userId,
success: function (data) {
console.log(data);
MessengerExtensions.requestCloseBrowser();
}
})

I don't know if that can solve your problem, but you can try this:
$.ajax({
type: 'POST',
dataType: 'JSON',
url: '/api/payment/'+userId+'/'+payRef,
data: 'userId='+userId,
beforeSend: function() {
MessengerExtensions.requestCloseBrowser();
},
success: function (data) {
console.log(data);
}})
In theory, the window will close before the request init.

I don't know if I understood right, but did you try the beforeSend and complete functions from ajax?
$.ajax({
type: 'POST',
dataType: 'JSON',
url: '/api/payment/'+userId+'/'+payRef,
data: 'userId='+userId,
beforeSend: function(jqXHR, settings) {
// Action before send the request to the url
},
success: function (data) {
// Action if the process in the url url don't throw any errors
},
complete: function(jqXHR, textStatus) {
// Action when the request is returned to application
},
error: function(jqXHR, textStatus, errorThrown) {
// I would recommend you always use the error function.
}
})

JSON is not loading from server

I have a JSON file which i want to load end it is working fine when I am trying to load that file locally from my hard drive.
function save(){
$.ajax({
type: "GET",
url: 'cameras.json',
dataType: "JSON",
async : false,
success: function(data) {
var output = data.result["0"].Address;
alert(output);
},
error: function(data) {
alert("Error")
}
});
}
When i want to get access to this JSON file from my server:
function save(){
$.ajax({
type: "GET",
url: 'http://192.168.0.21:8080/json.html?type=cameras',
dataType: "JSON",
async : false,
success: function(data) {
var output = data.result["0"].Address;
alert(output);
},
error: function(data) {
alert("Error")
}
});
}
It's not working and I am getting error script.
What can be issue with that ?

I had the same problem.
Unfortunately, I think that remote (i.e. away from localhost) ajax calls are forbidden - or something similar - for security reasons.
Depending on your purposes, you can resolve the problem with a 2-steps action:
You can call - via ajax - a local server class which loads the remote file via REST web service.I solved this way...

500 (Internal Server Error)

function update(){
var data = $form_value;
$.ajax({
url: "https://api.knackhq.com/v1/scenes/scene_93/views/view_848/records/542bdc7a1e953ed90509aeab",
type: "PUT",
headers: {"X-Knack-Application-Id": "", "X-Knack-REST-API-Key":""},
data: data,
success: function(response) {
alert('Record created');
console.log($form_value);
}
});
}
I am not sure why I am getting Internal server 500 error, url seams to be corect because it works with GET.

500 means there is a problem internal to the server. There's nothing you can do about that other than contact the people who run it and ask whats going on.

I think type: "POST" instead of type: "GET" should work for you

PhoneGap AJAX Login

I am trying to build a log in application in PhoneGap. Ive been looking around a lot for similar things and I found them plenty... but I do not understand why this pieces of code does not work. When i press the logIn_btn it shows that It cannot reach the "success" piece of code. Thank you for your help!
$('#logIn_btn').click(function(){
user = $('#username').val();
pass = $('#password').val();
var ev = {'papa':true};
if(user!='' && pass!=''){
alert('trying login');
$.ajax({
url: 'https://localhost/server/IF/mobileApp/login.php',
type: 'post',
datatype: 'json',
data: ev,
success: function(data){
alert('asd');
}
});
console.line('done.')
} else {
alert('Please insert your username and password.');
}
});

Your server should not be https://localhost, it should be the name/ip of the server that you'll be logging into.
For additional information, look at your network tab with Chrome, or install a fail handler
$.ajax({
url: 'https://localhost/server/IF/mobileApp/login.php',
type: 'post',
datatype: 'json',
data: ev,
success: function(data){
alert('asd');
}
}).fail(function(jqXHR, textStatus){
});

console.line?I think it would be console.log. Rather try alerting the message. Also make sure the javascript executes after deviceready. Also localhost in android is a very different thing. Try using the ipadress or domain name to access the server.

Pass JavaScript function in ajax response

I'm trying to return a callback from an AJAX submitted form. The user submits a form, the server processes and returns the valid response, i.e. an error message and also a JavaScript function that could perform an action. I'm using Zepto.js faling back to jQuery depending on browser.
My ajax request is:
$.ajax({
success: function(data, status, xhr) {
data.callback();
},
url: form.attr('action'),
data: form.serialize(),
dataType: 'json'
});
On the server I want to return something like:
// PHP code
?>
{
return: false,
error: 'Sorry, we couldn’t find an account with that username or password.',
callback: function() {
console.log('this is the callback');
}
}
<?php
// more PHP code
When returned to the browser callback function should fire. I want the server to return the callback so I can use the same JavaScript code and have it respond accordingly to the server response.
Would I need to change the dataType to script? However I thought this was just for loading .js files, not blocks of code.
Any help appreciated.

The general feeling here is I am approaching this in the wrong way. So revised code:
$.ajax({
success: function(data, status, xhr) {
var callback = data['callback'];
callback();
},
url: form.attr('action'), // in this example it's badLogin
data: form.serialize(),
dataType: 'json'
});
// callback specified in PHP
badLogin: function() {
console.log('bad login');
}
And my PHP
if (!$valid) {
?>
{
"return": false,
"error": "Sorry, we couldn’t find an account with that username or password.",
"callback": "badLogin"
}
<?php
}
Thanks for pointing me in the right direction.

You can always return the code as a string and use eval() if you are absolutely sure that the string will always be correct and no code can be injected.