Question

I am trying to display different forms based on user type using Ajax post request. The request response works fine but I don’t know how to display the form. For example, if the user selects parent then I want the parent form to be displayed and so on. I’m using ZF 1.12.

public function init() {
    $contextSwitch = $this->_helper->getHelper('AjaxContext');
    $contextSwitch =$this->_helper->contextSwitch();
    $contextSwitch->addActionContext('index', 'json')
    ->setAutoJsonSerialization(false)
    ->initContext();
}

public function indexAction() {
    $this->view->user = $this->_userModel->loadUser($userId);
    //if($this->_request->isXmlHttpRequest()) {
        //$this->_helper->layout->disableLayout();
        //$this->_helper->viewRenderer->setNoRender(true);
    if ($this->getRequest()->isPost()){
        $type = $_POST['type'];
        $this->view->userForm = $this->getUserForm($type)->populate(
            $this->view->user
        );
    }
}

And here’s what I have on the client side. What do I need to write in the success section?

<script type="text/javascript"> 
  $(document).ready(function(){
    $('#userType').on('change', function(){
      var type = $(this).val();
      select(type);
    });
  });

  function select(type) {
    $.ajax({
        type: "POST",
        url: "admin/index/",
        //Context: document.body,
        data: {'type':type},
        data: 'format=json',
        //dataType: "html",
        success: function(data){
         // what to do here?
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {}
    });
}
</script>
<form id="type" name="type" method="post" action="admin/index">
  <select name='userType' id='userType' size='30'>
    <option>admin</option>
    <option>parent</option>
    <option>teacher</option>
  </select>
</form>
<div id="show">
  <?php //echo $this->userForm;?>
</div>

Answer 1

If your ajax request form returns you the HTML from the Zend_Form, you could simply write the HTML in the #show div.

In you view you will need to do this :

echo $this->userForm;

This way, all the required HTML will be written on the server side, before sending the response to the HTML page. In the HTML page you then just have to write the response in the right location with the method $('#show').html(data). You also have to make sure that each of your forms has the right action when you render them.

The other option would be to have all three forms hidden in your page (through Javascript) upon loading and based on the select (Generated with JS), display the right form. This way you don’t have to load data from an external source and if someone have JS disabled, he still can use the application. On the other hand, this method will have each page load about 1/2 a KB more of data.