单独文件中的 JQuery UI 对话框和 div答案

【问题标题】：JQuery UI Dialogs and divs in separate files单独文件中的 JQuery UI 对话框和 div
【发布时间】：2012-08-17 14:26:06
【问题描述】：

我正在处理一个项目，我想将 Jquery UI 用于一些表单，例如添加和更新内容，而不是普通页面。我设计了对话框，设置了表单，但它仅在表单/div 与按钮位于同一文件中时才有效。顺便说一下，我正在为这个项目使用 CodeIgniter。

所以我有几个问题：

JQuery UI 对话框是否支持使用来自不同文件的 div？（如果按钮与表单/div不在同一个文件中）
如果是这样，我如何使用位于不同文件中的 div（而不是将 div 与按钮放在我几乎没有其他组件的地方）？

例子：

index.php

<body>
<input type="button" id="add_new"  value="add new" />
 </body>

form.php

<body>
<div id='"new_user_form'> 
        <input type="text" id="name" />
        <input type="text" id="username" />
        <input type="password" id="password" />
        <input type="button" id="add_user"  value="add new" />
</div> 
</body>

custom.js

$(document).ready(function () 
{
    $('# add_new ').click (function ()
    {

            $("# new_user_form ").dialog
            ({

                title: 'Add new user',
                height: 400,
                width: 600,
                resizable: false,
                modal: true,
                draggable: false,
                buttons:
                    [
                        {
                            text: 'add new',
                            id: ' add_user ',
                            click: function()
                            {
                                alert("Testing 123...");
                            }
                        },
                        {
                            text: 'cancel',
                            click: function()
                            {
                                $(this).dialog('close');
                            }
                        }

                    ]

            })

         })

      })

感谢阅读，希望有人能帮助我！

【问题讨论】：

嗨@Ruffles，你是说按钮和表单div可能在不同的模板文件中吗？如果是这样，那么一旦渲染它们在 JavaScript 眼中看起来都是同一个文件就无关紧要了

标签： jquery-ui dialog

【解决方案1】：

完全有可能，但我注意到一些错误：

您写了 id='"new_user_form'，它可以使 " 成为 id 的一部分。
这个选择器 $('# add_new ') 和 $("# new_user_form ") 一样，修剪它。
您在一个可能尚未在 DOM 中的 div 上声明 .dialog()，因为您是从 form.php 加载它的。
不要在要附加的页面中使用正文，否则您可能会得到两个正文标记。

您可以使用类似于.load("form.php") 的内容加载 form.php，您必须从 form.php 中删除那些正文标签：

$("body").load("form.php",function()
{
    $("#new_user_form").dialog(
    {
        // your options
    });
});

或者您也可以声明一个对话框并在需要时替换其内容，您必须从 form.php 中删除 body 和 div 才能使用此代码：

<div id='new_user_form' style='display:none;'></div> <!-- somewhere in your index.php -->

// when document ready is triggered
$("#new_user_form").dialog(); 

// when you need it :
$("#new_user_form").load("form.php",function(){$("#new_user_form").dialog("open")});

【讨论】：

好吧，我忘了说我使用的是动态页面，其中只有主要内容 div 发生变化，页眉和页脚保持不变。
那你也是单独使用form.php吗？不仅在 .dialog() 小部件的上下文中？
我正在使用 CodeIgniter，所以我在不同的视图文件中有表单。
就像：按钮在users_view.php，表单在add_user_view.php，它们在同一个文件夹中。
什么会使上述中断？除了body标签？

【解决方案2】：

我不知道为什么 load() 函数不起作用，但我找到了解决此问题的更好方法。

我是怎么做到的：

users_view.php（以前的 index.php）

<body>
<input type="button" id="add_new"  value="add new" />

<div id="new_user_form">
   <?php $this->load->view('add_user_form'); ?>
</div>

</body>

add_user_form.php（以前的 form.php）

  <div> 
    <input type="text" id="name" />
    <input type="text" id="username" />
    <input type="password" id="password" />
    <input type="button" id="add_user"  value="add new" />
    <input type="button" id="cancel"  value="cancel" />
 </div>

custom.js

$(document).ready(function ()
{

      $("#new_user_form").dialog
      ({

              title: 'Add new userт',
              height: 400,
              width: 600,
              resizable: false,
              modal: true,
              draggable: false,
              autoOpen: false

      })

      $('#add_new').click (function ()
      {
          $("#new_user_form").dialog("open");
      })

      $('#cancel').click(function()
      {
        $("#new_user_form").dialog("close");
      });
 })

感谢您的回答！我希望这对其他人有帮助:)

【讨论】：