Question

使用 jquery-ui对话框与 php 时出现问题。我是jquery的先生。我试着自己解决这个问题，但我无法解决我有＆＃34; index.php ＆＃34;作为我网站的主页：
的的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脚本，以及样式表（它们存在于＆＃34; header.php ＆＃34;）。

在 index.php 中我包含＆＃34; right_side_bar.php ＆＃34;，其中有一个按钮，可以调用 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>

当我点击＆＃34; right_side_bar.php ＆＃34;中存在的按钮时，我需要什么是激活 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});
    });
});

＆＃34; #container ＆＃34;是＆＃34; div ＆＃34;标签存在于主页面中（ index.php ），此＆＃34; div ＆＃34;将保留来自＆＃34; update_user_info.php ＆＃34;的<{1}}代码。

当我运行代码时，一切正常，甚至显示form，但＆＃34; jquery-ui对话框＆＃34;永远不会显示

我忘了提到我做了＆＃34; index2.php ＆＃34;并复制了＆＃34; right_side_bar.php ＆＃34;进入＆＃34; index2.php ＆＃34; （我的意思是不包括它），对话框正常工作没有任何问题。但我需要包含该代码。

我知道我写的非常多，但如果我对这段代码出错，我希望你指导我。

任何帮助将不胜感激，提前谢谢。

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容器中。然后，我们更新标题并打开对话框进行查看。

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

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

2 个答案: