Пропадает модальное окно (modal) bootstrap3
Всем привет! Пришла беда откуда не ждали - время от времени (баг не постоянный) при вызове модального окна оно сразу же пропадает и страница обновляется. В Сети прочитал, что это из-за того, что подключены одинаковые библиотеки (bootstrap.min.js bootstrap.js) - оставил только bootstrap.min.js, но проблема осталась.
В "шапке" проекта подключаю: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Total Inventory</title> <!--BOOTSTRAP.MIN.CSS--> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!--STARTER-TEMPLATE.CSS--> <link href="../bootstrap/css/starter-template.css" rel="stylesheet"> <!--MOMENT--> <script src="../bootstrap/js/moment/moment-with-locales.min.js"></script> <!--USERS SCRIPTS--> <script src="/contain/js.js"></script> </head> ... ... ... <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="../bootstrap/js/jquery.min.js"></script> <script src="../bootstrap/js/jquery-ui.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> <!--script src="../bootstrap/js/jquery-ui-1.11.4.custom/jquery-ui.js"></script--> </body> Кто подскажет, в чем проблема? (ну кроме кривости рук? ))) ) |
А как окно вызывается? Код в студию
|
Kaha,
По идее, строки 29-31 стоило бы перенести выше строки 16 - сначала jquery, потом bootstrap, потом все остальное |
Прошу прощения за задержку с ответом, вот так вызываю окно:
... ... var modal_window = '\ <div id="myModalBox" class="modal fade">\ <div class="modal-dialog">\ <div class="modal-content">\ <!-- Заголовок модального окна -->\ <div class="modal-header">\ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>\ <h4 class="modal-title"><font color="red"><b>Возникли ошибки при заполнении формы!</b></font></h4>\ </div>\ <!-- Основное содержимое модального окна -->\ <div class="modal-body" id = "content_of_modal">\ <b>Вы не заполнили следующие обязательные поля:</b> '+err+'\ </div>\ <!-- Футер модального окна -->\ <div class="modal-footer">\ <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>\ <!--button type="button" class="btn btn-primary">Сохранить изменения</button-->\ </div>\ </div>\ </div>\ </div>\ '; if ( err !='' ){ document.getElementById("modal_window").innerHTML = modal_window; $('#myModalBox').modal('show'); } HTML: <body> <!--Модальное окно--> <div id = "modal_window"> </div> <!--Модальное окно/--> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Total Inventory</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#" onclick = "add()">Добавить</a></li> <li><a href="#" onclick = "edits()">Редактировать</a></li> <li><a href="#" onclick = "reports()">Отчеты</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container"> <div id = "add"></div> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="../bootstrap/js/jquery.min.js"></script> <script src="../bootstrap/js/jquery-ui.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> <!--script src="../bootstrap/js/jquery-ui-1.11.4.custom/jquery-ui.js"></script--> </body> |
Do you have any ideas?)
|
Откуда приходит err? Кстати, вместо
if ( err !='' ) Можно обойтись просто if(err) Ну и смысл помещать хтмл в строку тоже для меня загадка)) Но это все лирическое отступление, выложите часть, которая передает err |
Отследил когда пропадает модальное окно - каждый раз как только открывается новая вкладка с проектом, при вызове модального окна в первый раз - оно пропадает, после - все работает стабильно. err - глобальная переменная для хранения ошибок, вот код:
var err = ''; //переменная для вывода ошибок при проверке заполнения формы ... ... //функция проверяет заполненность поля и выделяет его красным в случае незаполненности function if_clear(field, error){ ... ... if ( field.value == '' ){ err = err+error; good_bad_field_arr.good_bad = 'bad'; DetectField(good_bad_field_arr); } else { good_bad_field_arr.good_bad = 'good'; DetectField(good_bad_field_arr); } } Я могу ошибаться, но, возможно дело в инициализации переменной? P.S. Я новенький в JS подскажите, что не так с хтмл строкой? как можно сделать по-другому? Буду рад научиться у гуру) |
Я не гуру, но если вкратце:
- Глобальные переменные - зло, забудьте о них; - Если err нет, то он должен быть undefined или null а не пустой строкой; - НазванияПеременныхВЯваскр иптеПишутсяКамелкейсом По поводу ХТМЛ в яваскрипте - не надо так. При ошибке вызывайте модальное окно с ошибкой, если очень хочется именно в яваскрипте - учите шаблонизаторы. В нынешнем виде засовывать ХТМЛ в строку - лишено всякого смысла В чем ошибка я хз, либо я плохо смотрю, либо в этих кусочках ее просто не видно. На скорую руку накатал пример валидации, если надо поменять что -то доки к плагину смотрите здесь: https://jqueryvalidation.org <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <title>JS Bin</title> </head> <body> <form action"/post.php" class="ajaxSend"> <div class="form-group"> <label for="exampleInputEmail1">Email</label> <input type="email" class="form-control" name="email" data-title="Заполните поле" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Имя</label> <input type="text" class="form-control" name="name" data-title="Заполните поле" placeholder="Имя"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <style> form{ width:300px; } </style> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script> //validation $(document).ready(function(){ function validateElement(el){ el.validate({ rules:{//правила для полей email:{ required:true, }, name:{ required:true } }, messages:{//сообщения при ошибке, оставляем пустыми name:{ required:'Поле обязательно для заполнения', }, email:{ required:'Поле обязательно для заполнения', email: 'Неверный формат заполнения почты' } }, submitHandler: function (form) { var $form = $(form); $.ajax({ type: 'POST', url: $form.attr('action'), data: $form.serialize(), }) .fail(function (response) { //действия на fail отправки }).success(function (response) { //действия на success отправки }).always(function(){ //действия в обоих случаях }); return false; } }) } $('.ajaxSend').each(function() { validateElement($(this)); }); }) </script> </body> </html> |
Спасибо огромное за помощь! Буду пробовать
|
Прошу прощения, что ввел в заблуждение, косяк вовсе не в инициализации переменной!
Форма при первой отправке (при нажатии на субмит) именно первый раз (дальше работает нормально) перегружается и пропадает: <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default" onClick="#">Сохранить</button> </div> Кто-нибудь сталкивался с подобным? |
Часовой пояс GMT +3, время: 09:57. |