0

キャプチャ イメージの横にリロード ボタンを配置して、codeigniter の jquery でリロードします。私はそれに対する解決策を見つけるためにネットを検索しましたが、私が見つけたものはすべて私を混乱させました.

これは私のコントローラーです：

function create_captcha()
{                                
    $expiration = time()-300; // Two hour limit
    $this->db->query("DELETE FROM captcha WHERE captcha_time < ".$expiration);
    $vals = array(
                //'word'         => 'Random word',
                'word_length' => 4,
                'img_path' => './uploads/captcha/',
                'img_url' => base_url().'uploads/captcha/',
                'font_path' => './system/fonts/texb.ttf',
                'img_width' => '110',
                'img_height' => '30',
                'expiration' => '3600'
            );

    $cap = create_captcha($vals);

    //puts in the db
    $captchadata = array(
                'captcha_id'    => '',
                'captcha_time'  => $cap['time'],
                'ip_address'    => $this->input->ip_address(),
                'word'          => $cap['word']
            );

    $query = $this->db->insert_string('captcha', $captchadata);
    $this->db->query($query);

    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') echo $cap['image'];
    else return $cap['image'];

これが私の見解です：

<div class="captcha-area">
    <? echo form_input('captcha', '', 'class="field text captcha"')?>
    <div id="cap-img">
        <? echo $image;?>
    </div>
    <a title="reload" class="reload-captcha" href="#"><img src="<? echo base_url(); ?>images/reload.png" /></a>                                
    <div class="clear"></div>
 </div>
 <script>
      $(function(){
          var base_url = '<?php echo base_url(); ?>';
          $('.reload-captcha').click(function(event){
              event.preventDefault();
              $('.captcha-img').attr('src', base_url+'dashboard/create_captcha?'+Math.random());
          });
       });
 </script>

編集：

これはサイトを読み込んだ後のソースコードです

<div class="captcha-area">
   <input type="text" name="captcha" value="" class="field text captcha">
   <div id="cap-img">
       <img src="http://example.com/uploads/captcha/1382346264.1026.jpg" width="110" height="30" class="captcha-img" style="border:0;" alt=" ">
   </div>
   <a title="reload" class="reload-captcha" href="#"><img src="http://example.com/images/reload.png"></a>                                
   <div class="clear"></div>
</div>

リロードボタンをクリックすると、src属性が次のように変更されます。

<img src="http://example.com/dashboard/create_captcha?0.8049291325733066" width="110" height="30" class="captcha-img" style="border:0;" alt=" ">
4

3 に答える 3

2

your を追加してlikecontroller nameを使用します。ajax

$(function(){
    var base_url = '<?php echo base_url(); ?>';
    $('.reload-captcha').click(function(event){
        event.preventDefault();
        $.ajax({
           url:base_url+'dashboard/create_captcha?'+Math.random(),
           success:function(data){
              $('.captcha-img').attr('src', data);
           }
        });            
    });
});
于 2013-10-21T10:41:15.177 に答える
-1

Ruhan Kumar のコードを少し変更して、満足のいくコードを取得できました。

<script>
     $(function(){
         var base_url = '<?php echo base_url(); ?>';
         $('.reload-captcha').click(function(event){
             event.preventDefault();
             $.ajax({
                 url:base_url+'admin/dashboard/create_captcha',
                 success:function(data){
                     $('.captcha-img').replaceWith(data);
                 }
             });            
          });
      });
</script>
于 2013-10-21T11:37:53.427 に答える