0

Я использую Popover Bootstrap, чтобы показать ошибку или предупреждение пользователям, когда они нажимают кнопку «Удалить».Когда кнопка нажата, установите флажок Поповер-Bootstrap и установите флажок?

  • Если пользователи не нажимают кнопку и не нажимают кнопку => Ошибка отображения Popover: «Вы должны выбрать некоторые записи!».
  • Если пользователи установили флажок и нажмите кнопку => Popover show alert: "Вы уверены?"

и я позвоню ajax, чтобы удалить эти записи.

Мой код, как:

<script> 

$(document).ready(function(){ 
if('#btn-delete').click(function(){ 
var isChecked = $('#ckbox').attr('checked') ? true : false; 
if(isChecked==false) 
{ 
$(this).popover({ 
title:'Alert', 
content:'You should choose some records !', 
html:true, 
trigger:'focus' 
return false; 
}) 
else if(isChecked==true) 
{ 
$(this).popover({ 
title:'Alert', 
content:'Are you sure ?', 
html:true, 
// in here , i want to add button in popover like "Ok" , and then call AJAX 
} 
} 
}) 
    }); 


</script> 

<html> 
<body> 
<div class="row"> 
<button type="button" id="btn-delete">Delete</button> 

</div> 
<table> 
<thead> 
<tr> 
<th><input type="checkbox" id="checkall"/></th> 
<th>ProductId</th> 
<th>ProductName</th> 
<th>ProductCat</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td><input type="checkbox" id="ckbox"/></td> 
<td>1</td> 
<td>prod001</td> 
<td>5</td> 
</tr> 
<tr> 
<td>2</td> 
<td>prod002</td> 
<td>4</td> 
</tr> 
<tr> 
<td>3</td> 
<td>prod003</td> 
<td>7</td> 
</tr> 
</tbody> 

</table> 

</body> 
</html> 

Как я могу это сделать?

+0

Отправить код, что вы пытались таким образом я могу редактировать мой ответ соответственно – mean

+0

http://stackoverflow.com/questions/12333585/twitter-bootstrappopovers-are-not-showing-up-on- first-click-but-show-up-on-seco – Ranjan

+0

http://stackoverflow.com/questions/17963329/bootstrap-popover-works-after-one-click-javascript – Ranjan

ответ

2
<script> 

$(document).ready(function(){ 
if('#btn-delete').click(function(){ 
var isChecked = $('#ckbox').attr('checked') ? true : false; 
if(isChecked==false) 
{ 
$(this).popover({ 
title:'Alert', 
content:'You should choose some records !', 
html:true, 
trigger:'focus' 
return false; 
}) 
else if(isChecked==true) 
{ 
$(this).popover({ 
title:'Alert', 
content:'Are you sure ?', 
html:true, 
if (confirm('Are you sure you want to delete this?')) { 
     $.ajax({ 
      url: 'myUrl', 
      type: "POST", 
      data: { 
       // data stuff here 
      }, 
      success: function() { 
       // does some stuff here... 
      } 
     }); 
    } 
}) 
} 
} 

    }); 


</script> 
+0

Пожалуйста, проверьте мой вопрос, я просто отредактировал его. –

+0

Я понял. Спасибо ! –

+0

Пожалуйста, примите и, как и ан, если это вам помогло !!!! – mean

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
    body 
    { 
     font-family: Arial; 
     font-size: 10pt; 
    } 
</style> 
</head> 
<body> 
<label for="chkPassport"> 
    <input type="checkbox" id="chkPassport" /> 
    Do you have Passport?</label> 
<br /> 
<br /> 
<input type="button" id="btnCheck" value="Check" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#btnCheck").click(function() { 
      var isChecked = $("#chkPassport").is(":checked"); 
      if (isChecked) { 
       alert("CheckBox checked."); 
      } else { 
       alert("CheckBox not checked."); 
      } 
     }); 
    }); 
</script> 
</body> 
</html> 
+0

Если вы хотите, чтобы это было в JavaScript, дайте мне знать, я изменю его. – Ranjan

+0

http://lab.artlung.com/validate-checkbox/ – Ranjan

+0

Я просто редактирую свой текст, чтобы очистить свой вопрос. Вы можете проверить это. –

1

Вы можете использовать SweetAlert это более мощный и дать вам opprtunity выполнить вашу функцию. Exemple:

swal({ 
    title: "Are you sure?", 
    text: "You will not be able to recover this imaginary file!", 
    type: "warning", 
    showCancelButton: true, 
    confirmButtonColor: "#DD6B55", 
    confirmButtonText: "Yes, delete it!", 
    closeOnConfirm: false 
}, function() { 
    /*YOUR FUNCTION HERE*/ 
    swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
}); 
Смежные вопросы