标签: sweetalert

这是我的HTML代码我有两个输入按钮我想要显示甜蜜警报当用户点击任何按钮

<tr class="examples odd" id="UserId_1" role="row">
   <td class="sorting_1">1</td>
   <td>admin</td><td>Mohammad</td>
   <td>Farzin</td><td class="warning"><input type="button"
   value="Delete" class="sweet-5" id="btn_Delete1"></td>
</tr>
<tr class="examples even" id="UserId_5" role="row">
   <td class="sorting_1">2</td>
   <td>11</td><td>11</td>
   <td>11</td><td class="warning"><input type="button" value="Delete" class="sweet-5"
   id="btn_Delete5"></td>
</tr>   

脚本

$(document).ready(function () {
document.querySelector('td.warning input').onclick = function () {
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: 'btn-danger',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false
        },
     function (isConfirm) {
        if …

我有一个应用程序,其中javascript和html在很大程度上是分开的.我试图用javascript或jquery写一些东西,它将从html元素中提取所有数据属性,并将它们放入javascript函数的选项中,动态地.有很多选项,每次提到这个脚本时,都不会使用所有选项.

首先是一个例子,然后以后的方式展示我是如何做到的(半成功).

HTML:

<button data-behavior="sweetalert" data-title="Alert Title" data-text="Lorem ipsum dolar..." data-showCancelButton="true">Click Me</button>

使用Javascript:

sweetAlert({
    title: "Alert Title",
    text: "Lorem ipsum dolar...",
    showCancelButton: true,
});

直接向前吧？好的,现在让我们变得有趣并且动态地填充它.所以我想要的是能够在sweetAlert api中找到一个选项,然后能够简单地将它附加到我的html元素中data-attribute.这样前端人员就可以添加快速的html,而不需要脚本标签.

这是我到目前为止所做的实际上确实有效并给我适当的结果,除了需要非字符串的选项(例如布尔值).

$('[data-behavior="sweetalert"]').click(function() {
    attributes = $(this).data();
    delete attributes["behavior"];
    sweetAlert($.each(attributes, function(key, value) {
        key + ": " + value + ', '
    }));
});

所以这个功能正常工作,并正确地提取标题和描述.但是,它没有正确引入布尔选项.

有没有人知道如何改进这一点,以便我能够设置布尔选项(至少)和二次整数选项？

当然有人在那之前做过这种事情......提前谢谢!

基本上我有一个表单，您可以在其中添加用户。

<div class="container">
    <div><h1>Formulario para agregar Usuarios</h1></div>
  <form id='addForm' role="form" method="POST">
    <div class="form-group col-lg-6">

        <div class="form-group ">
            <label for="nombre">Nombre:</label>
            <input class="form-control" type="text" id="nombre" name="nombre" maxlength="15" placeholder="Ingrese su Nombre"/>
            <div id="nom" name="nom"></div>
        </div>
        <div class="form-group">
            <label for="apellido">Apellido:</label>            
            <input class="form-control" type="text" id="apellido" name="apellido" maxlength="15" placeholder="Ingrese su Apellido" />
            <div id="ape" name="ape"></div>
        </div>
        <div class="form-group">
            <label for="correo">Correo:</label>
            <input class="form-control" type="email" id="correo" name="correo" maxlength="30" placeholder="correo@ejemplo.cl"/>
            <div id="cor" name="cor"></div>
        </div>
        <div class="form-group">
            <label for="password">Contraseña:</label>            
            <input class="form-control" type="password" id="password" name="password" maxlength="15" placeholder="Ingrese una Contraseña (mínimo 6 …

我在sweetalert消息中显示倒计时时遇到问题.点击后我使用"带自动关闭计时器的消息".我希望倒计时在消息中,用户可以看到倒计时.

swal({  
    title: "Please w8 !",
    text: "Data loading...",
    timer: 10000,
    showConfirmButton: false 
});

我在sweetalert2中动态创建了文本框,如下所示:

swal({
    title: 'Enter Info',
    showCancelButton: true,
    html:   "<table>" +
                "<tr>" +
                    "<td>name</td>" +
                    "<td><input type='text' id='name'/></td>" +
                "</tr>"
                "<tr>" +
                    "<td>email</td>" +
                    "<td><input type='text' id='email'/></td>" +
                "</tr>"
            "</table>"
}).then(function(){
    // ajax
});

和jQuery函数一起监听文本框更改事件.

$(document).ready(function () { 
    <script type="text/javascript">
        $('#name').on('change', function(e) {
            console.log($(this).val());
        });
    </script>
});

但是在更改sweetalert2中的文本框值时不会触发事件.jQuery已正确加载,并且可以在sweetalert2模型之外的其他文本框上运行.我也尝试添加<script>...</script>后</table>在上面html:,但仍然没有运气.有人可以帮帮我吗？任何投入将不胜感激.

我正在使用 Sweet Alert 测试一种方法，以改进由 Javascript 警报方法与 laravel 框架发出的消息。

1 - 我下载了文件sweetalert.css 和sweetalert.min.js。

2 - 所以我从 app.blade.php 连接文件

<!-- Sweet Alert -->
<link href="{{ asset('/dist/css/sweetalert.css') }}" rel="stylesheet">
<!-- Sweet Alert -->
<script src="{{ asset('/dist/js/sweetalert.min.js') }}"></script>

3 - 我使用 Javascript 的 onclick 事件和以下 Sweet Alert 函数创建了删除按钮：

{!! Form::open(['method' => 'DELETE','route' => ['users.destroy', $user->id],'style'=>'display:inline']) !!}
<button onclick="
 swal({
  title: 'Esta seguro de realizar esta Acción?',
  text: 'Si procede este usuario será eliminado!',
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#DD6B55',
  confirmButtonText: 'Eliminar!',
  cancelButtonText: 'Cancelar',
  closeOnConfirm: …

在ASP.Net中工作时，我经常喜欢“您确定吗？” 单击诸如删除按钮之类的弹出窗口。这很容易做到：

<asp:Button runat="server" id="btnDelete" Text="Delete" onClientClick="return confirm('Are you sure?');" onClick="btnDelete_Click" />

我真的很喜欢SweetAlert2的确认对话框的样式和一般感觉，但是当我尝试以类似的方式集成它们时，它们似乎有些麻烦。有人可以向我解释如何根据单击的按钮返回SweetAlert2对话框结果以继续还是停止？

到目前为止，这是我得到的：

<asp:Button runat="server" id="btnDelete" Text="Delete" onClientClick="return sweetAlertConfirm();" onClick="btnDelete_Click" />

    function sweetAlertConfirm() {
        event.preventDefault();
        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
//      }).then(function() {
//          CONFIRM WAS CHOSEN
//      }, {function() {
//          CANCEL WAS CHOSEN
        });
    }

对话框出现，并且删除不被处理，当然，因为我当前正在执行操作，event.preventDefault()并且没有返回任何内容。我还注意到我可以使用promises，.then()在我的后面添加a swal({...})，但是我不确定在这种情况下该如何使用。

如果需要，我可以使用实际上触发代码隐藏方法的隐藏按钮，然后根据用户选择单击该隐藏按钮，以解决问题，但是我希望避免这种情况。

我有以下代码......用于甜蜜警报文本框

swal({
  title: 'Select an Item',
  input: 'select',
  inputOptions: listOfItemsForSelectBox,
  inputPlaceholder: 'Select country',
  showCancelButton: true,
  inputValidator: function (value) {
    return new Promise(function (resolve, reject) {
      if (value != null) {
        resolve()
      }
    })
  }
}).then(function (result) {
  swal({
    type: 'success',
    html: 'You selected: ' + result
  })
})

出于某种原因，它只是在“您选择的”部分返回“true”...

我想获取项目的 id。

我想创建类似于ajax示例的警报,但在确认之前允许外部点击关闭.用户点击确认后,我想禁止外部点击,直到操作完成.

allowOutsideClick像示例中那样将config变量设置为false将永远不允许外部单击,并且我没有在文档中看到以编程方式实现此行为的有效方法.

我可以将 inputType 设置为密码。支持的其他输入类型是什么..？

       swal({
            title: "Are you sure?",             
            type: "input",
            inputType: "checkbox",             
            showCancelButton: true,
            closeOnConfirm: true,                
        }, function () {
            swal("", "You did it", "success");
        });

swal 中不支持复选框 inputType。