Sweet alert 2 предопределяет контент вместо использования AJAX

Есть ли способ получить сладкую подачу предупреждений из предварительно определенного div или чего-то подобного?

В основном я хочу создать приятный модальный сигнал, который связывается с большим количеством информации, собранной из БД, но я хотел бы увидеть, есть ли какой-либо другой способ, кроме AJAX, для извлечения данных?

Например, я пишу приложение Laravel, есть ли способ предварительно написать div с клинком и всем моим контентом, а затем получить сладкое предупреждение, просто скопируйте div, когда он открывается, и отобразите его внутри одного из своих модальных окон?

Документация Sweet alert 2 здесь


javascript jquery ajax sweetalert2 sweetalert
person S_R    schedule 02.08.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Хорошо, я сам придумал простые решения, но я все еще открыт для других идей?

Я просто создал div в лезвии со всем содержимым, которое я хочу, и обернул его внутри div, который я назвал .sweetalert_template вот так

<div class="sweetalert_template">
   <span id="all_contacts">
     @foreach($user->contacts as $contact)
       <h4>{{$contact->name}}</h4>
       <p>{{$contact->telephone}}</p>
     @endforeach
   </span>
</div>

Затем я скрываю любые милые шаблоны предупреждений во всем приложении, как это

.sweetalert_template {
  position:fixed;
  top:5000px;
  left:5000px;
  visibility:hidden;
  display:none;
  z-index:-9999;
}

А затем просто захватите html при загрузке предупреждения.

swal({
    title: 'User Contacts',
    html: $('.sweetalert_template #all_contacts').html(),
    customClass: 'swal-logout',
    showCloseButton: true,
});

Это довольно простой способ достичь моей цели, и он избавляет от лишних ненужных вызовов AJAX.

person S_R    schedule 02.08.2018

arrow_upward
0
arrow_downward

Я думаю, что это типичный случай для ajax, но если вы действительно хотите вывести все контакты с веб-сайтом, вы можете попробовать поместить данные в массив объектов:

<script>
    // prepare the object array on server side
    var all_contacts = [
        @foreach($user->contacts as $contact)
            {name:"{{$contact->name}}", phone:"{{$contact->phone}}", email:"{{$contact->email}}"},
        @endforeach
    ];
    function showInfo(idx) {
        swal({
            type: 'info',
            title: 'Contact Information',
            html: all_contacts[idx].name + "<br/>" + all_contacts[idx].phone + "<br/>" + all_contacts[idx].email,
        })
    }
</script>

@foreach($user->contacts as $idx=>$contact)
   <span>{{$contact->name}}</span> <button onClick="showInfo({{$idx}})">More Info</button>
@endforeach

Итак, в первом цикле (внутри тега скрипта) вы заполняете переменную массива, а во втором цикле вы показываете таблицу с кнопкой «подробнее». Это очень простой пример - в конце вам придется позаботиться об экранировании символов, которые нарушают вашу переменную в первом цикле, и символов, которые могут нарушить вывод html в окне swal.

person Gerfried    schedule 02.08.2018
comment
Мне нравится ваша идея, но я думаю, что то, как я сейчас это делаю, проще :) Я могу собрать все это совершенно нормально в моем файле blade-сервера, а затем просто взять html. Спасибо за ваше предложение. - person S_R; 02.08.2018