AHAH (Asynchronous HTML and HTTP) and Plone
Recently I have tried working with AHAH along with Plone and found myself reaping the benefits of AJAX and the Zope framework. And what impressed me the most is that I wrote very little JavaScript.
I am going to run through an example of using AHAH with Controller Page Templates.
eg: form.cpt
<html>
<head>
<script language="JavaScript" type="text/javascript"
xsrc="MochiKit.js" mce_src="MochiKit.js" ></script>
<script language="JavaScript" type="text/javascript">
function LoadManager() {
bindMethods(this);
}
LoadManager.prototype.postFormData = function(theform) {
var data = {}
for (var i in theform.elements) {
var formelement = theform.elements[i];
data[formelement.name] = formelement.value;
}
var d = doSimpleXMLHttpRequest(theform.action, data);
d.addCallback(this.updateDOM);
d.addErrback(this.fetchError);
}
LoadManager.prototype.updateDOM = function(dom) {
var text = dom.responseText;
this.div.innerHTML=text;
}
LoadManager.prototype.fetchError = function(err) {
alert(err);
}
function postForm(theform, replacediv) {
loadManager = new LoadManager();
loadManager.div = $(replacediv);
loadManager.postFormData(theform);
}
</script>
</head>
<body>
This text will not reload on form submission.
<div id="reloadme">
<div metal:use-macro="here/comment_form/macros/view">
</div>
</body>
</html>
eg: form.cpt.metadata
[default]
title=Reply to Comment
[validators]
validators..Save = validate_comment
[actions]
action.success = traverse_to:string:comment_reply
action.success..Save = traverse_to:string:comment_reply
action.failure = traverse_to:string:comment_form
eg: comment_form.cpt
<metal:block use-macro="here/global_defines/macros/defines" />
<div metal:define-macro="view">
<form action="" method="post"
tal:define="errors options/state/getErrors">
<input type="hidden" name="form.submitted" value="1" />
<div class="field"
tal:define="error python:errors.get('comment', None)"
tal:attributes="class python:test(error, 'field error', 'field')">
<label for="title" i18n:translate="label_subject">Comment</label>
<div tal:content="error">Validation error output</div>
<input name="comment"
id="comment"
value=""
tabindex=""
tal:attributes="value request/comment|nothing;tabindex tabindex/next" />
</div>
</div>
<input onClick="postForm(this.form, 'comments')"
tabindex=""
type="button"
value="Save"
name="form.button.Save" />
</form>
</div>
</metal:block>
You must ensure that the response after the form submission is only the contents that you replaced in you macro and not an entire HTML file.
Posted by giovani |
Comments (1)
