Zend Framework Jquery Sortable

Question

I have been trying to get JQuery Sortable working on my Zend Framework application but only with limited succes. I have been using the ZendX library for most of the Jquery functionality that i need such as the datepicker and those work perfectly fine. I just can't seem to be able to get sortable to wich is not supported in the ZendX library.

As for the code. In my bootstrap i have defined the helper path for Jquery etc. as per useual:

protected function _initViewHelpers()
    {
        $view = new Zend_View();        
        $view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');
        $view->jQuery()->setLocalPath('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js')
                       ->setUiLocalPath('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js')
                       ->addStylesheet('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css');
        $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('ViewRenderer');
        $viewRenderer->setView($view);
        Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);
    }

I then activate JQuery in the layout using echo $this->jQuery()->enable();

Now this works all fine, the datepicker works and it shows the Smoothness design as intended etc.

Now i implement a small list with a the simple sortable script as follows in my index.phtml:

<!DOCTYPE html>
<html>
<head>

  <script>
  $(document).ready(function() {
    $("#sortable").sortable();
  });
  </script>
</head>
<body style="font-size:62.5%;">

<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

</body>
</html>

The only way i can get this to work is to add the line

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

to the index.phtml. This to me looks just about as ridiculous as it gets. in the bootstrap i already add this script so why should i have to do this again just to get sortable to work?

Anyone happen to have a solution to my problem?

Any advice will be appreciated :)

Could you please vote to my answer as this is perfectly satisfied your requirments — Durgaprasad Budhwani, Jul 05 '12 at 08:25

score 1 · Accepted Answer · answered Jul 05 '12 at 08:19

Could you please try below code approach :-

protected function _initView()
{
    $view = new Zend_View();
    $view->doctype('XHTML1_STRICT');
    $view->headMeta()->appendHttpEquiv('Content-Type', 'text/html;charset=utf-8');
    $view->headTitle()->setSeparator(' - ');
    $view->headTitle('IMR - BI System');
    $view->env = APPLICATION_ENV;
    $view->baseUrl = Zend_Registry::get('config')->root_path;

    $view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");
    $view->jQuery()->addStylesheet('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css');
    $view->jQuery()->setLocalPath('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    $view->jQuery()->setUiLocalPath('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js');
    $view->jQuery()->enable();
    $view->jQuery()->uiEnable();
    $viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
    $viewRenderer->setView($view);
    Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);

    return $view;
}

Hope this would help :)

Well this sure was one of those moments where i facepalm quite heavely. It was the `JQuery->uiEnable();` that i was missing. Thanks alot! I do wonder about the purpose of the line `$view->JQuery()->enable();`. It would indicate it to enable jquery on the view however when i use it and remove the line in my layout, JQuery stops working entirely. — Björn, Jul 05 '12 at 08:32

Zend Framework Jquery Sortable

1 Answers1