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

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>

上面是控制器和视图的一些代码和脚本。大写的评论是我的解释。谢谢

Answer 1

你在正确的轨道上。您只需要使用 success 回调替换 select。

我倾向于这样做的方式是将数据传递给我的后台脚本（就像你正在做的那样），并让该脚本打印出 select 和 options 我需要替换原来的 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 将自行运行的地方。

希望这会有所帮助！

Answer 2

为每个选择选项添加一些类/一个 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 任何您想要的电话。为了清楚起见，我只是写了长名称。