Marius' Blog » AJAX

Front End AJAX in WordPress

Marius — Wed, 29 Jun 2011 08:14:36 +0000

Copy the below code in a file (frontend-ajax.php) and call it as an AJAX url.

PHP code:

define("DOING_AJAX",true);

require_once("../../../wp-load.php");// Add wp-load.php file.
if(!isset($_REQUEST["action"])||trim($_REQUEST["action"])==""){
die("-1");
}

@header("Content-Type: text/html; charset=".get_option("blog_charset"));
include_once("filePath"); // Including your plugin’s main file where ajax actions are defined.

send_nosniff_header();

    

if(has_action("wp_ajax_".$_REQUEST["action"])){

    do_action("wp_ajax_".$_REQUEST["action"]);

    exit;

}
status_header(404);

Thumbnail Gallery (WordPress Plugin)

Marius — Fri, 17 Jun 2011 07:05:54 +0000

Description: This Plugin will help you to easily add a thumbnail gallery to your WordPress website or blog. The gallery is completely customizable, resizable and is compatible with all browsers and devices (iPhone, iPad and Android smartphones). You will be able to insert it in any page or post you want with inbuilt
short code generator.
Download & Preview: CodeCanyon
Technologies: AJAX, CSS, HTML, JavaScript, jQuery, PHP, WordPress

Wall/Grid Gallery (WordPress Plugin)

Marius — Tue, 14 Jun 2011 10:04:11 +0000

Description: This Plugin will help you to easily add a grid gallery to your WordPress website or blog. The gallery is completely customizable, resizable and is compatible with all browsers and devices (iPhone, iPad and Android smartphones). You will be able to insert it in any page or post you want with inbuilt short code generator.
Download & Preview: CodeCanyon
Technologies: AJAX, CSS, HTML, JavaScript, jQuery, PHP, WordPress

AJAX Booking Calendar Pro (jQuery Plugin)

Marius — Mon, 30 May 2011 08:20:57 +0000

Description: This item is ideal if you want to add information about bookings to your rentals website. The Back End is easy to use and can be easily integrated into your own CMS as the Front End can be easily integrated into your website. Both Back End and Front End can be customized separately, and the number of usages on your webpage or website is unlimited.
The Calendar comes with a PHP script, but any server side script can be used to load or to save data from any database. The Booking Calendar is compatible with all browsers and devices (iPhone, iPad and Android smartphones).
Download & Preview: CodeCanyon
Technologies: AJAX, CSS, HTML, JavaScript, jQuery

Karisma Sportwear

Marius — Sat, 29 Jan 2011 15:54:21 +0000

[nggallery id=5 template=slideshow]

Description: Karisma Sportwear store.
Website: http://www.karismasport.com/
Design: 2Mediax
Developed for: Vuzum
Technologies: AJAX, CSS, HTML, JavaScript, jQuery, PHP

AJAX form request using POST method

Marius — Wed, 05 Aug 2009 08:33:34 +0000

Here is a way you can call a server side script with AJAX, using POST method.

JavaScript code:

var xmlHttpVariable;// Declare a global variable.
// HTTP request object.

function GetXmlHttpObject(){

    var xmlHttp = null;
    try{

        xmlHttp = new XMLHttpRequest();

    }

    catch (e){

        try{

            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

        }

        catch (e){

            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

    }
    return xmlHttp;

}
function callServer(){

    xmlHttpVariable = new GetXmlHttpObject(); // Call HTTP request object.

    var url = "url"; // Set the URL to the server-side script.

    var variables = "var1=val1&var2=val2"; // Set the variables.

    xmlHttpVariable.onreadystatechange = stateChangedVariable; // Call a function on state change.

    xmlHttpVariable.open("POST",url,true); // Open the URL.

    // Send the proper header information along with the request.

    xmlHttpVariable.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xmlHttpVariable.setRequestHeader("Content-length", variables.length);

    xmlHttpVariable.setRequestHeader("Connection", "close");

    xmlHttpVariable.send(variables); // Send the variables.

}
function stateChangedVariable(){

    if (xmlHttpVariable.readyState == 4){// Values for readyState see below for explanations.

        if (xmlHttpVariable.responseText.replace(/^\s+|\s+$/g, "") == "return value"){

            // Action here.

        }

    }

}

readyState values:

0 – Represents an “uninitialized” state in which an XMLHttt pRequesobject has been created, but not initialized.

1 – Represents a “sent” state in which code has called the XMLHttpRequest open() method and the XMLHttpRequest is ready to send a request to the server.

2 – Represents a “sent” state in which a request has been sent to the server with the send() method, but a response has not yet been received.

3 – Represents a “receiving” state in which the HTTP response headers have been received, but message body has not yet been completely received.

4 – Represents a “loaded” state in which the response has been completely received.