Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Arthur Bardakov
5,636 PointsHow to set a timeout setting for a server callback?
I have a question! In this example, if a user types in some non-existing request, the server respond neither with an answer, nor an error(if we use $.getJSON method here)! To see this, that there is no such a request, we have to use the $.ajax method, which gives us the 'timeout' setting! But if I start using this method, the following error occur - "XMLHttpRequest cannot load https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://website' is therefore not allowed access."...Could you answer why, please?
5 Answers
Christopher Debove
Courses Plus Student 18,373 PointsOh I see you're not using the $.ajax function the good way. The $.ajax function take one or 2 parameters :
$.ajax(url, ajaxSettings)
$.ajax(ajaxSettings);
// ajaxSettingFomat :
/*
{
type: string,
dataType: string,
success: handler,
error: handler,
data: object,
...
}
*/
With your sample:
var flickerOptions = {
tags: text,
format: "json"
};
$.ajax(flickerAPI, {
type: "get",
dataType: "json",
timeout: 4000,
success: displayPhotoes,
data: flickerOptions
});
Do you see the property "dataType". That's the property I was talking about. It's this property which makes jQuery replace the placeholder for jsoncallback in your url.
By the way I recommend you to look at jQuery documentation for AJAX if you want to dig a little more farther in this topic. =)
Christopher Debove
Courses Plus Student 18,373 PointsHi,
With which settings do you call $.ajax ? Do you specifying the dataType : "json" ? If not, it's what causes the jsoncallback param to not be set.
Arthur Bardakov
5,636 PointsHi! I indicated the "json" format in the options for the second parameter of the $.ajax method! The code looks like this...
$().ready(()=>{ $('form').on('submit', (event)=> { event.preventDefault(); $('#search').prop('disabled', true); $('#submit').attr('disabled', true).val('searching....');
var flickerAPI = 'https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?';
var text = $('#search').val();
const displayPhotoes = (data)=>{
var photoHTML = '<ul>';
$.each(data.items, (i, photo)=>{
photoHTML += '<li class="grid-25 tablet-grid-50">';
photoHTML += '<a href="' + photo.link + '" class="image">';
photoHTML += '<img src="' + photo.media.m + '"</a></li>';
$('#search').prop('disabled', false);
$('#submit').attr('disabled', false).val('Search');
});
photoHTML += '</ul>';
$('#photos').html(photoHTML);
}
var flickerOptions = {
tags: text,
type: "GET",
format: "json",
timeout: 4000
};
var request = $.ajax(flickerAPI, flickerOptions, displayPhotoes);
request.fail(( jqXHR, textStatus )=> {
alert( "Request failed: " + textStatus );
});
});
});
Arthur Bardakov
5,636 PointsAh, I missed that there are supposed to be to one or two parameters for this method! Thanks a lot!!
Christopher Debove
Courses Plus Student 18,373 PointsYou're welcome! Happy coding =)