Reputation: 375
I'm using a form on a page to have a user input the url of an image that will be used for various purposes. I'm write an ajax method to determine whether their supplied url is actually an image or not. So far I've done this:
$(document).on('ready', function () {
$("#AppBackgroundImage").on('blur', function () {
var providedImage = $(this);
var URL = providedImage.val();
$.ajax({
url: providedImage.val(),
type: "GET",
success: function () { $("#imageThumbnail").attr("src", URL); },
error: function () { $("#imageThumbnail").attr('src', "C:\Users\jorda_000\Desktop"); }
});
//$("#imageThumbnail").attr("src", URL);
})
})
When I comment out the success and error functions and uncomment the bottom line of code, when I click out of the form input it will update the thumbnail (id = "imageThumbnail") with the appropriate image. If it's not an image, it will display a blank thumbnail.
Is it viable to pass in the two .attr methods I'm trying to do or will I have to handle that elsewhere? I want it to display the appropriate image if the url is an image, and display a default image if it's not (with an appropriate error message).
Upvotes: 3
Views: 129
Reputation: 74410
Give it a try:
$(document).on('ready', function () {
$("#AppBackgroundImage").on('blur', function () {
var providedImage = $(this);
var URL = providedImage.val();
$.ajax({
url: providedImage.val(),
type: "GET",
error: function () { URL = "C:\Users\jorda_000\Desktop"); }
complete: function () { $("#imageThumbnail").attr("src", URL); }
});
})
});
Upvotes: 1