javascript - Bootstrap 3 : add confirm modal box for jQuery Inline delete row -
javascript - Bootstrap 3 : add confirm modal box for jQuery Inline delete row -
i have jquery
function delete row info mysql
. worked jquery confirm
, need add together bootstrap 3
modal box
confirm.
js:
function deletebox(id){ if (confirm("are sure want delete record?")) { var datastring = 'id='+ id; $("#flash_"+id).show(); $("#flash_"+id).fadein(400).html('<img src="image/loading.gif" /> '); $.ajax({ type: "post", url: "delete.php", data: datastring, cache: false, success: function(result){ if(result){ $("#flash_"+id).hide(); // if info delete if(result=='success'){ //check random no, animated type of effect var randnum=math.floor((math.random()*100)+1); if(randnum % 2==0){ // delete slide effect $("#list_"+id).slideup(1000); }else{ // hide info $("#list_"+id).hide(500); } }else{ var errormessage=result.substring(position+2); alert(errormessage); } } } }); } }
html:
<a href="javascript:void()"><img alt="delete" title="delete" width="20" src="image/delete.jpg" onclick=deletebox("1") border="0"></a>
how can add together bootstrap 3 confirm modal box function?!
obviously should implement modal box in html code. modal should have 2 buttons (ok
, cancel
) unique id
attributes (probably within of modal-footer
div)
# modal code around... <div class="modal-footer"> <button type="button" class="btn btn-danger" id="btndeleteyes" href="#">yes</button> <button type="button" class="btn btn-default" data-dismiss="modal">no</button> </div> # ...
clicking on btndeleteyes
should trigger inner logics:
$('#btndeleteyes').click(function () { var datastring = 'id='+ id; $("#flash_"+id).show(); $("#flash_"+id).fadein(400).html('<img src="image/loading.gif" /> '); # here goes logics ajax query , on # ... # may want hide modal box @ point });
instead of implementing scratch seek bootbox.js uses bootstrap modals create dialog boxes. release necessity of writing modals html code , implementing callbacks hands.
here code like:
bootbox.dialog({ message: "are sure want delete record?", title: "confirm choice", buttons: { confirmation: { label: "yes, delete it", classname: "btn-success", callback: function() { var datastring = 'id='+ id; $("#flash_"+id).show(); $("#flash_"+id).fadein(400).html('<img src="image/loading.gif" /> '); # here goes logics ajax query , on # ... } }, refuse: { label: "no, leave alive", }, } });
javascript jquery twitter-bootstrap bootstrap-modal
Comments
Post a Comment