刷新一个下拉值而不是整个页面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和option的I需要更换原来的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 endpoint/url回声/打印你需要的东西。如果你需要的不仅仅是一个值，把它放在一个PHP数组，print json_encode($yourDataArray);和JS你只是使用echoedResponseFromPHPController

然后，在你的ajax成功回调，你指的是数据echoedResponseFromPHPController.options [2]或其他。它是json，所以只要你理解json，你就可以找出如何引用数据。

请注意，无论你想要什么，你都可以致电echoedResponseFromPHPController。为了清楚起见，我只写了一个长名。