0

I'm using the following auto-complete plugin that uses Jquery Auto Complete. It works well and does exactly what I need but my problem is that my JSON file has thousands of products with description, and images. Many of the images are down and don't work.

Does any one know how I can replace those broken image links with a general local image? I can't manually go into the JSON file and replace those images as it would take weeks.

I looked at this but no help: "http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images"

Any help is very much appreciated.

Here's FoxyComplete's JS and a link to the full script (Sorry couldn't get JsFiddle to work -- http://www.bcreatives.com.au/wp-content/uploads/dev/foxycomplete-local/):

(function($) {
$(document).ready(function() {

    $( '#s' ).each( function(){
    $(this).attr( 'title', $(this).val() )
      .focus( function(){
        if ( $(this).val() == $(this).attr('title') ) {
          $(this).val( '' );
        }
      } ).blur( function(){
        if ( $(this).val() == '' || $(this).val() == ' ' ) {
          $(this).val( $(this).attr('title') );
        }
      } );
    } );

    $('input#s').result(function(event, data, formatted) {
        $('#result').html( !data ? "No match!" : "Selected: " + formatted);
    }).blur(function(){     
    });

    $(function() {      
    function format(mail) {
        return "<a href='"+mail.permalink+"'><img src='" + mail.image + "' /><span class='title'>" + mail.title +"</span></a>";         
    }

    function link(mail) {
        return mail.permalink
    }

    function title(mail) {
        return mail.title
    }

    $("#s").autocomplete(completeResults, {
        width: $("#s").outerWidth()-2,          
        max: 5,         
        scroll: false,
        dataType: "json",
        matchContains: "word",
        parse: function(data) {
            return $.map(data, function(row) {
                return {
                    data: row,
                    value: row.title,
                    result: $("#s").val()
                }
            });
        },
        formatItem: function(item) {                
            return format(item);
        }
        }).result(function(e, item) {
            $("#s").val(title(item));
            //location.href = link(item);
        });                     
    });

});
})(jQuery);
user1011713
  • 281
  • 5
  • 23

1 Answers1

1

I believe the accepted answer to the SO question you linked should work. Just replace your format function with the following:

function format(mail) {
    return "<a href='"+mail.permalink+"'>" +
        "<img src='" + mail.image + "' onerror='this.src=\'/img/error.jpg\'' />" +
        "<span class='title'>" + mail.title +"</span></a>";         
}

And make sure you have an image called /img/error.jpg, natch.

Community
  • 1
  • 1
Ethan Brown
  • 26,892
  • 4
  • 80
  • 92
  • The code didn't work unfortunately. Just getting an Uncaught SyntaxError: Unexpected token error and still serving up the broken links rather than the replacement. – user1011713 Sep 19 '12 at 23:29
  • Hm...I don't know why you would be getting that. If you can post it, I could take a look at it. – Ethan Brown Sep 19 '12 at 23:38
  • OK so this is the image tag I'm getting for the broken images. Any ideas where I'm going wrong? Replacement.png is my replacement file when image is not found. – user1011713 Sep 19 '12 at 23:46
  • You've got some quoting issues there...the attribute opens with double quotes, but then you use double quotes to specify 'replacement.png'. You'll have to either use different quotes or escape them. – Ethan Brown Sep 20 '12 at 00:29