在ajax响应中解析dojo tundra dijits

时间:2012-07-11 23:28:45

标签: ajax zend-framework dojo

我在Zend框架中的ajax响应中重新解析我的dojo元素时遇到了大量问题。我有一个简单的validationTextBox和一个提交按钮。首次呈现索引页面时,将正确解析所有dojo / dijit tundra样式/属性等。但是,当我有一个ajax调用重建dojo表单并将其发回到索引视图时。表格如果回发好,但苔原风格不再有效。我尝试了很多不同的东西但却花了很多时间无处可去。我事先感谢任何试图提供帮助的人。我在这篇文章中添加了最简单的例子来解释。

layout.phtml

<?php
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo $this->doctype();
?>
<html>
    <head>
    <meta content="text/html; charset=UTF-8" />
    <script>
    function showForm()
    {
    dojo.xhrGet( {
            url: "../public/index.php?ajax=true",
        // The load function is called on successful response from server
        // It inserts the response to the HTML div “put_here” placeholder
        handleAs:"text",
        sync:true,
            load: function(response, ioArgs)
                    { dojo.byId("welcome").innerHTML = response;
                    return response; 
                },
                // The error function displays error message if server does not
        // respond right
            error: function(response, ioArgs)
            {
            console.error("HTTP status code: ", ioArgs.xhr.status);
            return response;
            }
            });

    //     dojo.parser.parse(dojo.byId("welcome"));
    }
    </script>
    <?php
    echo $this->headTitle();
    echo $this->headStyle();
    echo $this->headScript();
    echo $this->dojo()->setDjConfigOption('parseOnLoad', true);
    echo $this->dojo()->addStyleSheetModule('dijit.themes.tundra');
    echo $this->dojo();                
    ?>
</head>
<body class='tundra'>     
    <div id='ajaxcontent'>
    <?php  echo $this->layout()->content; ?>
    </div>
</body>

indexController.php

<?php

//require_once '../public/js/custom.js';
class IndexController extends Zend_Controller_Action
{
public function init()
{
    $ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('index', 'html')
                ->initContext();
}

public function indexAction()
{                       

    $form = new Zend_Dojo_Form('dojoForm', array('dojotype'=> 'dijit.layout.ContentPane'));    
    $element = new Zend_Dojo_Form_Element_ValidationTextBox('TestBoxName', 
                                                                array(
                                                                    'id' => 'TextBoxId',
                                                                    'required' => true
                                                                )
                                                                );
    $button = new Zend_Dojo_Form_Element_Button('TestButton',
                                                    array(
                                                        'value'=> 'Button',
                                                        'onclick' => 'showForm()'
                                                    ));                                              
    $form->addElements(array($element,$button));       
        $this->view->form = $form;
}
}

查看index.phtml

<div id="welcome" >
<?php
echo $this->form;
?>

1 个答案:

答案 0 :(得分:0)

尝试通过http://validator.w3.org/运行您的网页 - 它可能是DOCTYPE,还有非封闭标签的问题?

addStyleSheetModule行只是添加了一个css文件,即<body>断言上设置的类,主体下面的所有节点都'继承'主题(CSS选择器)。然而,选择器高度依赖于构建良好的DOM(因此验证)

但这里的主要问题似乎是没有设置dijit类 - 可能是因为data-dojo-type没有初始化。有两种方法

1.1在layout.phtml

function showForm() { dijit.byId('welcome').set('href', '../public/index.php?ajax=true'); }

1.2在index.phtml中

<div id='welcome'..

中创建一个contentpane(默认为parseOnLoad)
<div id="welcome" data-dojo-type="dijit.layout.ContentPane">

手动调用2.0解析器

load: function(response, ioArgs)
   { var domnode = dojo.byId("welcome");
     domnode.innerHTML = response;
     dojo.parser.parse(domnode);
     return response; 
   }