Sweet alert 2 预定义内容而不是使用 AJAX

Question

有没有办法让预定义的 div 或类似的东西发出甜蜜的警报？

基本上我想创建一个甜蜜的警报模式来联系从数据库收集的大量信息，但我想看看除了 AJAX 之外是否还有其他方法来获取数据？

例如，我正在编写一个 Laravel 应用程序，有没有办法用刀片和我的所有内容预先编写一个 div，然后发出甜蜜警报，只需在它打开时复制 div 并将其显示在其中一个模态？

Sweet alert 2 文档here

Answer 1

好的，我自己想出了一个简单的解决方案，但我仍然对其他想法持开放态度？

我只是在 Blade 中创建了一个包含我想要的所有内容的 div，并将其包装在一个我称为 .sweetalert_template 的 div 中

<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 调用。

Answer 2

我认为这是 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

所以在第一个循环中（在脚本标签内）你填充你的数组变量，在第二个循环中你用“更多信息”按钮显示表格。 这是一个非常基本的示例 - 最后，您必须注意转义在第一个循环中破坏变量的字符，以及可能破坏 swal 窗口中的 html 输出的字符。