从ajax调用加载Dojo表单

时间:2012-12-09 01:05:10

标签: ajax zend-framework dojo

我正在尝试实现这样的事情。 http://app.maqetta.org/mixloginstatic/LoginWindow.html

我希望加载登录页面但是如果您单击注册按钮,则ajax将使用注册表单替换登录表单。

我使用此代码

dojo.xhrGet({
        // The URL of the request
        url: "'.$url.'",
        // The success callback with result from server
        load: function(newContent) {
            dojo.byId("'.$contentNode.'").innerHTML = newContent;
        },
        // The error handler
        error: function() {
            // Do nothing -- keep old content there
        }
    });'

唯一的问题是新表单只是作为普通表单加载,而不是dojo表单。我试图用相位器返回一些脚本,但它没有做任何事情。

<div id="loginBox"><div class="instructionBox">Please enter your details below and click <a><strong>signup</strong>
    </a> to have an activation email sent to you.</div>
    <form enctype="application/x-www-form-urlencoded" class="site-form login-form" action="/user/signup" method="post"><div>
    <dt id="emailaddress-label"><label for="emailaddress" class="required">Email address</label></dt>
    <dd>
    <input 0="Errors" id="emailaddress" name="emailaddress" value="" type="text"></dd>
    <dt id="password-label"><label for="password" class="required">Password</label></dt>
    <dd>
    <input 0="Errors" id="password" name="password" value="" type="password"></dd>
    <dt id="captcha-input-label"><label for="captcha-input" class="required">Captcha Code</label></dt>
    <dd id="captcha-element">
    <img width="200" height="50" alt="" src="/captcha/d7849e6f0b95cad032db35e1a853c8f6.png">
    <input type="hidden" name="captcha[id]" value="d7849e6f0b95cad032db35e1a853c8f6" id="captcha-id">
    <input type="text" name="captcha[input]" id="captcha-input" value="">
    <p class="description">Enter the characters shown into the field.</p></dd>
    <dt id="submitButton-label">&nbsp;</dt><dd id="submitButton-element">
    <input id="submitButton" name="submitButton" value="Signup" type="submit"></dd>
    <dt id="cancelButton-label">&nbsp;</dt><dd id="cancelButton-element">
    <button name="cancelButton" id="cancelButton" type="button">Cancel</button></dd> 
       </div></form>

    <script type="text/javascript">

            $(document).ready(function() {

                var widget  = dijit.byId("signup");

                if (widget) {
                   widget.destroyRecursive(true);
                } 

                dojo.parser.instantiate([dojo.byId("loginBox")]); 
                dojo.parser.parse(dojo.byId("loginBox"));
            });

            </script></div>

关于如何将其作为dojo表单加载的任何建议。顺便说一句,我使用Zend_Dojo_Form,如果我直接运行代码然后一切正常,但通过ajax它不起作用。感谢。


更新

我发现如果我在我的操作中加载表单并在其上运行__toString(),那么当我从ajax加载表单时它就可以工作。它必须在__toString()

中做好准备

1 个答案:

答案 0 :(得分:1)

首先;您需要在html上运行dojo解析器,以便它接受data-dojo-type(fka dojoType)属性,如下所示:

dojo.parser.parse( dojo.byId("'.$contentNode.'") )

这当然只会实例化dojo类型设置为某事的dijits(例如(对于html5 1.7+语法)<form data-dojo-type="dijit.form.Form" action="index.php"> ... <button type="submit" data-dojo-type="dijit.form.Button">Send</button> ... </form>

因此,您需要更改设置为innerHTML的ajax内容,以便解析器重新识别dijit.form.Form类型的形式。也就是说,我敦促人们使用一套完整的dijit.form。*元素作为输入字段。

关于:

$(document).ready(function() {});

永远不会调用此函数。 document,你加入了innerHTML,或许已经很久了。

关于本期的Zend:

您最有可能从Zend_ Dojo类型表单呈现上述输出表单。如果渲染器设置为programmatic,您将在上面看到html包含ID =&gt; dojoType映射的注册表的脚本。插入<script>作为innerHTML属性值时的行为,脚本在大多数情况下都不会运行(!)。

您应该为表单控制器尝试类似于此伪的内容:

如果请求是ajax dojoHelper设置布局declarative
否则dojoHelper设置布局programmatic