我需要向用户的电子邮件发送新密码。要做到这一点,我在登录页面上制作了一个模态,当我点击“忘记密码”按钮时会出现。
这是我的模态代码:
<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">×</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);
}
到目前为止,我找到了一种显示进度条的方法,但它的宽度是静态的。是否有任何方法可以使进度条宽度动态增加?
答案 0 :(得分: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>
答案 1 :(得分:-1)
我不知道你为什么要附加进度条而不是在html页面中编写进度条DIV并使用show或hide方法从你的函数中处理它。所以最后你不会遇到任何模板问题。