Question

In the code snippet below, from my jQuery setup, I need to check if the image file actually exists and if not, I’d like to substitute a default image. Currently if the file does not exist, I just get a broken image placeholder…

$('#myTheme').change
(
    function() 
    {
    var myImage = $('#myTheme :selected').text();
    $('.selectedImage img').attr('src','../wp-content/themes/myTheme/styles/'+myImage+'/screenshot.jpg');
    //if screenshot.jpg does not exist, use "../../default.jpg" instead
    }
);

Answer 1

It sounds like you need access to the HTTP response headers. Here’s a piece of code I found on the Internet.

Source: http://www.vfstech.com/?cat=1

$(document).ready(function() {
   var ajaxSubmitOptions = {
      // the normal success callback is not used
      // success: function (responseText) {
      //      ...
      // } ,
      complete: function (xhrObj, status) {   
         if(status == "error") { // 500 server error?
            alert("There was an error processing this request.");
         } else {
            if (xhrObj.getResponseHeader("X-My-Custom-Header") != "") {            
               alert("Intercepted special HTTP header...");
               alert(xhrObj.getResponseHeader("X-My-Custom-Header"));
            }
            else {
               // call the function you normally would have used in the "success" callback:
               this._success(xhrObj.responseText);
            }                  
         }
      } ,
      _success: function (responseText) {
         alert("Normal success callback...");
         alert(responseText);
      }
   };

   $('#myForm').ajaxForm(ajaxSubmitOptions);
})