Question

我正在使用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>

以上是控制器和视图以及脚本的一些代码。 UPPER CASE的评论是我的解释。谢谢

Answer 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 echos /打印你需要的东西。如果您需要的不仅仅是一个值，请将其放在php数组中，print json_encode( $yourDataArray );和js中您只是使用echoedResponseFromPHPController

然后，在你的ajax成功回调中，你会将数据称为echoedResponseFromPHPController.options [2]或其他东西。它是json，所以只要你理解了json，你就可以弄清楚如何引用数据。

请注意，无论您想要什么，都可以致电echoedResponseFromPHPController。我只是为了清晰起见而写了长名。

Answer 2

你走在正确的轨道上。您只需要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将自行运行的地方。

希望这有帮助！

刷新一个下拉值而不是整个页面CakePHP

2 个答案: