jeudi 10 août 2017

Refresh captcha image jquery codeigniter

I have problem with my refresh captcha button, it just work once when I reload the page. I dont know if i wrong or if I missed something else.

I try to refresh the captcha with jquery because more efficiently.

This is piece of my code :

controller

public function refresh_login(){
    // Captcha configuration
    $config = array(
        'img_path'      => 'captcha_images/',
        'img_url'       => base_url().'captcha_images/',
        'img_width'     => '100',
        'img_height'    => '30',
        'word_length'   => '4',
        'font_size'     => '16'
    );
    $captcha = create_captcha($config);

    // Unset previous captcha and store new captcha word
    $this->session->unset_userdata('captchaCode');
    $this->session->set_userdata('captchaCode',$captcha['word']);

    // Display captcha image
    echo $captcha['image'];
}

jquery

$( document ).ready( function () {
  var base_url = '<?php echo base_url(); ?>';
     $('.reload-captcha').click(function(event){
         event.preventDefault();
         $.ajax({
             url:base_url+'http://ift.tt/2uLT1xT',
             success:function(data){
                 $('.captcha-img').replaceWith(data);
             }
         });            
      });

view

<form action="<?php echo base_url(); ?>http://ift.tt/2utYEFI" id="login-form" method="post">
  <div class="form-group has-feedback">
    <input type="text" class="form-control" placeholder="Username" id="username" name="username" required>
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
  <div class="form-group has-feedback">
    <input type="password" class="form-control" placeholder="Password" id="password" name="password" required>
    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
  </div>
  <div class="form-group">
    <p id="captImg" class="captcha-img"><?php echo $captchaImg; ?></p>
    <input type="text" class="form-control" name="captcha" placeholder="Captcha" style="margin-bottom: 5px"/>
    <a href="#" class="reload-captcha refreshCaptcha btn btn-info btn-sm" ><i class="glyphicon glyphicon-refresh"></i></a>
  </div>
  <div class="row">
    <!-- /.col -->
    <div class="col-xs-8">
          <label><a href="#"><u>Forgot your password?</u></a></label>
    </div>
    <div class="col-xs-4 pull-right">
      <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
    </div>
    <!-- /.col -->
  </div>
</form>




Aucun commentaire:

Enregistrer un commentaire