javascript - 如何从 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-ui<的按钮/强>: 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”中存在的按钮时，我需要的是使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”是一个“div”标签，存在于主页(index.php)中，这个“< strong>div”将保存来自“update_user_info.php”的 form 标记。

当我运行代码时，一切正常，甚至显示了警报，但从未显示“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>