Passing the variable data from JavaScript to Drupal/PHP is one thing. Passing the information from Drupal/PHP to JavaScript is another separate thing. I think that you meant the first one in your question. So I'll go ahead and answer that.
**Passing variables from JavaScript to Drupal/PHP**
1) Implement a [menu hook][1]. You can do that on an existing contributed or new custom module, it depends what you are doing. It's pretty easy and straight forward, it is also well documented on the Drupal site.
$items = array();
$items['my_custom_callback/%'] = array(
'title' => 'My Custom Callback',
'description' => 'Listing of blogs.',
'page callback' => 'my_custom_php_function',
'page arguments' => array(1),
'access arguments' => array('access content'),
'type' => MENU_CALLBACK,
);
Let's break down the example above.
<code>
$items['my_custom_callback/%']
</code>
*$items* is just an array, and it can be named anything you like. If the URL of my website is *www.alexanderallen.name*, then <code>
[To see links please register here]
</code> would be the resource that I would call from my JavaScript application.
In the array's key, the percentage symbol after the word *my_custom_callback* is a placeholder. This is where you will pass your data from JS to PHP. So if the value of variable x is 10, the call from your JQuery will look like this:
<code>
[To see links please register here]
</code>
When you load that URL, Drupal will find your menu hook, and it will call the function you defined in the 'page callback' array key. In this case that would be:
<?php
/**
* Function that gets called from JQuery asynchronously.
*/
function my_custom_php_function($argument) {
// Do something with $argument...
echo $argument;
}
?>
There you can do anything you want with the value of variable x, like storing it in the database.
If you were to put the menu hook on a custom module, and the name of your module were example_module, the menu hook and custom PHP callback would look like this:
<?php
/**
* @file example_module.module Handles fancy AJAX functionality.
*
*/
/**
* Implementation of hook_menu
*
* @see
[To see links please register here]
*/
function example_module_menu() {
$items = array();
$items['my_custom_callback/%'] = array(
'title' => 'My Custom Callback',
'description' => 'Listing of blogs.',
'page callback' => 'my_custom_php_function',
'page arguments' => array(1),
'access arguments' => array('access content'),
'type' => MENU_CALLBACK,
);
return $items;
}
/**
* Function that gets called from JQuery asynchronously.
*/
function my_custom_php_function($argument) {
// Do something with $argument...
echo $argument;
}
?>
If you wanted to pass multiple variables from JQuery to Drupal/PHP, you could consider JSONifying them in JavaScript, before passing it to PHP. Remember that if the payload is very large you should consider JQuery .post() instead of .get(). The PHP functions for decoding JSON are [here on php.net][2].
Don't forget to return $items at the end of the example_module_menu() function. If you wanted to pass two or more arguments from JavaScript to PHP then the menu item would look similar to this:
<?php
function example_module_menu() {
$items = array();
$items['my_custom_callback/%/%/%'] = array(
'title' => 'My Custom Callback',
'description' => 'Listing of blogs.',
'page callback' => 'my_custom_php_function',
'page arguments' => array(1, 2, 3),
'access arguments' => array('access content'),
'type' => MENU_CALLBACK,
);
return $items;
}
function my_custom_php_function($arg1, $arg2, $arg3) {
// Do something ...
$sum = $arg2 + $arg3;
echo "Hi". $arg1 .", X + Z = ". $sum;
}
?>
In this case I am passing three arguments to PHP. *'page arguments'* specifies the part of the URL that you want to pass to PHP. If you were to write <code>'page arguments' => array(0),</code>, then the argument to your PHP function would be the string *my_custom_callback*.
----------
2) Call the menu hook from your JS code using JQuery. JQuery provides various AJAX methods. Which one you use will depend on the format of the data your dealing with and it's size, amongst other things.
Most likely you will use one of two JQuery methods. [.post()][3] or [.get()][4], bearing in mind that that post requests will allow for a bigger data payload than get requests. So if the size of variable x = 10, you might want to stick with .get(). Both .post() and .get() methods are an extension of, or rely on the [.ajax()][5] method. The .ajax() method is more flexible because it provides you with more options, like the ability to specify the format of the data (JSON or plain-text), send a username/password along with your request, choose between synchronous or asynchronous requests, and whether the browser should cache or not the request.
This is the method signature for the JQuery .get() method:
<code>
jQuery.get( url, [ data ], [ callback(data, textStatus, XMLHttpRequest) ], [ dataType ] )
</code>
If you were going to send your data using GET to Drupal/PHP, using the example above you could do something like this:
<script type='text/javascript'>
var name = 'alexander';
var x = 10;
var z = 20;
$.get(
// Callback URL.
"http://www.alexanderallen.name/my_custom_callback/"+ name +"/"+ x +"/"+ z
);
</script>
Note that the usage of the data argument on the .get() method is optional, and in my example I omitted it, but achieved the same effect by concatenating the data to pass to Drupal/PHP with the rest of the URL.
If I were to run that, the HTTP GET request would look like:
<code>
[To see links please register here]
</code>
and the response would look like:
<code>
Hi Alexander, X + Z = 30
</code>
**Passing data from Drupal to JavaScript**
For that then you would use Behaviors, I am not entering into details since I think that wasn't your question, but you can go to the official documentation for Drupal 6 behaviors [here][6].
[1]:
[To see links please register here]
[2]:
[To see links please register here]
[3]:
[To see links please register here]
[4]:
[To see links please register here]
[5]:
[To see links please register here]
[6]:
[To see links please register here]
]
