Messing around with Dojo has been great fun, sometimes frustrating with the latest 0.9 Dojo release and the lack of documentation. But, after much picking at my script, I was able to create simple forms, send them and receive information through Dojo’s xh
Read The Full Tutorial.
Messing around with Dojo has been great fun, sometimes frustrating with the latest 0.9 Dojo release and the lack of documentation. But, after much picking at my script, I was able to create simple forms, send them and receive information through Dojo’s xhrGet function.
Include the following code within the <head> and </head> tags of your document.
<code>
<script type=”text/javascript” src=”/path to dojo/dojo.js” djConfig=”parseOnLoad:true”></script>
</code>
Include the form widgets you would like to use. I have the basics below:
<code>
<script type=”text/javascript”>
dojo.require(”dijit.form.TextBox”);
dojo.require(”dijit.form.CheckBox”);
dojo.require(”dijit.form.Button”);
</code>
Don’t forget the parser
<code>
dojo.require(”dojo.parser”);
</code>
Now for our main function
<code>
function getFormData() {
var kw = {
url: “/path to your php page handler/pagename.php”, //Explicit Path - leaving out the leading / seemed to break the code
load: function(data){
dojo.byId(’formdata’).innerHTML = data; // where do you want your data to be returned.
},
error: function(data){
alert(”An error occurred: ” + data); //in case of error
},
timeout: 2000,
form: “login” //what form
};
dojo.xhrGet(kw);
}
</code>
A Simple Form:
<code>
<div id=”formdata”>
<form name=”login” id=”login” method=”GET”>
<label for “user_name”>User Name</label>
<input id=”user_name” type=”text” name=”user_name”
dojoType=”dijit.form.TextBox” />
<label for “password”>Password</label>
<input id=”password” type=”password” name=”password”
dojoType=”dijit.form.TextBox” />
<button dojoType=”dijit.form.Button” onclick=”sendFormData()”>
Submit
</button>
</form>
</div>
</code>
Create your PHP Page:
<code>
<?
echo “Hello “.$_REQUEST[user_name].”. Your password is: “.$_REQUEST[password].”;
?>
</code>
Complete your form and click submit.
Demo Script
source: linux-girl
|
Ajax Projects
