sweetalert2 вывод данных переменной

102
25 августа 2021, 04:00

Имеется проект в котором использовались формы 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">&times;</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>

Если, сформулировано не правильно, буду рад критике и исправлю ошибки. Спасибо

READ ALSO
Почему delete не удаляет свойство?

Почему delete не удаляет свойство?

Но когда вывожу в консоль

153
Помогите с пониманием работы указателя и массива

Помогите с пониманием работы указателя и массива

Читал, что массив в качестве аргумента в параметр другой функции работает так: типо массив громоздкий, и поэтому в параметр другой функции...

78
Почему всегда выводится 0?

Почему всегда выводится 0?

Почему всегда выводится 0?

134
Забить столбцы и строки значениями

Забить столбцы и строки значениями

Знаю, вопрос для подавляющего большинства травиальныйНо я уже не вижу ошибки

112