jQuery load（）在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

Answer 1

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.