JQuery AJAX doesn't get to success call back function

Question

Here is my jQuery Ajax code

$(document).ready(function() {

          $("#submitService").click(function(){  
              alert("Before ajax");
            $.ajax({
               type: "GET",
               url: "http://api.openweathermap.org/data/2.5/weather?q=London,uk",
               headers: {"accept": "application/json"},
             success: function (dataItem) {
                alert("Success..");
            },
             complete: function (dataItem) {
                alert("Completed");
            },
              error: function (dataItem) {
                 alert("Error in making engine call."+dataItem);
              }
             });
             alert("After ajax");

            });                 //click()
      });

When my button is clicked it enters to [complete] and [error] call back methods but NOT to "success" call back method. How can I see what the error is?

I tried to curl the same statement and I get a valid response:

curl "http://api.openweathermap.org/data/2.5/weather?q=London,uk" -H "accept: application/json"

I'm using jQuery 1.7.2

<script type="text/javascript" src='<spring:url value="/resources/jquery/js/jquery-1.7.2.min.js"/>'></script>

In FireBug it shows that request with 200 OK, but no response body. But I see response body when I do it via curl.

What could be the issue? Thanks

score 3 · Answer 1 · answered Nov 25 '13 at 06:15

3

I guess, it is URL encode problem. Replace comma , with encode %2C

url: "http://api.openweathermap.org/data/2.5/weather?q=London%2Cuk"

answered Nov 25 '13 at 06:15

Masudul

21,823
5
43
58

thanks! but still success call back is not being called even if i replace , with %2C – Rose Nov 25 '13 at 06:27
Yes, You have `No Access-Control-Allow-Origin` problem. – Masudul Nov 25 '13 at 06:30
looks like i need to change the remote server config to add Access-Control-Allow-Origin: * as part of the response. Right? Assuming that I have a control on the server. Otherwise how can i resolve this? – Rose Nov 25 '13 at 06:39
This link may help you: http://stackoverflow.com/questions/12683530/origin-http-localhost-is-not-allowed-by-access-control-allow-origin – Masudul Nov 25 '13 at 06:40

score 1 · Answer 2 · answered Nov 25 '13 at 06:17

1

Cancel the click event

$("#submitService").click(function(e){  
    e.preventDeault();
    ...

and let jQuery do the proper encoding of the URL

type: "GET",
url: "http://api.openweathermap.org/data/2.5/weather",
data: {q : "London,uk" },

and hopefully the service and your browser both support CORS since this is a Same Origin Policy issue.

answered Nov 25 '13 at 06:17

epascarello

204,599
20
195
236

This one is not working too. I added a param e to the function then e.preventDefault(); And separeted the data part of the query from the url. Still success is not called. – Rose Nov 25 '13 at 06:33

score 1 · Answer 3 · answered Nov 25 '13 at 06:35

1

Did you notice there are no Allow-Access-Origin in Api call?

I got this on chrome

XMLHttpRequest cannot load http://api.openweathermap.org/data/2.5/weather?q=London,uk. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://jquery.com' is therefore not allowed access.

I think you have a cross site scripting issue.

answered Nov 25 '13 at 06:35

Nitin Sharma

66
4

Thanks Nitin, I guess there is no work around this. I am planning to make a request to my server and make the call from my server instead of from javascript. My understanding is the constraint is only for js making calls and not java making calls from the server. Am I right? – Rose Nov 25 '13 at 06:42

score 0 · Answer 4 · answered Dec 11 '13 at 04:47

0

change application/json to application/x-www-form-urlencoded

answered Dec 11 '13 at 04:47

shiva raj

397
3
3

JQuery AJAX doesn't get to success call back function

4 Answers4