i have a ajax code that works properly and gives the desired result. I want to modify this code and want that when a reply is received from ajax a popup/modal box should get opened.
I am able to open popup/modal box on a click of a button
<!-- Button trigger modal --> <button class="btn btn-primary" data-toggle="modal" data-target="#bsModal3"> Small Modal </button> <!-- Modal --> <div class="modal fade" id="bsModal3" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="mySmallModalLabel">Modal title</h4> </div> <div class="modal-body"> Your content goes here... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
but don’t know how to open it automatically within ajax.
here is my ajax code
$.ajax({ type: 'post', url: 'test2.php', dataType: 'json', data: { txt: txtbox, hidden: hiddenTxt }, cache: false, success: function (returndata) { if (returndata[4] === 1) { // want to load a popup box here } else { // other code } }, error: function () { console.error('Failed to process ajax !'); } });
can anyone please tell me how it can be done
Advertisement
Answer
You can use $("#bsModal3").modal('show');
inside your result.
See more about modal methods
$.ajax({ type: 'post', url: 'test2.php', dataType: 'json', data: { txt: txtbox, hidden: hiddenTxt }, cache: false, success: function(returndata) { if (returndata[4] === 1) { $("#bsModal3").modal('show'); } else { // other code } }, error: function() { console.error('Failed to process ajax !'); } });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- Modal --> <div class="modal fade" id="bsModal3" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="mySmallModalLabel">Modal title</h4> </div> <div class="modal-body"> Your content goes here... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>