在另一个 <script> 标签中打开 Jquery-ui 对话框答案

【问题标题】：Open Jquery-ui dialog in another <script> tag在另一个 <script> 标签中打开 Jquery-ui 对话框
【发布时间】：2018-03-24 03:12:58
【问题描述】：

是否可以在不同的“脚本”标签中初始化和打开 jquery-ui 对话框，如下所示：

规范：使用 EJS（Nodejs express 模板）

<script>
    $(document).ready(function() {

        $("#loginfailed").dialog({
            width: 500, autoOpen: false, resizable: false, draggable: false,
            modal: false 
        });


    });

</script>

//some html

 <% if (lengthQ1 == 0 && lengthQ2 == 0) { %>
     <script>
          $( "#loginfailed" ).text("User not exist");
         $( "#loginfailed" ).dialog("open");  
     </script>
    <% } else if (lengthQ1  == null  && lengthQ2 == null) { %>
     <script>
     </script>
    <% } else if (lengthQ1  > 0  || lengthQ2 > 0 && PasswordMatch != true) { %>
     <script>
          $( "#loginfailed" ).text("Wrong password");
         $( "#loginfailed" ).dialog("open");  
     </script>
    <% } %>

实际上，对话框没有显示，我不明白为什么。当我移动时

$( "#loginfailed" ).dialog("open");

在 document.ready 函数中，它会在页面加载时向我显示对话框。

假设 if 语句及其中的所有内容都可以正常工作（用简单的对话框替换时

alert("wrong password"`)

它的工作原理

【问题讨论】：

可以的。我建议在对话框中定义一个常量变量，以便您可以在另一个脚本块中引用或重新初始化它。
就个人而言，如果可能的话，我会将我所有的 JS 保存在一个脚本块中。您是否有理由分解脚本块？

标签： javascript jquery jquery-ui jquery-ui-dialog ejs

【解决方案1】：

您不能在块之间传递变量，但可以访问对话框。您可以执行以下操作（假设初始脚本块位于头部）：

<script>
$(function() {
  $("#loginFailed").dialog({
    width: 500,
    autoOpen: false,
    resizable: false,
    draggable: false,
    modal: false 
  });
});
</script>
//some html
<% if (lengthQ1 == 0 && lengthQ2 == 0) { %>
  <script>
  $("#loginFailed").text("User not exist.").dialog("instance").open();  
  </script>
<% } else if (lengthQ1  == null  && lengthQ2 == null) { %>
  <script>
  // Do Nothing?
  </script>
<% } else if (lengthQ1  > 0  || lengthQ2 > 0 && PasswordMatch != true) { %>
  <script>
  $("#loginFailed").text("Wrong password").dialog("instance").open();  
  </script>
<% } %>

工作示例：https://jsfiddle.net/Twisty/drL16vyc/

在底层，每个小部件的每个实例都使用jQuery.data() 存储在元素上。要检索实例对象，请使用小部件的全名作为键调用jQuery.data()。

在 jQuery UI 1.11 中，新的 instance() 方法将使这个过程变得更加容易。

$( ".selector" ).dialog( "instance" ).close();

现在，从字里行间看，我假设您有某种登录表单，并且正在将数据发回给自己以进行身份验证。为什么不通过 AJAX 做到这一点？

<script>
var $lfDiag;
$(function() {
  $lfDiag = $("#loginFailed").dialog({
    width: 500,
    autoOpen: false,
    resizable: false,
    draggable: false,
    modal: false 
  });
  $("form").submit(function(e){
    e.preventDefault();
    var url = $(this).attr("action");
    var myFormData = {
      api: "json"
    };
    var loginFailed = true;
    $(this).find("input").each(function(ind, el){
      myFormData[$(el).attr("id")] = $(el).val();
    });
    $.post(url, myFormData, function(results){
      if(results.error.length){
        $lfDiag.text(results.error).dialog("open");
      } else {
        loginFailed = false;
      }
    });
    return !loginFailed;
  });
});
</script>

现在此设置需要进行一些调整。您将需要一个条件表单处理程序，该处理程序可以针对您的数据库验证提交的详细信息。条件是如果api 设置为json，它将发回json 数据。这可能是：

{
  success: true
}

或者：

{
  success: false,
  error: "User does not exist."
}

如果发布的数据不包括api 数据，那么脚本应该像平常一样处理登录。我假设这是在登录用户并设置一些会话变量。

【讨论】：