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

Posted 2023-05-08

【中文标题】在另一个 <script> 标签中打开 Jquery-ui 对话框

【英文标题】：Open Jquery-ui dialog in another <script> tag

【发布时间】：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 保存在一个脚本块中。您是否有理由分解脚本块？

【参考方案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/

更多详情：https://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/

在底层，每个小部件的每个实例都使用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 数据，那么脚本应该像平常一样处理登录。我假设这是在登录用户并设置一些会话变量。