Tags: zend framework jquery.jeditable.js JSON

jeditable does not accept JSON in response to the AJAX call. So how can you get this to work with Zend Framework? Like this:

Your view will need the the .js files:

<?php
$this->headScript()->appendFile($this->baseUrl().'/js/jquery-1.2.1.pack.js');
$this->headScript()->appendFile($this->baseUrl().'/js/jquery.jeditable.js');
?>

In your controller you'll need to add a context swtich to return JSON, not HTML:

    public function init()
    {
        parent::init();
       
        //
        // NOTE you need **format** in the URL, http://url/url/format/json/
        //
        $this->_helper->contextSwitch
            ->addActionContext('my-editable-ajax', 'json')
            ->initContext();
            ...

You action will look like this:

    function myEditableAjaxAction()
    {
        //
        // This is a serious PITA. The editable expects a single value
        // is response, not a JSON object, so turn off AUTO json
        //
        $this->_helper->contextSwitch()->setAutoJsonSerialization(false);
        $value = $this->_getParam('value', '');
       
        echo 'got-'.$value;
    }

The URL you need to paste into the editable config will need the JSON context switch in it:

$(".edit_area").editable("<?= $this->url(array('action'=>'my-editable-ajax', 'format'=>'json')) ?>", {
  cancel    : 'Cancel',
  submit    : 'OK',
  indicator : "Saving...",
  tooltip   : 'Click to edit...',
  placeholder : '&nbsp;'
})

Hope that helps.