jQuery load() not working in chrome?

Question

OK, I know absolutely nothing about jQuery, ajax etc, I have a jQuery / ajax script that i have modified to do what I need, which is to on load of an image, update mysql database by increasing "views" by 1. This runs perfectly if I am in safari, but for some unknown reason, it doesn't seem to work, or is at least intermittent at best, in chrome. I haven't yet tried other browsers.

here is the jQuery:

$('.view-count').load(function(){
var ClientID=$(this).attr('data-ClientID');
$.ajax({url:"inc/view-count.php?ClientID="+ClientID,cache:false,success:function(result){
    return true;
}});
});

the html / php that includes the class and data-ClientID:

$output .= '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"><a href="app.php?id=' . $id  . '"><img class="img-responsive center-block img-border view-count" data-ClientID="' . $id . '" src="images/efits/' . $efit . '" alt="' . $bname . '" /></a></div>';

and finally the view-count.php:

$clientID = (int) $_GET['ClientID'];

try {
$querySql = 'SELECT * FROM clients WHERE id LIKE :clientid';
$countquery = $db->prepare($querySql);
$countParams = array(':clientid'=>$clientID);
$countquery->execute($countParams);
$result = $countquery->fetch(PDO::FETCH_ASSOC);
$views = $result['views'];

} catch (PDOException $e) {
echo 'failed to get client views';
}

try {
$countSql = 'UPDATE clients SET views=:newview WHERE id LIKE :id';
    $count = $db->prepare($countSql);
    $countParams = array(':newview' => $views+1,':id' => $clientID);
    $count->execute($countParams);

} catch (PDOException $e) {
echo "failed to increase view count";
}

Why would I be having problems with chrome but not safari? is it something to do with images being cached? or maybe some of the code is deprecated? as i said, i am a complete novice with jQuery / ajax, so I wouldn't even know where to begin to try and solve the problem! Im surprised i managed to make it work in the first place!

as always, any help is greatly appreciated!

Thanks

Kaylee

`.view-count` is probably an element which doesn't support `load` event. — GillesC, Apr 12 '16 at 13:31
?? I don't understand? view-count is a class for an image? and it works in safari, every time, no problem... what would you suggest would fix the issue? — Kaylee, Apr 12 '16 at 13:39
Do you get any errors in your browser console? How about other browsers (FF, IE)? [See this similar issue](https://forum.jquery.com/topic/works-in-safari-but-no-other-browser-not-firefox-chrome-or-ie-why). — Vucko, Apr 12 '16 at 13:44
no errors in the browser console. works fine in firefox as well, I just checked, and i haven't checked IE as I am on a mac, and haven't used IE in quite some time! never been its biggest fan... I'll try and get it downloaded and check for any errors on there as well... — Kaylee, Apr 12 '16 at 13:57
checked IE, and its not working in that either, i think that was IE11? also checked chrome on alternative laptop and mobile, and its not working on those, however works on the android internet app...? — Kaylee, Apr 12 '16 at 15:19
i forgot to add that i am currently working on localhost, and a quick search online suggests its a chrome error, that load doesn't work on local files? could this also be the case for IE? — Kaylee, Apr 12 '16 at 15:28

score 0 · Answer 1 · edited May 23 '17 at 12:31

ok... I've spent the last few hours doing some research on this, and I found a solution that at least works for me.

Firstly, I was working on my localhost, and from what I can read, load() doesn't work in chrome when working on localhost, due to the "same origin policy", see this feed for more details jQuery .load() not working in Chrome

Secondly, I was still experiencing the same problem when I uploaded my files to a server, and from some research I discovered chrome was caching the images that were being loaded, and so didn't run the jquery script. If you add something unique to the end of the src url, it forces chrome to reload the image from the server, not the cache, as it is considered a new image. personally, I created a php variable of $time = date(his); knowing this would be unique second to second, and then added it to the image src like so

src="image-file-path.jpg?unique=<?php echo $time; ?>"

now each time i send a request it doesnt use the cache to load the image, and so my jquery is executed (yaaay)! Hope this helps someone having the same problem.

jQuery load() not working in chrome?

1 Answers1