Magic Ajax in your Web Applications

 

Majax Demos

Here you will find the demos and source code for most use cases. For more detailed information, read the documentation.

 

Updating areas in a page

Source code


<div><a href="examples/areaA.php" data-majax="majaxLink majaxUpdate_demo1 majaxFire_eventDemo1">This link triggers 3 updates</a>: A updates with the link's URL content response, B and C update using URLs specified in their <code class="tag">data-url</code> attribute.</div>
<div id="majaxContain_demo1">This is area A, it updates with the trigger link content response.</div>
<div data-majax="majaxListenTo_eventDemo1" data-url="examples/areaB.php">Area B updates itself using its <code class="tag">data-url</code> attribute.</div>
<div data-majax="majaxListenTo_eventDemo1" data-url="examples/areaC.php">Area C also updates itself using its <code class="tag">data-url</code> attribute.</div>

Result

This link triggers 3 updates: A updates with the link's URL content response, B and C update using URLs specified in their data-url attribute.
This is area A, it updates with the trigger link content response.
Area B updates itself using its data-url attribute.
Area C also updates itself using its data-url attribute.
 
Reset this demo

Displaying Error Messages

Source code


<div>
<a href="examples/errorMessage.php" data-majax="majaxLink majaxMessageTarget_errorMessage">Error message displayed within the page</a> | <a href="examples/modalMessage.php" data-majax="majaxLink">Error message displayed in modal box</a></div>
<div>Error messages are displayed below.</div>
<div data-majax="majaxMessageZone_errorMessage">Here you will see the error message</div>
</div>

Result

Reset this demo

Forms and Majax

Source code


<div id="majaxContain_yourname">
<form method="post" action="examples/nameForm.php" data-majax="majaxForm majaxUpdate_yourname majaxFire_nameDone">
<p>Last name:  <input type="text" name="lastname" value="" /></p>
<p>First name:  <input type="text" name="firstname" value="" /></p>
<p><input type="submit" name="go" value="Let us know you!" /></p>
</form>
</div>
<div data-majax="majaxListenTo_nameDone" data-url="examples/hello.php">This area will be updated once the form validates and its submission succeeds.</div>

Result

Last name:  

First name:  

This area will be updated once the form validates and its submission succeeds.
 
Reset this demo

Majax forms and Modal Boxes

Source code


<div><a href="examples/demoModalForm.php" data-majax="majaxModal majaxUpdate_yournameModal majaxFire_nameDoneModal">Load form in modal box!</a></div>
<div id="majaxContain_yournameModal">This area will get updated once modal box closes, using a link's content response.</div>
<div data-majax="majaxListenTo_nameDoneModal" data-url="examples/simpleHello.php">This area will get updated once modal box closes, using its <code class="tag">data-url</code> attribute to fetch its content.</div>

Result

This area will get updated once modal box closes, using a link's content response.
This area will get updated once modal box closes, using its data-url attribute to fetch its content.
 
Reset this demo

PHP source code


<?php header("Content-Type: application/json"); 
$result = "success";
$lastname = '';
$firstname = '';
$error = '';
if (isset($_POST['lastname'])) {
  $lastname = trim($_POST['lastname']);
 }
if (isset($_POST['firstname'])) {
  $firstname = trim($_POST['firstname']);
 }

if ((!empty($_POST)) && ($lastname == '' || $firstname == '')) {
  $result = 'formError';
  $error = "Please fill all the fields";
 }

if (empty($_POST) || $lastname == '' || $firstname == '') { 
  $form = <<<EOT
<form method="post" action="examples/demoModalForm.php" data-majax="majaxForm majaxUpdate_yournameModal majaxFire_nameDoneModal">
  <p>{$error}</p>
<p>Last name:  <input type="text" name="lastname" value="{$lastname}" /></p>
<p>First name:  <input type="text" name="firstname" value="{$firstname}" /></p>
<p><input type="submit" name="go" value="Let us know you!" /></p>
</form>
EOT;

  $form = str_replace('"', '\"', $form);
  $form = str_replace("\n", '', $form);
 } else {
  $form = "<div>Hello {$firstname} {$lastname}! Good to see you here!</div>";
 }
?>
{"result":"<?php echo $result; ?>", "content": "<?php echo $form; ?>" }