Search code examples
javascriptjqueryajaxtwitter-bootstrapbootstrap-popover

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

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 ?

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