0

テキスト ボックスと 2 つのボタンを含むフォーム (div 内) を表示するボタンをページに配置したいと思います。
私はまだjqueryに精通していませんが、いくつか読んで、ここにある例に基づいてコードを作成しようとしました: http://jqueryui.com/demos/dialog/#modal-form

次のようなボタンがあります。

 <input type='button' class='btn btn-info' value='Change VLAN' id='changevlan'/>

そして、必要なポップフォームの詳細を含む div:

 <div id="dialog-form" title="Change Vlan">
<p>You must supply a new vlan number</p>

<form>
<fieldset>
    <label for="vlan">Vlan Number:</label>
    <input type="text" name="vlan" id="vlan" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
 </div>

そして、ページの下部に jquery および jquery ui ライブラリを含め (ページの読み込みを高速化するために下部に読み込みました)、次の javascript を用意しました: (この投稿の冒頭で述べた例に基づいています) .)

<script type="text/javascript">
$(function() {
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
    $( "#dialog:ui-dialog" ).dialog( "destroy" );

    var vlan = $( "#vlan" ),
      tips = $( ".validateTips" );

    function updateTips( t ) {
        tips
            .text( t )
            .addClass( "ui-state-highlight" );
        setTimeout(function() {
            tips.removeClass( "ui-state-highlight", 1500 );
        }, 500 );
    }

    function checkLength( o, n, min, max ) {
        if ( o.val().length > max || o.val().length < min ) {
            o.addClass( "ui-state-error" );
            updateTips( "Length of " + n + " must be between " +
                min + " and " + max + "." );
            return false;
        } else {
            return true;
        }
    }

    function checkRegexp( o, regexp, n ) {
        if ( !( regexp.test( o.val() ) ) ) {
            o.addClass( "ui-state-error" );
            updateTips( n );
            return false;
        } else {
            return true;
        }
    }

    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Change Vlan": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );

                bValid = bValid && checkLength( vlan, "vlan", 1, 1 );
                bValid = bValid && checkRegexp( vlan, /^([0-9])+$/i, "vlan must be numeric." );

                if ( bValid ) {
                    //this is where I need to redirect to another URL passing the vlan number.
                    $( this ).dialog( "close" );
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

    $( "#changevlan" )
        .button()
        .click(function() {
        alert('in here');
            $( "#dialog-form" ).dialog( "open" );
        });
});
</script>

ご覧のとおり、アラート ステートメントを挿入して、JavaScript にアクセスしていることを確認しました。しかし、私は警告メッセージを受け取りません。div フォームのコンテンツは、最初にレンダリングされたときにメイン ページに表示されます。

これまでに確認したこと：

div フォーム表示をトリガーするボタンの名前が、javascript 関数で探している変数の名前と一致することを再確認しようとしました。

    $( "#changevlan" )
        .button()
        .click(function() {
        alert('in here');
            $( "#dialog-form" ).dialog( "open" );
        });

また、div フォームの名前が #dialog-form であることも確認しました

しかし、他に何を試すべきかよくわかりません。何か提案があれば、よろしくお願いします。また、テキスト ボックスの内容にアクセスし、vlan 番号をパラメーターとして渡して、ユーザーを新しいコントローラーとメソッドにリダイレクトする方法も知っておく必要があります。多分私はwindow.locationタイプのことをすることができます...

ありがとう。

4

1 に答える 1

3

これ以上のライブラリは必要ありません。単純な jQueryUI .dialog を作成し、ダイアログの「div」要素内に CI のインライン php を配置し、もちろん<div id="dlgPopUpForm"><?= $this->load->view('dialogView.php'); ?></div>フォームをビルドします。dialogView.php

実行時に、php が div に読み込まれ、ダイアログの作成に使用する jquery オプションが残りを処理します。何かのようなもの$("#dlgPopUpForm").dialog({ autoOpen: false, modal: true }); $("#someButton").click(function(e){ $("#dlgPopUpForm").dialog("open"); });

フォーム ビュー ページのフォームに JavaScript を含めることを忘れないでください (dialogView.php私の例では)。

多分私がそんなに怠け者ではないとき、私はあなたを今日の後半に例にしますが、それはかなり簡単です

于 2012-08-26T17:40:26.913 に答える