We Keep Coding

Why can't my ajax get request find my handler route when I add arguments?

I am building a web app that displays data about flowers that is stored in my local server running bottle.
My front end is html, js with ajax;
My back end is python with bottle
In the browser there is an empty div in which the data is to be displayed.
Below it there is a row of images. When the user clicks on an image the data should display in the div above.
I tried using $.ajax instead of $.get, and I'm getting the same result.
This is my event listener in js:
$('.image').click((e)=>{
$('.selected').removeClass('selected');
$(e.target).addClass('selected'); // just a visual indication
$.get('/flowerdesc/'+$(e.target).attr('id')).done((data)=>{
flowerInfo = JSON.parse(data);
$('#flower-title').empty();
$('#flower-title').html(flowerInfo.name);
$('.desc-text').empty();
$('.desc-text').html(flowerInfo.description);
})
})
This is my handler for this request:
#get('/flowerdesc/<flower>')
def get_flower_desc(flower):
return json.dumps(data[data.index(filter(lambda f: f.name == flower, data)[0])])
(data is an array of dictionaries, each containing data of a single flower)
I am getting a 404 error (the function get_flower_desc is not executed at all) that possibly is happening because of the argument, because whenever I use a a function with no parameters and pass in no arguments I am getting the result that I'm expecting.

I found that I had to formulate an AJAX request quite precisely to get it to work well with Bottle in a similar scenario.
Here is an example with a GET request. You could attach this function to the event handler or move it directly to the event handler.
function getFlowerData(id) {
$.ajax({
type: "GET",
cache: false,
url: "/flowerdesc/" + id,
dataType: "json", // This is the expected return type of the data from Bottle
success: function(data, status, xhr) {
$('#flower-title').html(data['name']);
$('.desc-text').html(data['description']);
},
error: function(xhr, status, error) {
alert(error);
}
});
};
However, I found better results using a POST request from AJAX instead.
function getFlowerData(id) {
$.ajax({
type: "POST",
cache: false,
url: "/flowerdesc",
data: JSON.stringify({
"id": id,
}),
contentType: "application/json",
dataType: "json",
success: function(data, status, xhr){
$('#flower-title').html(data['name']);
$('.desc-text').html(data['description']);
},
error: function(xhr, status, error) {
alert(error);
}
});
};
For the POST request, the backend in Bottle should look like this.
#post("/flowerdesc") # Note URL component not needed as it is a POST request
def getFlowerData():
id = request.json["id"]
# You database code using id variable
return your_data # JSON
Make sure your data is valid JSON and that the database code you have is working correctly.
These solutions using AJAX with Bottle worked well for me.

jQuery AJAX call not returning data

I feel a little silly here. My ajax call is running the error: function every time. I know that the data is coming back as JSON, but i've done the datatype as jsonp to allow for cross origin stuff. I don't think I can do anything differently, unless I'm forgetting something obvious. Please- whats wrong with this:
function sartleApi(type,endpoint,object,callback){
$.ajax({
contentType: "application/json",
dataType: 'jsonp',
type:type,
data:object,
url:"http://dev.sartle.com/includes/ajax_reviewcomment.php?rid=1178",
success:function(data){
callback(data);
},
error: function (xhr, textStatus, errorThrown) {
alert(xhr.statusText);
alert(xhr.responseText);
alert(xhr.status);
alert(errorThrown);
}
});
}

Your website doesn't support JSONP.
JSONP is just a fancy way of passing a JSON object to a global callback function via a <script> tag. It circumvents cross-origin restrictions by not sending an AJAX request in the first place, but instead creating a <script> tag.
A JSON response looks like this:
{"foo": "bar"}
But a JSONP response is:
some_callback({"foo": "bar"})
That PHP script doesn't wrap the JSON response in a callback function (whose name is usually specified via the callback GET parameter), so you simply can't make a JSONP request. The request will succeed, but the global callback function will not be called, so you will not be able to use the JSON.

So, to try to circumvent the cross domain issue, using jSONP turned out to be a bad idea. I'm running these calls from a localhost, so i've changed the url in the ajax call to
url:"http://localhost/includes/ajax_reviewcomment.php?rid=1178"
I will build this url to be dynamic so that the current URL always is domain-consistent with the server, and i should be in good shape!

stlll, it seems a cross-domain issue: please try this library https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js
as a jsonp the result is already a callback function with a javascript object argument. Make sure that the returned function by the server is implemented:
The server could return my_callback({...}). You need to implement my_callback function client-side.
place some alerts/console.log on both success and error functions. Always make a little debug of your own before posting the issue.
as posted in the comment: state the return code of the ajax call.

in type you need put "GET" or "POST"
$.ajax({
contentType: "application/json",
dataType: 'jsonp',
type:type, <<<<<<------ here
data:object,
url:"http://dev.sartle.com/includes/ajax_reviewcomment.php?rid=1178",
success:function(data){
callback(data);
},
error: function (xhr, textStatus, errorThrown) {
alert(xhr.statusText);
alert(xhr.responseText);
alert(xhr.status);
alert(errorThrown);
}
});
}

Detect HTTP 301 status code from JavaScript

I need to detect client side if a requested file (with XMLHttpRequest) had a 301 response. The reason of doing this is because I need to request other files related to the file where user has been redirected and not related to the first one requested.
Any way to detect this response status code using JavaScript or JQuery?
Thanks.

jQuery ajax callback function gives out a lot of info
$.ajax({
url: "test.php",
type: "GET",
data: {},
dataType:"json",
success: function(resp, textStatus, xhr) {
//status of request
console.log(xhr.status);
},
complete: function(xhr, textStatus) {
console.log(xhr.status);
}
});

You can use $.ajax with jquery
It has everything you need here : http://api.jquery.com/jQuery.ajax/
If you look at "statusCode" explaination, you will see you can make something for every code

JSON data not responding

Following is my code :
function jsonpCallback(response){
//JSON.stringify(response)
alert(response);
}
$.ajax({
url: url,
dataType: 'jsonp',
error: function(xhr, status, error) {
alert(error);
},
success: function(data) {
alert(data);
jsonpCallback(data);
}
});
Here my url variable is the link which contain the following data and as per I know it is in the JSON format:
[{"destination":"United States","destinationId":"46EA10FA8E00","city":"LosAngeles","state":"California","country":"United States"}] etc..
I want to call jsonpCallback function after passing successive data to it. But success argument of $.ajax is not calling the function thats why I am not getting any data into it. But my debugger window showing response there, so why its not coming $.ajax function?
Any help...thanks in advance.

Try to pass type of ajax call GET/POST.
$.ajax({
type: "GET",
url: url,
dataType: 'jsonp',
error: function(xhr, status, error) { alert(error); },
success: function(data) {
alert(data);
jsonpCallback(data);
}
});
function jsonpCallback(response){
//JSON.stringify(response)
alert(response);
}

The URL you are trying to load data from doesn't support JSONP, which is why the callback isn't being called.
If you own the endpoint, make sure you handle the callback GET parameter. In PHP, your output would look like this:
<?php
echo $_GET['callback'].'('.json_encode($x).')';
This will transform the result to look like this:
jsonp2891037589102([{"destination":"United States","destinationId":"46EA10FA8E00","city":"LosAngeles","state":"California","country":"United States"}])
Of course the callback name will change depending on what jQuery generates automatically.
This is required as JSONP works by creating a new <script> tag in the <head> to force the browser to load the data. If the callback GET parameter isn't handled (and the URL returns a JSON response instead of a JSONP response), the data gets loaded yes, but isn't assigned to anything nor transferred (via a callback) to anything. Essentially, the data gets lost.
Without modifying the endpoint, you will not be able to load the data from that URL.

One weird thing I've noticed about $.ajax is that if the content-type doesn't match exactly it's not considered a success. Try playing around with that. If you change success to complete (and fix the arguments) does it alert?

It's not working because your server does not render a JSONP response. It renders a JSON response.
For JSONP to work, the server must call a javascript function sent by the ajax request. The function is generated by jQuery so you don't have to worry about it.
The server has to worry about it, though. By default, this function's name is passed in the callback argument. For example, the URL to the server will be http://some.domain/ajax.php?callback=functionName (notice callback=functionName).
So you need to implement something like the following on the server side (here in PHP):
$callback = $_GET['callback'];
// Process the datas, bla bla bla
// And display the function that will be called
echo $callback, '(', $datas, ');';
The page returned will be executed in javascript, so the function will be called, so jQuery will call the success function.

First check in which event you are calling $.ajax function...
<script type='text/javascript'>
jQuery('#EnrollmentRoleId').change(function(){
alert("ajax is fired");
$.ajax({
type: "GET",
url: url,
dataType: 'jsonp',
error: function(xhr, status, error) { alert(error); },
success: function(data) {
alert(data);
jsonpCallback(data);
}
});
});
function jsonpCallback(response){
//JSON.stringify(response)
alert(response);
}
</script>
second try to replace $ with jQuery.
Try to give no conflict if you thinking any conflict error..
jQuery ajax error callback not firing
function doJsonp()
{
alert("come to ajax");
$.ajax({
url: url,
dataType: "jsonp",
crossDomain: true,
jsonpCallback:'blah',
success: function() { console.log("success"); },
error: function() { console.log("error"); }
});
}
Then check your json data if it is coming it is valid or not..
Thanks

Jquery success function not firing using JSONP

Been doing some playing call my service which is on a different domain using jQuery. The call to the service is successfully made (my debug point gets tripped), and the correct response is returned (I sniff the traffic).
My problem is mainly that the success and failure callbacks don't get fired. I have read some other posts on SO that indicate the error event is not fired when using JSONP. Is that the case with the success event (perhaps because it is assumed that I am providing my own callback function), as well, or is there a way to fire my success callback. Thanks in advance.
$.ajax({
type: "GET",
url: urlOnDiffDomain,
async: false,
cache: false,
dataType: 'jsonp',
data: {},
success: function(data, textStatus) {
alert('success...');
},
error: function(xhr, ajaxOptions, thrownError) {
alert('failed....');
}
});

Alright. In case anyone needs to know in the future...In hindsight, the solution probably should have been more obvious than it was, but you need to have the web-response write directly to the response stream. Simply returning a string of JSON doesn't do it, you need to someone construct it and stream it back. The code in my original post will work fine if you do indeed do that.
Example of service code:
public void DoWork()
{
//it will work without this, but just to be safe
HttpContext.Current.Response.ContentType = "application/json";
string qs = HttpContext.Current.Request.QueryString["callback"];
HttpContext.Current.Response.Write(qs + "( [{ \"x\": 10, \"y\": 15}] )");
}
Just for the sake of being explicit, this is the client-side code.
function localDemo(){
$.getJSON("http://someOtherDomain.com/Service1.svc/DoWork?callback=?",
function(data){
$.each(data, function(i,item){
alert(item.x);
});
});
}
If there is a better way to do this, I am all ears. For everyone else, I know there is some concept of native support in WCF 4.0 for JSONP. Also, you may want to do a little checking for security purposes - though I have not investigated much.

The success callback method is called when the server responds. The $.ajax method sets up a function that handles the response by calling the success callback method.
The most likely reason that the success method is not called, is that the response from the server is not correct. The $.ajax method sends a value in the callback query string that the server should use as function name in the JSONP response. If the server is using a different name, the function that the $.ajax method has set up is never called.
If the server can not use the value in the callback query string to set the function name in the response, you can specify what function name the $.ajax method should expect from the server. Add the property jsonpCallback to the option object, and set the value to the name of the function that the server uses in the response.
If for example the $.ajax method is sending a request to the server using the URL http://service.mydomain.com/getdata?callback=jsonp12345, the server should respond with something looking like:
jsonp12345({...});
If the server ignores the callback query string, and instead responds with something like:
mycallback({...});
Then you will have to override the function name by adding a property to the options object:
$.ajax({
url: urlOnDiffDomain,
dataType: 'jsonp',
data: {},
success: function(data, textStatus) {
alert('success...');
},
jsonpCallback: 'mycallback'
});

Try
$.getJSON(urlOnDiffDomain, function(data, textStatus){
alert('success...');
});
Works for me, usally. You need to add &callback=? to urlOnDiffDomain, where jQuery automatically replaces the callback used in JSONP.
The error callback is not triggered, but you can use the global $.ajaxError, like this
$('.somenode').ajaxError(function(e, xhr, settings, exception) {
alert('failed');
});

This is not a complete answer to your question, but I think someone who passes by would like to know this:
When you deal with JSONP from WCF REST try to use:
[JavascriptCallbackBehavior(UrlParameterName = "$callback")]
for your service implementation; this should give you JSONP out-of-the-box.

$.ajax({
url:' <?php echo URL::site('ajax/editing?action=artistSeracher') ?>',
dataType: "json",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
artist: request.term
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item.artist,
value: item.artist,
id: item.id
}
}));
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});