Question

I’m trying to implement the following code:

verify.html:

<input type="text" id="vericode" style="position:relative;top:-3px;width:70px;height:20px;border:1px solid #928b8b" name="verif_box">
<IMG style="position:relative;top:5px;margin-left:5px;" SRC="image.php">
    <a href="#" id="change">change to another one</a>

<script>
    $(document).ready(function(){ 
        $("#change").click(function(e){
            e.preventDefaut();
            //not sure how to load the image.php again?
        }
   });
</script>

I want to change the verification code when “change to another one” is clicked, not not sure how to reload the image.php, every time when verify.html is refreshed, the verfication code will change to a new one, but I want to change it without refresh the page every time, anybody could help me solve that problem, your help will be greatly appreciated.

Answer 1

You can reload the image by modifying src attribute of the img and adding a timestamp, so the link will be unique and cached version won’t be used.

$("#change").click(function(e){
  e.preventDefaut();
  $("img").attr('src', 'image.php?ts=' + new Date().getTime());
}

Please add an id attribute to the image you want to reaload so you can use $("#imgID") instead.