0

CakePHP 2.x を使用しています。ページ全体の更新ではなく、jquery ui からのモーダル ダイアログが閉じられた後 (送信後)、ページのドロップダウンを新しい値で更新したいと考えています。どうすればそれを達成できますか？

私の ArticlesController.php で

public function admin_add() {
    //setting active link
    $this->set('active', 'new_article');

    if ($this->request->is('post')) {
        $this->request->data['Article']['posted'] = date('Y-m-d H:i:s');

        $this->Article->create();

        if ($this->Article->save($this->request->data)) {
            $this->Session->setFlash(__('The article has been saved'));
            $this->redirect(array('action' => 'index'));
        } else {
            $this->Session->setFlash(__('The article could not be saved. Please, try again.'));
        }
    }

    $categories = $this->Article->Category->find('list');
    $this->set(compact('categories')); 
}

そして私のビューページ（admin_add.php）

<div>
<?php echo $this->Form->create('Article');?>
    <?php
        echo $this->Form->input('title');
        echo $this->Form->input('author');

            //THIS IS THE DROPDOWN PART
            echo $this->Form->input('category_id');

            //THIS IS THE PART FOR CALLING THE MODAL DIALOG TO ADD A NEW CATEGORY
            echo '<div class="addNewCategory">';
            echo 'add';
            echo '</div>';               
    ?>
<?php echo $this->Form->end(__('Submit'));?>
</div>

<!-- Modal Dialog for Adding New Category (THIS IS HIDDEN UNTIL GET CALLED AS MODAL DIALOG)-->
<div class="dialog-form" title='Create new Category'>
    <?php echo $this->Form->create('Category');?>
        <?php
            echo $this->Form->input('name');
        ?>
    <?php echo $this->Form->end(__('Submit'));?>
</div>

<script type="text/javascript">   
        $('.dialog-form').dialog({
           autoOpen: false,
           title: 'New Category',
           modal: true,
           height: 300,
           width: 350,
           close: function() {
           }
        });

        $('.addNewCategory').click(function() {
            $('.dialog-form').dialog('open');
        });


    $('.dialog-form .submit').click(function(e) {
        var value = document.getElementById('CategoryName').value;
        var data = {'data[Category][name]':value};
        e.preventDefault();
        $.ajax({
            type:"POST",
            url: "<?php echo $this->Html->url(array('controller' => 'categories', 'action' => 'addmodal', 'admin' => TRUE)); ?>",
            data: data,
            success: function() {
                $('.dialog-form').dialog('close');

                //WHAT SHOULD I DO IN HERE AFTER THE DIALOG CLOSED TO UPDATE THE DROPDOWN OR IF ITS NOT IN HERE PLEASE LET ME KNOW THE SOLUTION      
            }
        })
    });
</script>

上記は、コントローラーとビュー、およびスクリプトのコードの一部です。大文字のコメントは私の説明です。ありがとうございました

4

2 に答える 2

1

あなたは正しい方向に進んでいます。必要なのは、successコールバックがを置き換えることだけselectです。

私がこれを行う傾向があるのは、データをバックグラウンドスクリプトに渡し（あなたが行っているように）、そのスクリプトにを出力させselect、option元のスクリプトを置き換える必要があることselectです。

<?php
    // background script

    // some processing...

?>

<select name="originalSelectName" id="originalSelectId">
    <option value="0">Select an Option</option>
    <?php foreach ($options as $option): ?>

    <option value="<?= $option['val'] ?>"><?= $option['label'] ?></option>
    <?php endforeach; ?>
</select>

これが出力されると、successコールバックがトリガーされ、を置き換えるだけですselect。

$('.dialog-form .submit').click(function(e) {
    var value = document.getElementById('CategoryName').value;
    var data = {'data[Category][name]':value};
    e.preventDefault();
    $.ajax({
        type:"POST",
        url: "<?php echo $this->Html->url(array('controller' => 'categories', 'action' => 'addmodal', 'admin' => TRUE)); ?>",
        data: data,
        success: function(html) {
            $('.dialog-form').dialog('close');

            // replace the drop-down
            $("#originalSelectId").replaceWith(html);
        }
    })
});

htmlコールバックにパラメータを追加した方法に注目してください。返されるHTMLはそれ自体で実行されます。

お役に立てれば！

于 2012-08-10T13:00:16.960 に答える
1

これらの選択オプションのそれぞれにいくつかのクラス/IDを追加して、問題の個人を識別できるようにします。

次に、必要なデータを取得し、その要素を選択して、その html 値を置き換えます。

また、これは ajax を使用するのに適した時期であることにも注意してください。-- 私はサミュエルに同意します。

<script type="text/javascript">
$(document).ready( function() {
        $('.dialog-form').dialog({
           autoOpen: false,
           title: 'New Category',
           modal: true,
           height: 300,
           width: 350,
           close: function() {
           }
        });

        $('.addNewCategory').click(function() {
            $('.dialog-form').dialog('open');
        });


    $('.dialog-form .submit').click(function(e) {
        var value = document.getElementById('CategoryName').value;
        var data = {'data[Category][name]':value};
        e.preventDefault();
        $.ajax({
            type:"POST",
            url: "<?php echo $this->Html->url(array('controller' => 'categories', 'action' => 'addmodal', 'admin' => TRUE)); ?>",
            data: data,
            success: function( echoedResponseFromPHPController ) {
                $('.dialog-form').dialog('close');
                $('#dropdown_92').html( echoedResponseFromPHPController );  
            }
        })
    });
}
</script>

ajax エンドポイント/URL として使用しているコントローラーを把握し、必要なものをエコー/出力します。複数の値が必要な場合は、それをphp配列に入れprint json_encode( $yourDataArray );、jsで使用するだけですechoedResponseFromPHPController

次に、ajax 成功コールバックで、データを echoedResponseFromPHPController.options[2] などとして参照します。jsonなので、jsonを理解していればデータの参照方法がわかります。

好きなように呼び出すことができることに注意してくださいechoedResponseFromPHPController。わかりやすくするために長い名前を書いただけです。

于 2012-08-09T19:15:19.407 に答える