CODEWITHSUNDEEP
phphtml
Scorpion King
Scorpion King

Reputation: 1938

onClick reload the image in div

Here is my code:

<div id='captcha'>
<img src='captcha.php'>
<a href=''>Reload Captcha</a>
</div>

This is a small bit of code that i have on my page. Line 2 will load a captcha image and i want line 3 to reload only that div and not the whole page, so that the captcha will change. Is this even possible? please guide me.

Upvotes: 2

Views: 7917

Answers (4)

Sebi
Sebi

Reputation: 1436

Just to simply reload you can:

<img src='captcha.php' onClick="this.src='captcha.php?rand='+Math.random();">

Random will get rid of browser cache problem and will force to reload it.

Upvotes: 5

mailo
mailo

Reputation: 2611

With jQuery you can do it like this:

$("#captcha").load(location.href+" #captcha>*","");

Where #captcha is ID of the part you want to reload. To be more specific, this code should do the job: 

<a href="#" onclick="$('#captcha').load(location.href+' #captcha>*','');return false;">
Reload Captcha
</a>

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227280

You can force the DOM to reload the image by appending a # to it.

Using jQuery:

<div id='captcha'>
  <img src='captcha.php' id="captcha_image" />
  <a href='javascript:void(0);' id="reload_captcha">Reload Captcha</a>
</div>

$('#reload_captcha').click(function(event){
  $('#captcha_image').attr('src', $('#captcha_image').attr('src')+'#');
});

Upvotes: 5

Chris
Chris

Reputation: 7853

You could delete the div with javascript removeElement(...) and than add the element again to the dom createElement(...). the image should be reloaded then.

Upvotes: 0

Related Questions