1

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

所以我有几个问题：

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

例子：

索引.php

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

表单.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>

自定义.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');
                            }
                        }

                    ]

            })

         })

      })

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

4

2 回答 2

0

这是完全可能的，但我注意到一些错误：

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

您可以使用类似的内容加载 form.php .load("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")});
于 2012-08-17T15:13:04.857 回答
0

我不知道为什么 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>

自定义.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");
      });
 })

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

于 2012-08-26T15:35:37.363 回答