JQuery Ajax Request returns no data

Question

I am trying out JQuery Ajax methods. I wrote a simple Ajax request to fetch certain 'tagged' photos from Flickr. Following is the snippet I am using:

 function startSearch() { 
      $(function() {
           var tagValue = $("#tagInput").attr("value");
           alert(tagValue);
           $.ajax({
               url: "http://api.flickr.com/services/feeds/photos_public.gne?tags=" + tagValue + "&tagmode=any&format=json&jsoncallback",
               dataType: 'json',
               async: false,
               success: function(data) {
                    alert("Success");
                    $.each(data.items, function(i, item) {
                           var pic = item.media.m;
                           $("<img/>").attr("src", pic).appendTo("#images");
                    });
               },
               error: function(data, error) {
                   alert("Error " + error);
               }

     }); });

'startSearch' is associated with a Search button. User is supposed to input a 'tag' to search and on click this function gets called.

Problem is that I am not receiving any 'data' in response. Hence no images gets displayed.

What am I doing wrong here?

Thanks & Regards, Keya

Answer 1

I think the problem is that you're trying to make a cross-site request, which doesn't work because of security concern. You could use JSONP instead, eg as described in http://www.viget.com/inspire/pulling-your-flickr-feed-with-jquery/

You can also try searching for "cross site ajax" on this site, there's plenty of discussion about it.