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.

1 Comment »

  1. XRumer562 says

    Abnormal program termination.

    October 9th, 2006 | #

Leave a comment

:mrgreen: :neutral: :twisted: :shock: :smile: :???: :cool: :evil: :grin: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad:

RSS feed for these comments. | TrackBack URI

Feedburner RSS

Enter your email address:

Delivered by FeedBurner

Blogroll

Categories

RSS Telematics Freedom

February 2006
M T W T F S S
    Mar »
 12345
6789101112
13141516171819
20212223242526
2728  

Archive

Sky Sponsored by Web Hosting