如何从 php 中包含的页面打开 jquery-ui 对话框？

Question

我在使用 jquery-ui 对话框 和 php 时遇到问题。我是 jquery 的初学者。我试图自己解决它，但我不能。
我有“index.php”作为我网站的主页：
index.php:

<?php include "includes/header.php"; ?>
<?php include "includes/config.php"; ?>

<?php include "includes/right_side_bar.php"; ?>

<script src="assets/js/jquery.min.js"></script> 
<script src="assets/js/wow.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script> 
<script src="assets/js/slick.min.js"></script> 
<script src="assets/js/custom.js"></script>
<script src="assets/js/dropdown.js"></script>
<script type="text/javascript" src="assets/js/ajax.js"></script> 
</body>
</html>

我引用了所有相关的 jquery-ui 脚本，还有样式表（存在于“header.php”中）。

在 index.php 中我包含了“right_side_bar.php”，它有一个调用 jquery-uibutton /强>： right_side_bar.php：

<link rel="stylesheet" href="./assets/css/general.css">
<link rel="stylesheet" href="./assets/js/jqueryui/jquery-ui.css">
<link rel="stylesheet" href="./assets/js/jqueryui/jquery-ui.min.css">
<link rel="stylesheet" href="./assets/js/jqueryui/jquery-ui.theme.css">
<script type="text/javascript" src="assets/js/jqueryui/external/jquery/jquery.js"></script>
<script type="text/javascript" src="assets/js/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="assets/js/jqueryui/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/validation.js"></script>                 
<div class="right_sidebar"> 
    <div class="single_widget">
        <h2 id="welcomeLogin">Login Page</h2>      
        <form id="loginForm" action="" method="post">    
            <div class="form-group text-center">
                <span class="input-group-btn">
                    <a id="clickform" name="login" class="btn btn-primary">login</a>
                </span>
            </div>
        </form>          
        <div id="container"></div>
    </div>
</div>

当我单击“right_side_bar.php”中存在的 button 时，我需要的是让 jquery-ui 触发并创建对话框
validation.js:

    $(document).ready(function(){
    $("#container").hide();
    $("#clickform").click(function(){     
        $("#container").load("includes/update_user_info.php #customForm",function(rt,ts,xhr){
            if(ts == "error")
                alert("ERROR!!!!!!");
            else
                alert("Success!!");
        });
        alert("Done..!!");
        $("#container").attr('title','Registration Form').dialog({width:600, height:600, closeOnEscape: true, draggable: true, resizable: false, show:'fade',modal:true});
    });
});

“#container”是一个存在于主页（index.php）中的“div”标签，这个“div” 将包含来自“update_user_info.php”的form 标签。

当我运行代码时，一切正常，即使是 alerts 也会显示，但“jquery-ui 对话框”从未显示。

我忘了说我制作了“index2.php”并将“right_side_bar.php”复制到“index2.php”中（我的意思是不包括它）并且对话框可以正常工作，没有任何问题。但我需要包含该代码。

我知道我写了很多，但如果我在这段代码中出错了，我希望你能指导我。

任何帮助将不胜感激，在此先感谢。

Answer 1

我突然想到的一件事是你两次包含 jquery-ui：

<script type="text/javascript" src="assets/js/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="assets/js/jqueryui/jquery-ui.min.js"></script>

你应该只包含一次，我建议你只使用 jquery-ui.min.js 缩小版本，因为它是一个较小的有效负载，并删除 jquery-ui.js。

除此之外，您是否在控制台中看到任何错误？

或者，如果您需要外部 jquery-ui 来验证，您可以尝试：

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

Answer 2

我会建议一些更改。

工作示例：http://jsfiddle.net/Twisty/km3zx1pt/

jQuery

$(function() {
  $("#container").dialog({
    autoOpen: false,
    width: 600,
    height: 600,
    closeOnEscape: true,
    draggable: true,
    resizable: false,
    show: 'fade',
    modal: true
  });
  $("#clickform").click(function() {
    // Example Code to test loading HTML content from remote source
    // Replace with .load() and your own URL
    $.post("/echo/html/", {
        html: "<h2>ALL YOUR BASE ARE BELONG TO US.</h2>"
      },
      function(d) {
        $("#container").html(d);
        $("#container").dialog("option", "title", 'Registration Form')
          .dialog("open");
      });
  });
});

通过这种方式，我们预先使用所有设置初始化对话框。我们收集表单数据或 HTML 并将其添加到 Dialog 容器中。然后我们更新标题并打开对话框进行查看。

这一切似乎都在这里工作，但我没有你在帖子中逃避的所有额外脚本。可能存在冲突。