This is an article to demo the crudest form which uses Joomla's version 2.5 core mootools (uncompressed?). This is intended for absolute novices (like me) who just want to see an example of an AJAX form within Joomla 1.6.x - 2.5.x in it's most basic state. At time of print, I am using this with Joomla 2.5.6.
Why?
The examples of the official site (mootools.net) did not work in my Joomla environment nor did most people's examples across the web. All I wanted was a basic example to show me how to send a form asynchronously (ie. running in the background without loading a new page).
How?
This form is more AJ than AJAX as I don't even use an XML file. You'll need to create a receiving file that sends back the data, in my case, I've called it ajax.form.php and the contents of which are:
copyraw
This just prints back an array of data that was sent to it; obviously you may want to tidy this up but the more basic the receiving data the better. In my example, I'm returning some HTML but for security and stability, you will want this to use an XML file depending on the level of detail you want back.<?php print "<pre>".print_r($_POST, true)."</pre>"; ?>
- <?php
- print "<pre>".print_r($_POST, true)."</pre>";
- ?>
The biggy
The following code is basically the least amount of code (or near enough) you will need to get this to work:
copyraw
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://www.yoursite.com/media/system/js/mootools-core-uncompressed.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
$('myForm').addEvent('submit', function(e) {
// Prevents the default submit event from loading a new page.
e.stop();
// Set the options of the form's Request handler.
// ("this" refers to the $('myForm') element).
this.set('send', {
onComplete: function(response) {
$('log').set('html', response);
}
});
// Send the form.
this.send();
});
});
</script>
<style type="text/css">
.aCoupleOfDivs {
background-color:#efefef;
border:2px solid #ccc;
width:300px;
float:left;
}
</style>
<title>Basic Mootools Form in Joomla 2.5</title>
</head>
<body>
<h1>Basic Mootools Form in Joomla 2.5</h1>
<form id="myForm" action="ajax.form.php" method="post">
<div id="form_box" class="aCoupleOfDivs">
<div>
<p>Name:</p>
<input type="text" name="u_name" value="John Smith" />
</div>
<div>
<p>E-Mail:</p>
<input type="text" name="e_mail" value="jsmith@yoursite.com" />
</div>
<div>
<p>Sample CheckBox:</p>
<input type="checkbox" name="sample_checkbox" value="yes" checked="checked" />
</div>
<div>
<p>Sample SelectList:</p>
<select name="sample_selectlist">
<option value="yes" selected="selected">yes</option>
<option value="no">no</option>
</select>
</div>
<input type="submit" name="button" />
</div>
</form>
<div id="log" class="aCoupleOfDivs">
<!-- returned results to show here (replaces contents of this div) //-->
<h3>Ajax Response</h3>
<p>Ready, Willing and Able</p>
</div>
</body>
</html>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <script type="text/javascript" src="http://www.yoursite.com/media/system/js/mootools-core-uncompressed.js"></script>
- <script type="text/javascript">
- window.addEvent('domready', function() {
- $('myForm').addEvent('submit', function(e) {
- // Prevents the default submit event from loading a new page.
- e.stop();
- // Set the options of the form's Request handler.
- // ("this" refers to the $('myForm') element).
- this.set('send', {
- onComplete: function(response) {
- $('log').set('html', response);
- }
- });
- // Send the form.
- this.send();
- });
- });
- </script>
- <style type="text/css">
- .aCoupleOfDivs {
- background-color:#efefef;
- border:2px solid #ccc;
- width:300px;
- float:left;
- }
- </style>
- <title>Basic Mootools Form in Joomla 2.5</title>
- </head>
- <body>
- <h1>Basic Mootools Form in Joomla 2.5</h1>
- <form id="myForm" action="ajax.form.php" method="post">
- <div id="form_box" class="aCoupleOfDivs">
- <div>
- <p>Name:</p>
- <input type="text" name="u_name" value="John Smith" />
- </div>
- <div>
- <p>E-Mail:</p>
- <input type="text" name="e_mail" value="jsmith@yoursite.com" />
- </div>
- <div>
- <p>Sample CheckBox:</p>
- <input type="checkbox" name="sample_checkbox" value="yes" checked="checked" />
- </div>
- <div>
- <p>Sample SelectList:</p>
- <select name="sample_selectlist">
- <option value="yes" selected="selected">yes</option>
- <option value="no">no</option>
- </select>
- </div>
- <input type="submit" name="button" />
- </div>
- </form>
- <div id="log" class="aCoupleOfDivs">
- <!-- returned results to show here (replaces contents of this div) //-->
- <h3>Ajax Response</h3>
- <p>Ready, Willing and Able</p>
- </div>
- </body>
- </html>
Big Note: UPDATE 2012
It is important to refer to the correct mootools scripts in order for this to work. Unfortunately, clients who sign up to template providers who disallow access to their support forums after the subscription period expires are on the rise. I'm going to annoy them all by posting solutions here:
- for Joomla 1.6.x - 2.5.x: Out-of-the-box template:copyraw
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script> <script src="/media/system/js/mootools-more.js" type="text/javascript"></script> -- add subfolder if this is not in the root of the domain: -- eg. http://demo.joellipman.com/joomla25/ has file in -- <script src="/joomla25/media/system/js/mootools-core.js"... > -- also note that this form can work with simply the core mootools script -- but does not include the validation that is in the more mootools script.
- <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
- <script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
- -- add subfolder if this is not in the root of the domain:
- -- eg. http://demo.joellipman.com/joomla25/ has file in
- -- <script src="/joomla25/media/system/js/mootools-core.js"... >
- -- also note that this form can work with simply the core mootools script
- -- but does not include the validation that is in the more mootools script.
- for Yootheme: Warp 6: Yootheme template:copyraw
<script src="/media/system/js/mootools-core-uncompressed.js" type="text/javascript"></script> <script src="/media/system/js/mootools-more.js" type="text/javascript"></script> -- note that Yootheme warp does not include the mootools-more.js file: -- reminder: check for conflicts
- <script src="/media/system/js/mootools-core-uncompressed.js" type="text/javascript"></script>
- <script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
- -- note that Yootheme warp does not include the mootools-more.js file:
- -- reminder: check for conflicts
Additional Notes
You have no idea how long it has taken me to get this code in working order and as easy as it may be to others, this has been quite a challenge. I have tried so many examples, testing different mootools libraries to see why the Joomla ones weren't working. It may not be right, it may not be the best or optimized order but it works for me and that's pretty much all I needed.
- Change www.YourSite.com - Yeah note the URL to the mootools-core-uncompressed.js file, if you have this enabled in Joomla then you already have this and don't need to include it again (just view the source of your webpage that this form will be on).
- Does not use JQuery - Although most of the sites I work for use JQuery as well as MooTools, I needed this for a component that I was building and only wanted to use the files that Joomla versions 1.6 to 2.5 included in their basic install (vanilla/out-of-the-box).
- Will not work with Joomla 1.5 or less - Not 100% sure about this but I tried the example in the Official Joomla Documentation and I couldn't get it to work. They even add a note to say that Joomla 1.6 uses a different version of Mootools and handles forms differently.
Demo
Almost forgot this, you can view my example at: http://demo.joellipman.com/scriptdemos/basic_mootools_scripts/basic_joomla_mootools_form/. Note the receiving file is a PHP file and the contents were mentioned previously in this article (-> see ajax.form.php).
Category: Joomla :: Article: 429
