Имеется проект в котором использовались формы bootstrap 3.
Нужно переделать под sweetalert2. Вопрос как выводить данные в код sweetalert2, данных переменной? Что бы не писать огромные участки кода через
html:
'You can use <b>bold text</b>, ' +
'<a href="//sweetalert2.github.io">links</a> ' +
Конструкция сейчас следующая:
$(document).ready(function() {
$('.user-email').on('click', function(){
$(this).closest('.popup-regstration-buttons').slideToggle();
$('form[name=form-users-register]').slideToggle();
return false;
});
$('form[name=form-users-forget]').submit(function() {
$.post('/login/forget/save', {user_email: $(this).find('input').val(), }, function(r) {
$('.modal-content').html(r);
})
return false;
});
$('form[name=form-users-login]').bootstrapValidator({
message: 'Проверьте форму на наличие ошибок',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitButtons: 'input[type=submit]',
submitHandler: null,
live: 'enabled',
fields: {
'login': {
enabled: true,
validators: {
notEmpty: {
message: '<div class="login__error">Введите e-mail<div>'
},
emailAddress: {
message: '<div class="login__error">Указан неверный адрес почты<div>'
}
}
},
'password': {
enabled: true,
validators: {
notEmpty: {
message: '<div class="login__error">Введите пароль</div>'
}
}
}
}
});
$('form[name=form-users-forget]').bootstrapValidator({
message: 'Проверьте форму на наличие ошибок',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitButtons: 'input[type=submit]',
submitHandler: null,
live: 'enabled',
fields: {
'user_email': {
enabled: true,
validators: {
notEmpty: {
message: '<div class="login__error">Введите e-mail</div>'
},
emailAddress: {
message: '<div class="login__error">Указан неверный адрес почты</div>'
}
}
},
}
});
{% if login_data|length %}
$('form[name=form-users-login]').submit();
{% endif %}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- end cdn css -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- end cdn js -->
<div class="login-box">
<div class="login-logo">
<a href="/"><b>Новый</b>Проект</a>
</div>
<!-- /.login-logo -->
<div class="card">
<li class="Login_exit"><a href="{{ frontend }}/login" data-toggle="modal" data-target="#myModal">Эта кнопка вызывает старый попап (и в нем генерируется контент)</a></li>
<div class="card-body login-card-body">
<p class="login-box-msg">Зарегистрируйтесь сейчас</p>
<form action="{{ app }}login-2/process2" method="POST" name="form-users-login" class="slide-form">
<div class="input-group mb-3 popup-regstration-form form-group">
<input type="text" class="form-control" name="login" value="{{ login_data.login }}" placeholder="Email">
<span name="login__error"></span>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div class="input-group form-group mb-3">
<input type="password" name="password" class="form-control" placeholder="Password">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<input type="checkbox" id="remember">
<label for="remember">
Запомните меня
</label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<input type="submit" class="btn btn-block btn-primary" id="form-users-login-submit" value="Войти">
</div>
<!-- /.col -->
</div>
<!-- кнопки управления -->
<p class="mb-1">
<a href="#" onclick="$('.slide-form').slideToggle(); return true;">Забыли пароль?</a>
</p>
<p class="mb-0">
<a href="register.html" class="text-center">Зарегистрироваться сейчас</a>
</p>
</form>
<!-- форма восстановления пароля -->
<form action="{{ app }}login/forget/save" method="POST" name="form-users-forget" style="display:none" class="slide-form">
<div class="popup-forget-form">
<div class="input-group mb-3 form-group">
<input type="text" class="form-control" name="user_email" value="" placeholder="E-mail">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="icheck-primary">
<a href="#" onclick="$('.slide-form').slideToggle(); return true;" class="btn btn-block btn-danger" data-dismiss="modal">Отменить</a>
</div>
</div>
<!-- /.col -->
<div class="col-8">
<input type="submit" class="btn btn-block btn-primary" id="form-users-login-submit" value="Сменить пароль">
</div>
<!-- /.col -->
</div>
</div>
</form>
</div>
<!-- /.login-card-body -->
</div>
</div>
<!-- /.login-box -->
<!-- код модального окна который находиться у меня в index.tpl -->
<!-- сюда и транслируются данные -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<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">Загрузка..</h4>
</div>
<div class="modal-body">
<div class="te"></div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Как мне реализовать вставку этой формы в sweetalert2? Ниже код его дефолтного попапа.
<script>
$(document).on('click', '#fire', function(e) {
Swal.fire({
title: '<strong>HTML <u>example</u></strong>',
type: 'info',
html:
'You can use <b>bold text</b>, ' +
'<a href="//sweetalert2.github.io">links</a> ' +
'and other HTML tags',
showCloseButton: true,
showCancelButton: true,
focusConfirm: false,
confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Great!',
confirmButtonAriaLabel: 'Thumbs up, great!',
cancelButtonText:
'<i class="fa fa-thumbs-down"></i>',
cancelButtonAriaLabel: 'Thumbs down',
})
});
</script>
Если, сформулировано не правильно, буду рад критике и исправлю ошибки. Спасибо
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Читал, что массив в качестве аргумента в параметр другой функции работает так: типо массив громоздкий, и поэтому в параметр другой функции...
Знаю, вопрос для подавляющего большинства травиальныйНо я уже не вижу ошибки