title: Help needed with Ajax Search in Zend framework
body: <p>I'm new to web programming so please bear with me. What I want to do is have a user select a value from a Dojo autocomplete combobox and have the results displayed on the same page. I've tried to follow Phil Brown's excellent blog post <a href="http://blog.philipbrown.id.au/2011/03/awesome-pagination-with-zf-paginator-ajaxcontext-and-the-html5-history-api/" rel="nofollow">http://blog.philipbrown.id.au/2011/03/awesome-pagination-with-zf-paginator-ajaxcontext-and-the-html5-history-api/</a> but to be honest it is way over my head especially in relation to the JavaScript side. I also tried to implement <a href="http://www.w3schools.com/php/php_ajax_database.asp" rel="nofollow">http://www.w3schools.com/php/php_ajax_database.asp</a> as well but to no avail, as it renders my whole page and the results in the page itself on the first try and on changing the value in the combobox again nothing is passed to my JS function (I get XMLHttpRequest() undefined.
  What I've done so far is on following Phil's blog</p>
  
  <ol>
  <li><p>Created an AjaxContext for my search action.</p></li>
  <li><p>Created an search.ajax.phtml file and called it from my search.phtml file</p></li>
  <li><p>Added an onChange event to my Dojo Combobox in my form</p></li>
  <li><p>Created a JS script to handle the on change event based on the W3Schools example.</p></li>
  </ol>
  
  <p>Can anyone please help me with this I've looked everywhere I can think of but still no joy.</p>
  
  <p>My search action code is below I've kept the action to check for the submit button at the moment as it stops me having to refresh the page.</p>
  
  <pre><code>public function searchAction()
   {
     // Generate the form
     $form = new PetManager_Form_SearchBreeds;
     $this-&gt;view-&gt;form = $form;
  
     $input=$_GET["input"];
  
     if($input=$_GET["input"]){
      $b=$input;
          $q = Doctrine_Query::create()
          -&gt;from('PetManager_Model_Breeds b')
          -&gt;leftJoin('b.PetManager_Model_Pettype p')
          -&gt;addWhere('b.breed LIKE ?',"$b%");
  
          // Execute query and attach results to the view
          $results=$q-&gt;fetchArray();
          $this-&gt;view-&gt;results=$results;
     }else if($form-&gt;isValid($this-&gt;getRequest()-&gt;getParams())){
              $input = $form-&gt;getValues();
               $q = Doctrine_Query::create()
              -&gt;from('PetManager_Model_Breeds b')
              -&gt;leftJoin('b.PetManager_Model_Pettype p');
  
              // attach criteria to base query
              if(!empty($input['breed'])){
              $b=$input['breed'];
  
               $q-&gt;addWhere('b.breed LIKE ?',"$b%");
              }
  
          // Execute query and attach results to the view
          $results=$q-&gt;fetchArray();
          $this-&gt;view-&gt;results=$results;
      } 
  
  }
  </code></pre>
  
  <p>My JS code is as follows</p>
  
  <pre><code>function getBreedDetails(str)
   {
     if (window.XMLHttpRequest)
     {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
         // testing only window.alert("XMLHTTP Request"+str);
     }
    else
     {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        // testing only window.alert("MICROSOFT.XMLHTTP Request"+str);
     }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
        {
  
          document.getElementById("records").innerHTML=xmlhttp.responseText;
        }
     }
   xmlhttp.open("GET","/breeds/breed/search?input="+str,true);
   xmlhttp.send();
  
  }
  </code></pre>
  
  <p>The code for my form is as follows</p>
  
  <pre><code>public function init()
  {
  
      // Initialise form
  
      $this-&gt;setAction('/breeds/breed/search')
            -&gt; setMethod('get');
  
  
       // Create a autocomplete input for breed name that fires an onChange event     
      $breedName = new Zend_Dojo_Form_Element_ComboBox('breed',array('onChange'=&gt;"Javascript:getBreedDetails(breed.value)"));
      $breedName-&gt;setLabel('Breed Name');
              $breedName-&gt;setOptions(array(
              'autocomplete' =&gt; false,
              'storeId'   =&gt; 'breedStore',
              'storeType' =&gt; 'dojo.data.ItemFileReadStore',
              'storeParams' =&gt; array('url' =&gt; "/breeds/breed/autocomplete"),
              'dijitParams' =&gt; array('searchAttr' =&gt; 'breed')
        ))
              -&gt;setRequired(true)
              -&gt;addValidator('NotEmpty', true)
              -&gt;addFilter('HTMLEntities')            
              -&gt;addFilter('StringToLower')        
              -&gt;addFilter('StringTrim');
  
      // create a submit button
      $search = new Zend_Form_Element_Submit('submit');
      $search-&gt;setLabel('Search')
             -&gt;setOptions(array('class'=&gt;'submit'));
  
  
       // attach elements to the form
      $this-&gt;addElement($breedName)
           -&gt;addElement($search);     
  
  
    }
  </code></pre>
  
  <p>My search.ajax.phtml file is shown below it is called from the search.phtml file just using a echo command</p>
  
  <pre><code>&lt;?php if(count($this-&gt;results)):?&gt;
   &lt;div id="records"&gt;
     &lt;table&gt;
      &lt;tr&gt;
      &lt;td class="key"&gt;
      Breed
      &lt;/td&gt;
      &lt;td class="key"&gt;
       Tpye
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;?php foreach ($this-&gt;results as $r):?&gt;
      &lt;tr&gt;
       &lt;td&gt;&lt;?php echo $this-&gt;escape($r['breed']);?&gt;&lt;/td&gt;
       &lt;td&gt;&lt;?php echo $this-&gt;escape($r['PetManager_Model_Pettype']['type']);?&gt;&lt;/td&gt;
       &lt;td&gt;&lt;a href="&lt;?php echo $this-&gt;url(array('id' =&gt; $r['breedID']), 'breeds-display'); ?&gt;"&gt; &lt;img src='/images/view.png'/&gt;&lt;/a&gt;&lt;/td&gt; 
       &lt;td&gt;&lt;a href="&lt;?php echo $this-&gt;url(array('id' =&gt; $r['breedID']), 'breeds-update'); ?&gt;"&gt;&lt;img src='/images/updateico.png'/&gt;&lt;/a&gt;&lt;/td&gt;   
       &lt;/tr&gt;
       &lt;?php endforeach;?&gt;
       &lt;/table&gt;
  
      &lt;/div&gt;  
       &lt;?php else:?&gt;
       No Breeds Found
       &lt;?php endif;?&gt;
  </code></pre>
  
  <p>Any help greatly appreciated as this has my head melted and is grinding my project to a halt as I will need this functionality for other modules.</p>
  
  <p>Thanks</p>
  
  <p>Graham </p>