jQuery 아약스 내에서 새로운 ZF2 'Zend \ Form \ Element를 추가하는 방법

Question

jQuery 아약스 내에 새로운 ZF2'Zend \ Form \ Element를 추가하고 싶습니다. 그러나 Zend Form을 사용하는 동안 나는 그것을 만드는 방법을 모른다. 이것은 add.phtml 파일입니다. 다음은

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".pid").change(function(){ 
    var id = $('.pid').val(); 
    var $_this = $(this); 
    $.ajax({ 
      type:"POST", 
      url:"<?php echo $this->url('Element/default',array('action'=>'change'));?>", 
      data:"pid="+id, 
      dataType:'json', 
      async:false, 
      success:function(data){ 
       if(data.response){ 
        //here I want to add a new select component after select conponent "pid" using like "$this->formRow($form->get('mid'))" or else . 
       } 
      } 
    }); 
    }); 
}); 
</script> 

되는 HTML의 나머지 부분이다.

<?php 
$title = 'add'; 
$this->headTitle($title); 
?> 
<h1><?php echo $this->escapeHtml($title); ?></h1> 

<?php 
$form = $this->form; 

$form->setAttribute('action', $this->url(
'Element/default', 
array(
    'action'  => 'add' 
) 
)); 
$form->prepare(); 

echo $this->form()->openTag($form); 
echo $this->formRow($form->get('pid')); 
echo $this->formRow($form->get('name')); 
echo $this->formRow($form->get('desc')); 
echo $this->formSubmit($form->get('submit')); 
echo $this->form()->closeTag(); 

jquery ajax 내에 새로운 zend 양식 요소를 어떻게 추가합니까? 감사.

Answer 1

아약스와 뷰/html을 사용하여 데이터를 수신하는 스크립트를이 스크립트에서 받아야합니다. 데이터를 렌더링하고 응답으로 리턴하려면 제어기/조치가 필요합니다. 당신의 JS 성공 기능에

use Zend\View\Model\JsonModel;  
//some controller 
public function changeAction(){ // your requested action 
    //1. get partial helper to rendering html; 
    $partial = $this->getServiceLocator()->get('ViewHelperManager')->get('partial'); 
    $form = new Form();// your form 
    //2. render html 
    $html = $partial('path/to/your/file/phtml',['form'=>$form]); 
    //3. return data as JSON because in your ajax configuration dataType: 'json' 
    return new JsonModel([ 
     'html' => $html, 
    ]); 
} 

은 다음과 같아야합니다

success:function(data){ 
    if(data.html){ 
     $_this.find('blockToAppend').append(data.html); 
    } 
}