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

这使用javascript

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

    }
    </script>

使用 id =“chart”在div图表上添加一个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>

Answer 2

我不知道你为什么要附加进度条而不是在html页面中编写进度条DIV并使用show或hide方法从你的函数中处理它。所以最后你不会遇到任何模板问题。

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

2 个答案: