使用jQuery发送电子邮件时显示进度条ajax

Question

我需要发送一个新的密码给用户的电子邮件。要做到这一点，我做了一个模式登录页面，当我点击“忘记密码”按钮时会出现。

这里是我的模态代码：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
     <div class="modal-content col-md-8 col-md-offset-2"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title" id="myModalLabel"></h4> 
      </div> 
      <div class="modal-body"> 
      <div id="alert_lupa"> 

      </div> 
      <form action="javascript:lupa();" id="formLupa" name="formLupa" method="post" autocomplete="off"> 
       <div class="form-group"> 
       <input class="form-control" placeholder="Email" name="email" type="text"> 
       <span class="help-block"></span> 
       </div> 
      </form> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-primary btn-sm" id="btnKirim" onclick="lupa()">Kirim</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
     </div> 
     <!-- /.modal-dialog --> 
    </div> 

然后如果我点击 “kirim” 按钮，它将运行 “LUPA（）” 函数，这里是代码：

function lupa(){ 
    $("#alert_lupa").html('<div class="progress progress-striped active">\ 
     <div class="progress-bar progress-bar-success" role="progressbar" style="width: 100%">\ 
     </div>\ 
    </div>').fadeIn(); 
    $('#btnKirim').text('Mengirim..'); 
    $('#btnKirim').attr('disabled',true); 
    $.ajax({ 
     url:"<?=site_url('login/validasiLupa')?>", 
     type: "POST", 
     data: $('#formLupa').serialize(), 
     dataType:"JSON", 
     success:function(data){ 
     $("#alert_lupa").html(null); 
     if (data.valid===false) { 
      for (var i = data.namafield.length; i >= 0; i--) 
       { 
       $('[name="'+data.namafield[i]+'"]').focus(); 
       $('[name="'+data.namafield[i]+'"]').parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class 
       $('[name="'+data.namafield[i]+'"]').next().text(data.texterror[i]); 
       } 
     }else if(data.valid===true){ 

      if (data.kirim===true) { 
      var div = "#alert_lupa"; 
      var message = "Password Baru Telah Dikirim ke Alamat Email Anda"; 
      emailSent(div,message); 
      $('#email').val(null); 
      }else if (data.kirim===false) { 
      var div = "#alert_lupa"; 
      var message = "Alamat Email Tidak Ditemukan"; 
      dataAlert(div,message); 
      $('#email').val(null); 
      $('#email').focus(); 
      } 
     } 
     $('#btnKirim').text('Kirim'); 
     $('#btnKirim').attr('disabled',false); 
     }, 
     error: function (jqXHR, textStatus, errorThrown) 
     { 
      alert('Error adding/update data'); 
     } 
    }) 
    } 

为你可以看到，“LUPA”功能访问“validasiLupa”功能在我的控制器，它的代码是：

public function validasiLupa(){ 
$this->form_validation->set_message($this->uangmuka->message()); 
$this->form_validation->set_error_delimiters('', ''); 

$this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email|custom_email|max_length[100]'); 

$data = array(); 
$data['valid']=TRUE; 

if ($this->form_validation->run() == FALSE) 
{ 
    $data['namafield']=array(); 
    $data['texterror']=array(); 
    $data['valid']=FALSE; 
    if (form_error('email')) { 
    $data['namafield'][]='email'; 
    $data['texterror'][]=form_error('email'); 
    } 
} 

//verifikasiLupa 
$mail = $this->input->post('email'); 
$pwd = $this->uangmuka->generatePwd(); 

    $anggota = $this->crud_m->selectX("anggota","email_anggota = '$mail'")->row(); 
    if (isset($anggota)) { 
    $pwdbaru = array("password_anggota"=>md5($pwd)); 
     $this->crud_m->update_data('anggota',$pwdbaru,"nik_anggota=$anggota->nik_anggota"); 

    $this->sendEmail($mail,$pwd); 

    $data['kirim']=TRUE; 
    // $data['load']=FALSE; 
    }else { 
     $data['kirim']=FALSE; 
    // $data['load']=FALSE; 
    } 
echo json_encode($data); 

}

到目前为止，我找到一种方法来显示进度条，但它的宽度是静态的。有没有什么方法可以使进度条宽度动态增加？

Answer 1

我不知道你为什么追加进度条而不是做在html页面自己写进度条DIV，并使用显示或隐藏方法从你的函数中处理它。所以最后你不会对模板有任何问题。

Answer 2

这种利用javascript

<script> 
    window.onload=function(){ 
     var elem = document.getElementById('chart'); 
     elem.style.width = 70 + "%"; 

    } 
    </script> 

您的DIV图表上添加一个ID与ID = “图表”，它将作品 看到下面一个简单的例子：

<!DOCTYPE html> 
 
     <html lang="en"> 
 
     <head> 
 
      <title>Bootstrap Example</title> 
 
      <meta charset="utf-8"> 
 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
     </head> 
 
     <body> 
 
     <script> 
 
      window.onload=function(){ 
 
       var elem = document.getElementById('chart'); 
 
       elem.style.width = 70 + "%"; 
 
     
 
      } 
 
      </script> 
 
     <div class="container"> 
 
      <h2>Basic Progress Bar</h2> 
 
      <div class="progress"> 
 
      <div class="progress-bar" role="progressbar" id="chart" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"> 
 
       <span class="sr-only">70% Complete</span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     </body> 
 
     </html>