Question

I have been building a dynamic form in my Zend Framework application using Jquery and Ajax but i’ve run into a problem. For some odd reason Jquery will not work on my page unless i add one of the standard Jquery object like the datePicker.

Whenever I add the datepicker my code works perfectly fine, when I remove the datepicker it gives the error that the $(document).ready(function() variable is undefined. This in itself is correct considering jquery isn’t being loaded and thus the variable makes no sense to the browser.

I have the library, bootstrap and the echo $this->Jquery(); all set up appropriately otherwise the date picker wouldn’t function, and when the datepicker is present it and the other code work perfectly suggesting it is all properly set up.

Has anyone else run into the issue of Jquery not loading properly?

My code in the bootstrap :

protected function _initViewHelpers()
{
    $view = new Zend_View();
    $view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');
    $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('ViewRenderer');
    $viewRenderer->setView($view);

And my code in the layout :

<?php  
echo $this->jQuery();
echo $this->layout()->content; 
?>

My application.ini also has the autoloaderNamespaces[] = "ZendX" line

And here is the jquery code in my view :

<p>All fields are required.</p>

<?= $this->form; ?>

<script type="text/javascript">

$(document).ready(function() {

  $("#addElement").click( 
      function() { 
          ajaxAddField();
       }
    );

  $("#removeElement").click(
      function() {
          removeField();
      }
    );
  }
);

// Get value of id - integer appended to dynamic form field names and ids
var id = $("#id").val();

// Retrieve new element's html from controller
function ajaxAddField() {
  $.ajax(
    {
      type: "POST",
      url: "<?=$this->url(array('action' => 'newfield', 'format' => 'html'));?>",
      data: "id=" + id,
      success: function(newElement) {

        // Insert new element before the Add button
        $("#addElement-label").before(newElement);

        // Increment and store id
        $("#id").val(++id);
      }
    }
  );
}

function removeField() {

  // Get the last used id
  var lastId = $("#id").val() - 1;

  // Build the attribute search string.  This will match the last added  dt and dd elements.  
  // Specifically, it matches any element where the id begins with 'newName<int>-'.
  searchString = '*[id^=newName' + lastId + '-]';

  // Remove the elements that match the search string.
  $(searchString).remove()

  // Decrement and store id
  $("#id").val(--id);
}

</script>

Answer 1

try enabling it explicitly

$this->jQuery()->enable();

And also set this at last line in _initViewHelpers()

Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);