When Button clicked, show Popover-Bootstrap and check checkbox is checked?

Question

I'm using Popover Bootstrap to show error or alert to users when them click button "Delete".

If users doesn't click checkbox and click button => Popover show error : "You should choose some records !"
If Users click checkbox and click button => Popover show alert :"Are you sure ?"

and i will call ajax to delete this records.

My code as :

<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>

How can i do that ?

Answer 1

<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>

Answer 2

<!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>

Answer 3

You can use SweetAlert it's more powerful and give you the opprtunity to execute your function. 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");
});

When Button clicked, show Popover-Bootstrap and check checkbox is checked?

Question

3 answers

solution1
1 ACCPTED 2016-07-20 10:01:04

solution2
1 2016-07-20 10:12:59

solution3
1 2016-07-20 11:14:58

When Button clicked, show Popover-Bootstrap and check checkbox is checked?

Question

3 answers

solution1 1 ACCPTED 2016-07-20 10:01:04

solution2 1 2016-07-20 10:12:59

solution3 1 2016-07-20 11:14:58

solution1
1 ACCPTED 2016-07-20 10:01:04

solution2
1 2016-07-20 10:12:59

solution3
1 2016-07-20 11:14:58