1

I am a C programmer trying to fix a bug in some code I did not create. When a row of a table is clicked, it sets the image with id 'square'

$('#square').attr("src","image/"+row.id+"_2_1.jpg");

However, some images are named _3_1.jpg (not under my control) so I would like to check if the _2_ image exists and if not, load a _3_ variant.

Using "onerror" doesn't seem to work and inserting an IF statement stops the entire table from loading.

This is the whole function:

$('#table').on('click-row.bs.table', function (e, row, $element) {
    if(config["homing_tool"] == "1"){
            $('#detail').show();
            $('#detail1').hide();
            $('#detail2').hide();
            $('.homing').hide();
    }else{
            $('#detail').show();
            $('#detail1').show();
            $('#detail2').show();

            $('#iris').attr("src","image/"+row.id+"_0_1.jpg");
            $('#square').attr("src","image/"+row.id+"_2_1.jpg");
    };
    var x;
    for (x in row) {
        if(x == "type"){
            $('#'+x).html(spec[row[x]]["name"]);
        }else{
            $('#'+x).html(row[x]);
        }
    }
});

Edit: Thanks for the suggestions! All data is local, so no need for connecting to servers and using HTTP requests as far as I know. I will try the other suggestions tomorrow. The PC I have to access remotely is 6 hours ahead of me and they just shut down for the day.

Rik
  • 11
  • 3
  • 1
    One option would be to use `$.ajax` to check if the file exists. A better option would be to handle this in the back-end / whatever is generating the html – freedomn-m Aug 18 '20 at 10:38
  • Does this answer your question? [Check if image exists on server using JavaScript?](https://stackoverflow.com/questions/18837735/check-if-image-exists-on-server-using-javascript) or [Check if image exists before loading](https://stackoverflow.com/questions/29991834/check-if-image-exists-before-loading) or [see if src of img exists](https://stackoverflow.com/questions/9022427/see-if-src-of-img-exists) – caramba Aug 18 '20 at 10:38
  • Does this answer your question? [How to check image url is 404 using javascript](https://stackoverflow.com/questions/31936444/how-to-check-image-url-is-404-using-javascript) More: https://stackoverflow.com/search?q=%5Bjavascript%5D+check+img+for+404 – freedomn-m Aug 18 '20 at 10:40
  • 1
    "*inserting an IF statement stops the entire table*" - probably something wrong with how you inserted the `if` then, but probably not relevant to the question – freedomn-m Aug 18 '20 at 10:42
  • I've seen worse questions here @freedomn-m – Jayr Aug 18 '20 at 10:43
  • @caramba, thanks for the links. I already tried the first and last, but the middle one is new to me. I'll try that one. – Rik Aug 18 '20 at 10:48
  • @freedomn-m I don't know what else to call it. When loading the HTML, a table gets filled with data. If I add an IF-statement in the click-event, that data (on page load) does not load. I don't know enough about JQuery or Javascript to understand why or how... – Rik Aug 18 '20 at 10:51
  • It's not that you've added an `if` - it might be that you've missed a `}` or put the `}` in the wrong place - it's not in the question, so can't advise on that part. Do always check the console (in the browser, press F12 and select console) as it will show any js errors and liberally add `console.log("a")` `console.log("b")` (or more meaningful, but different messages) so you can see what's being hit - or, of course, learn to use the debugger in the browser (it's very similar to other debuggers) - add a `debugger;` statement in the javascript where you want to start debugging. – freedomn-m Aug 18 '20 at 11:00

1 Answers1

0

Through some debugging and trial-and-error I was able to adapt Check if image exists before loading to what I needed.

Thanks all!

For posterity, I used:

function getSquareURL(rowid)
{
    var image = new Image();
    
    image.onload = function()
    {
        $('#square').attr("src","image/"+rowid+"_2_1.jpg");
        return true;
    }
    image.onerror = function()
    {
        $('#square').attr("src","image/"+rowid+"_3_1.jpg");
        return false;
    }

    image.src = "image/"+rowid+"_2_1.jpg";
}
Rik
  • 11
  • 3