Блог

Я использую JCaptcha (http://jcaptcha.sourceforge.net /) на нашем веб-сайте. Проблема в том, что иногда очень сложно прочитать изображение. Итак, мы планируем предоставить кнопку с именем «ОБНОВИТЬ» рядом с изображением jcaptcha, и при нажатии кнопки ОБНОВИТЬ она должна обновлять только изображение jcaptcha, а не всю страницу / портлет. Как мы можем это сделать?

Вот как я решил это с помощью jQuery, он заменит изображение. Оповещение () предназначено только для отображения нового имени файла и, конечно, может быть удалено. Код использует плагин jquery в grails, но показывает, что нужно сделать в jquery, чтобы обновить изображение.

 <div>
<jcaptcha:jpeg name="captchaImage"/>

<a href="#" id="refreshCaptcha">Refresh captcha</a>
<jq:jquery>
   $("#refreshCaptcha").click(function() {
      $("#captchaImage").fadeOut(500, function() {
         var captchaURL = $("#captchaImage").attr("src");
         captchaURL = captchaURL.replace(captchaURL.substring(captchaURL.indexOf("=") 1, captchaURL.length), Math.floor(Math.random()*9999999999));
         alert(captchaURL);
         $("#captchaImage").attr("src", captchaURL);
      });
      $("#captchaImage").fadeIn(300);
});
</jq:jquery>
</div>
  

Внесите эти изменения в JSP :

 <img src="jcaptcha" id="captcha_image"/> <a href="#" onclick="reloadCaptcha()" alt="reload"width="40" height="40">Refresh</a> 
  

Добавьте функцию Javascript, например :

 function reloadCaptcha(){
        var d = new Date();
        $("#captcha_image").attr("src", "jcaptcha?" d.getTime());
    }
  

Вам пришлось бы загрузить изображение и кнопку обновления в . Затем вы должны иметь возможность обновлять только iframe. Но я не знаю, как вы выполняете свою проверку таким образом.

Задайте идентификатор для тега img и разрешите ему вызывать функцию javascript:

 <img src="jcaptcha.jpg" id="captchaImage"/>
  

функция javascript:

 <script type="text/javascript">
    function refresh() 
    {
        var captchaImage=document.getElementById("captchaImage");
        captchaImage.src="jcaptcha.jpg";    
    }
</script>
  

это работает нормально, потому что я реализовал это в своем проекте, просто создайте одну кнопку, нажав на которую, она перейдет к следующему блоку кода, подобному тому, что вы делаете

 <script type="text/javascript">
function refresh() 
{
var image=document.getElementById("kaptchaImage");
image.src="<%=request.getContextPath()%>/kaptcha.jpg?" Math.floor(Math.random()*100)           
}
</script>