ParTecs Weblog

AHAH (Asynchronous HTML and HTTP) and Plone

February 22nd, 2006

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.

Feedburner RSS

Enter your email address:

Delivered by FeedBurner

Blogroll

Categories

RSS Telematics Freedom

June 2017
M T W T F S S
« May    
 1234
567891011
12131415161718
19202122232425
2627282930  

Archive

Sky Sponsored by Web Hosting