change verfication code using ajax

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.

kubetz · Accepted Answer · 2011-12-15T03:19:45.643

0

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.

edited Dec 15 '11 at 03:19

answered Dec 15 '11 at 03:10

kubetz

8,485
1
22
27

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

I would have approached the problem differently and called the image.php file via ajax, replacing a div's content with the image returned by that call.

If you're happy with this approach, this other stack overflow question can help you.

edited May 23 '17 at 12:27

Community

1
1

answered Dec 15 '11 at 03:13

leonardoborges

5,579
1
24
26

score 0 · Answer 3 · answered Dec 15 '11 at 03:18

there are some fault in html as well.

<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();
            $("img[style="position:relative;top:5px;margin-left:5px;"]").attr('src','new_image.php').load();
        }
   });
</script>

score 0 · Answer 4 · answered Dec 15 '11 at 03:20

Try this:

HTML:

<img id="myImage" src="handler.php" alt="" />
<a id="change" href="#" title="change">change image</a>

Jquery:

<script type="text/javascript">
$(document).ready(function(){ 
$("#change").click(function(e){
 e.preventDefaut();
 var hUrl = "handler.php"
 $("#myImage").attr('src', (hUrl + getRandomQueryString()));
 });//click

});//ready

//avoid cache :
function getRandomQueryString()
{
  return "&Id=" + Math.round(new Date().getTime() / 1000);
}

change verfication code using ajax

4 Answers4