Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Zero Tolerance · 07-25-2006, 06:27 PM

This How-To will show you how to use the defined AJAX functions within vBulletin so developers can see how easily it is to integrate AJAX technology into modifications. Please note this tutorial is aimed at developers with some javascript knowledge.

Step 1 - Understand AJAX:

As many of you will know, AJAX gives the ability to pass data through a stream and receive any data returned with no reloading, so if you're thinking of integrating AJAX then you must first have a scenario where you wish to push data and receive it, data being received is not required however is probably the best part of AJAX in a users opinion due to the dynamic changes that occur to present the received data.

Step 2 - Setting Up AJAX:

Okay, so you want to set up AJAX, real easy, the first step is to create an AJAX Object, this can be done with ease using the vBulletin set-up, an example is below:

Code:

My_AJAX_Object = new vB_AJAX_Handler(true);

You'll notice the one and only passive variable here for the function 'vB_AJAX_Handler' is set to 'true', this determines whether to use asynchronous or not, set to false if you do not desire to use it, if you're unsure leave this set to true.

So now you have your AJAX Object set up, before firing data you'll need to to set the object to respond to a function for when it receives data, an example is below:

Code:

My_AJAX_Object.onreadystatechange(My_AJAX_Reciever);

Here the parameter is not so much a variable, but in fact a function name, in this case i put 'My_AJAX_Reciever', so that function must exist, an example function is below:

Code:

function My_AJAX_Reciever()
{
	if (My_AJAX_Object.handler.readyState == 4 && My_AJAX_Object.handler.status == 200 && My_AJAX_Object.handler.responseText)
	{
		alert('Data received successfully\n\n' + My_AJAX_Object.handler.responseText)
	}
}

This function pretty much checks the stream has loaded and sent data back to the browser, upon success it will alert you to say it was successful, and the data it received. How you handle the data is up to you.

Step 3 - Firing And Receiving Data:

So now you want to fire some data through AJAX, and get some back, let's first look how we fire data:

Code:

My_AJAX_Object.send('myfile.php', 'do=ajax&pagevar=text');

Let's take a quick overlook at the parameters used here:

Parameter 1 - The file you want to send the data to.
Parameter 2 - Post variables you want to send through.

In most cases your post variables (parameter 2) would fluxuate, and you may want to send some variables that users have inputted, if so you may want to take advantage of vBulletin's javascript emulation of urlencode(), first off you'd parse the variable in javascript before firing off, as shown below:

Code:

My_Variable = PHP.urlencode(My_Variable);

This makes the variable safe for the stream to send the data, however some characters will be broken, to fix these in your php when collecting the variable you would parse it like so:

PHP Code:

  $My_Variable = convert_urlencoded_unicode($My_Variable);

Okay, so you've now fired data off to 'myfile.php', with the variables: do (ajax) and pagevar (text). Now comes the PHP part, where you handle the data and output some back to be recieved:

PHP Code:

  if ($_POST['do'] == 'ajax')

{

    echo $_POST['pagevar'];

    exit;

}

Simple as that? Pretty much, ofcourse the desired data to be sent back due to the data sent is completely up to you, if you've set the javascript up with the examples used above you should get a message saying:

Quote:

Data recieved successfully

text

So if you're not sure, what the PHP outputs AJAX grabs, and just to ensure the script ends there it's best to make PHP stop execution of any code underneath by using exit;, this ofcourse it not required, just likely in most situations

Remember, to grab using AJAX what PHP outputted, the code is My_AJAX_Object.responseText

Final Line - Handling Data and Dynamics:

So you've managed to successfully fire some data off, and got some back, now you want to fiddle with it in Javascript and make changes to your page?
Then i'm afraid you're on your own for that job, how you handle the recieved data is completely upto you and the scenario you're using AJAX in.

If you wish to see more information on AJAX, i suggest you look at this tutorial i wrote a while ago for vBulletin.org, it includes more information on AJAX than posted here

http://www.vbulletin.org/forum/showthread.php?t=81626

Any questions/problems reply here and i'll try to resolve them for you, the code above is all written off the top of my head, but i don't see any errors myself, feel free to report them to me though

- Zero Tolerance

Nick R · 07-25-2006, 08:21 PM

and it does work :p

....

eventually.....

if your not me....

Nick R · 07-26-2006, 07:39 AM

if anyone wants a working example to play with just ask

08-28-2006, 01:30 PM

very good tutorial m8, both here and @ vb.org.

i got 1 question regarding the ajax involved with the quickreply.
when doing a quick reply, from what i've seen it's sends data to the bottom of showthread page. suppose i would want to change (remove some box with text & replace it with another box with test) something @ top of showthread page (after quick reply), since there is no refresh - any code i put under some showthread_*** hook doesn't seem to work.
can u help with some ideas to get this one done ?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
AJAX Merge	Nick R	vBulletin Modification Requests	0	07-05-2006 04:14 PM

Member Log In

Site Navigation

Latest Modifications

Latest Template Mods

Latest Styles

Latest Graphics

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)