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

Question

是否可以在不同的 "script" 标记中初始化和打开 jquery-ui 对话框，如下所示：

Specification : Working with EJS (Nodejs express templates)

<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"`)

它的工作

Answer 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/

Under the hoods, every instance of every widget is stored on the element using jQuery.data(). To retrieve the instance object, call jQuery.data() using the widget's full name as the key.

In jQuery UI 1.11, the new instance() method will make this process even easier.

$( ".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 数据，那么脚本应该像正常一样处理登录。我假设这是让用户登录并设置一些会话变量。

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

Open Jquery-ui dialog in another <script> tag

javascript

jquery

jquery-ui

jquery-ui-dialog

ejs