전체 페이지 대신 드롭 다운 값 하나만 새로 고침 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

당신은 올바른 길을 가고 있습니다. select 대신 success 콜백을 사용해야합니다.

나는 이것이 내가 원래 select을 교체하는 데 필요한 select 및 option들 해당 스크립트 인쇄를 (당신이하고있는 것처럼) 내 배경 스크립트에 데이터를 전달하고하는 것입니다하는 경향 방법. 이 출력합니다 일단

<?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 값을 바꿉니다.

아약스를 사용하기에 좋은 시간입니다. - 나는 사무엘에 동의한다.

<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 echos /로 필요한 컨트롤러를 확인하십시오. 당신은 단지 하나의 값 이상을 필요로하는 경우, PHP는 배열에 넣어, 그리고 print json_encode($yourDataArray); 및 JS 당신이 당신의 아약스 성공 콜백, 다음 echoedResponseFromPHPController

을 사용하는 것입니다, 당신은 echoedResponseFromPHPController.options로 데이터를 참조합니다 [2] 또는 뭔가. 그것은 json입니다. json을 이해한다면 데이터를 참조하는 방법을 알 수 있습니다.

원하는 번호로 echoedResponseFromPHPController에 전화 할 수 있습니다. 나는 명확성을 위해 긴 이름을 썼다.