У меня есть код ajax, который работает правильно и дает желаемый результат. Я хочу изменить этот код и хочу, чтобы при получении ответа от ajax всплывающее / модальное поле должно быть открыто.
Я могу открыть всплывающее окно / модальное окно одним нажатием кнопки
<!-- 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> но не знаю, как открыть его автоматически в ajax.
вот мой код ajax
$.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 !'); } });
кто-нибудь может рассказать мне, как это можно сделать
Вы можете использовать $("#bsModal3").modal('show'); внутри вашего результата.
Подробнее о модальных методах
$.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>
Попробуйте включить этот внутренний обратный вызов:
success: function (returndata) { if (returndata[4] === 1) { $('#bsModal3').modal(); // this } else { // other code } },
Пожалуйста, сделайте это с помощью Ajax Call, модальный вызов в ответе ajax
$.ajax({ type: 'post', url: 'test2.php', dataType: 'json', data: { txt: txtbox, hidden: hiddenTxt }, cache: false, success: function (returndata) { if (returndata[4] === 1) { $('#bsModal3').modal(); // Please right this in your Code } else { // other code } }, error: function () { console.error('Failed to process ajax !'); } });