1

私はプロジェクトに取り組んでおり、通常のページの代わりにコンテンツの追加や更新などの一部のフォームにJqueryUIを使用したいと考えています。ダイアログを設計し、フォームを設定しましたが、form/divがボタンと同じファイルにある場合にのみ機能します。ちなみに、このプロジェクトではCodeIgniterを使用しています。

だから私はいくつか質問があります：

  1. JQuery UIダイアログは、個別のファイルからのdivの使用をサポートしていますか？（ボタンがform / divと同じファイルにない場合）
  2. もしそうなら、どうすれば別のファイルにある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');
                            }
                        }

                    ]

            })

         })

      })

読んでくれてありがとう、誰かが私を助けてくれることを願っています！

4

2 に答える 2

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>

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");
      });
 })

答えてくれてありがとう！これが他の人に役立つことを願っています:)

于 2012-08-26T15:35:37.363 に答える
0

それは完全に可能ですが、いくつかのエラーに気付きました:

  • id='"new_user_form' と書きましたが、" を id の一部にすることができます。
  • このセレクタ $('# add_new ') と $("# new_user_form ") も同じです。
  • form.php からロードするため、おそらくまだ DOM にない div で .dialog() を宣言します。
  • 追加するページで body を使用しないでください。2 つの body タグが作成される可能性があります。

form.php に似たものをロードできます。.load("form.php")これらの body タグを 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 に答える