AJAX in ImpressPages CMS

In this tutorial you will learn how to use jQuery AJAX in ImpressPages CMS. This example shows how to create a <div> that dynamically changes its content on click action using AJAX.

Please download the source code and install the plugin. Then follow the tutorial to see how we have made it.

Example source code

Step 1 - add jQuery library

AJAX functions are much easier if you use jQuery. Add these lines to your template's head section to include jQuery library:

<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/jquery/jquery.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
</script>

We use jQuery noConflict mode to avoid conflict with prototype library by default included into ImpressPages CMS. Read here how to remove prototype library and use short jQuery syntax.

From ImpressPages CMS 1.0.9 jQuery is the main JavaScript library.

Step 2 - create plugin sceleton

Now we need to create a new plugin that will handle AJAX requests. Follow the steps in "Hello world" plugin and replace "hello_world" with "ajax".

Step 3 - add HTML block that will be used in interaction

<div class="exampleBlock">Click here to replace this text using AJAX</div>

Step 4 - JavaScript

Add JavaScript file my_script.js that will handle click action and execute AJAX request. Read the comments for more details.

my_script.js

Step 5 - handle request in PHP

JavaScript function posts two parameters:

module_group = examples
module_name = ajax

This indicates the system that it needs to execute makeActions method on Actions class in examples/ajax/actions.php file.

Read the comments in the source code for more details.

actions.php

Write a comment

You must be logged in to comment.