Question

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

＆＃xA;＆＃xA;

＆＃xA;
规范：使用EJS（Nodejs表达模板）
＆＃xA;

＆＃xA;＆＃xA;

 ＆lt; script＆gt;＆＃xA; $（document）.ready（function（）{＆＃xA;＆＃xA; $（“＃loginfailed”）。dialog（{＆＃xA; width：500，autoOpen：false，resizable：false，draggable：false， ＆＃xA; modal：false＆＃xA;}）;＆＃xA;＆＃xA;＆＃xA;}）;＆＃xA;＆＃xA;＆lt; / script＆gt;＆＃xA;＆＃xA; //一些html＆＃xA;＆＃xA; ＆lt;％if（lengthQ1 == 0＆amp;＆amp; lengthQ2 == 0）{％＆gt;＆＃xA; ＆LT;脚本＆GT;＆＃XA; $（“＃loginFailed”）。text（“用户不存在”）;＆＃xA; $（“＃loginFailed”）。dialog（“open”）; ＆＃XA; ＆LT; /脚本＆GT;＆＃XA; ＆lt;％} else if（lengthQ1 == null＆amp;＆amp; lengthQ2 == null）{％＆gt;＆＃xA; ＆LT;脚本＆GT;＆＃XA; ＆LT; /脚本＆GT;＆＃XA; ＆lt;％}否则if（lengthQ1＆gt; 0 || lengthQ2＆gt; 0＆amp;＆amp; PasswordMatch！= true）{％＆gt;＆＃xA; ＆LT;脚本＆GT;＆＃XA; $（“＃loginFailed”）。text（“密码错误”）;＆＃xA; $（“＃loginFailed”）。dialog（“open”）; ＆＃XA; ＆LT; /脚本＆GT;＆＃XA; ＆lt;％}％＆gt;＆＃xA;

＆＃xA;＆＃xA;

实际上，对话框没有显示，我无法理解为什么。当我移动

＆＃xA;＆＃xA;

  $（“＃loginFailed”）。dialog（“open”）; ＆＃xA;

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA ;

假设if语句及其中的所有内容都有效（当用简单的

＆＃xA;＆＃xA;

  alert（“错误的密码”`）＆＃xA替换对话框时;

＆＃xA;＆＃xA;

其'工作

＆＃xA;

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/

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

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

1 个答案: