Пропадает модальное окно (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>
Кто-нибудь сталкивался с подобным? |
Вопрос решен:
action="javascript:void(null);":) |
| Часовой пояс GMT +3, время: 20:42. |