Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
Intergrating AJAX Technology Into Your Modifications
Zero Tolerance
Join Date: Feb 2004
Posts: 813

England
by Zero Tolerance Zero Tolerance is offline 31 Jul 2005
Rating: (1 vote - 5.00 average)

This How-To will show you how to use the defined AJAX functions within vBulletin so developers can see how easily it is to intergrate AJAX technology into modifictions. 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 recieve any data returned with no reloading, so if you're thinking of intergrating AJAX then you must first have a scenario where you wish to push data and recieve it, recieval 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 recieved 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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

You'll notice the one and only passive variable here for the function 'vB_AJAX_Handler' is set to 'true', this determines wether 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 recieves data, an example is below:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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 recieved. How you handle the data is upto you.

Step 3 - Firing And Recieving Data:

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:
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

Last edited by Zero Tolerance; 27 Dec 2005 at 01:24..
Views: 14200
Reply With Quote
Comments
  #2  
Old 31 Jul 2005, 02:00
Christine's Avatar
Christine Christine is offline
 
Join Date: Nov 2001
Real name: Christine. Really.
Thank you!!
__________________
L'chaim
Reply With Quote
  #3  
Old 31 Jul 2005, 02:02
calorie calorie is offline
 
Join Date: May 2003
Yep, thanks for the toot.
Reply With Quote
  #4  
Old 03 Aug 2005, 10:23
Brad Brad is offline
 
Join Date: Nov 2001
Originally Posted by Zero Tolerance
You'll notice the one and only passive variable here for the function 'vB_AJAX_Handler' is set to 'true', this determines wether 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.
Just to add to this:

Asynchronously:

Processing is done in the backround and allows the user to use do other things on the page while the request is begin made and returned. You should use this is most cases

Synchronously:

Page is 'locked' until request is made and data is returned to the browser. This should not be used often because if there is a connection timeout or other issues the user will be left with a page that will not function.
Reply With Quote
  #5  
Old 03 Aug 2005, 11:12
yoyoyoyo's Avatar
yoyoyoyo yoyoyoyo is offline
 
Join Date: Dec 2004
excellent info! thanks
Reply With Quote
  #6  
Old 07 Aug 2005, 06:11
TCM TCM is offline
 
Join Date: Jan 2005
Location: 3.6.8
This helps a lot, thanks!
Reply With Quote
  #7  
Old 23 Aug 2005, 22:59
Logikos Logikos is offline
 
Join Date: Jan 2003
I have a question/problem. I've read this over and over untill my eyes hurt, and I can't seem to get it to work. Here is the code I'm using:


test.js includes:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

My PHP file contains:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


I don't understand what I place in the HTML part? Could you please show some code example. The PHP/Java/HTML. Thanks
__________________
Full Time PHP Developer
Please feel free to contact me if you have any paid work to be done.
Reply With Quote
  #8  
Old 27 Aug 2005, 22:49
Zero Tolerance's Avatar
Zero Tolerance Zero Tolerance is offline
 
Join Date: Feb 2004
Real name: Scot

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

No doubt you'll get a JS error on that line, because "My_Variable" is undefined, you can remove that line.

Also the HTML would just include the JS file, ie:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

As I stated in the main post, getting the JS to change the html on the page dynamically is up to you, it is recommended you know Javascript really. If you would like to look at a working example i'd suggest looking at my vBShout for 3.5 really.

- Zero Tolerance
Reply With Quote
  #9  
Old 28 Aug 2005, 00:20
Logikos Logikos is offline
 
Join Date: Jan 2003
Thanks Scott, I've been reading alot of tutorials, and I've been studying your code with your shoutbox hack. I'm slowly getting the hang of it, but it is going to take alot of time.

I'm in the middle of a project and I am making the core of the project all ajax. I've figured out how to do a few things; one thing Iím trying to do is open new pages without reload. I see GMail does that, and I believe it has to do with Iframes, but Iím not sure. I'll get it eventually, I've pored many late nights reading so, I better get it soon!
__________________
Full Time PHP Developer
Please feel free to contact me if you have any paid work to be done.
Reply With Quote
  #10  
Old 28 Aug 2005, 02:31
jugo jugo is offline
 
Join Date: Feb 2004
Originally Posted by Live Wire
I see GMail does that, and I believe it has to do with Iframes

LiveWire

i think it has more to do with DIVs than iFrames....but i could be wrong.
__________________
NovaWarfare.com - Bringing back the Game - http://www.NovaWarfare.com

Website Hosting - Game Server Hosting - http://www.freaks-network.com
Teamspeak Status Block for vBAdvanced / PHP-Nuke / php Include

PM me if you need hacks installed or simple template modifications...I'm cheap..
Reply With Quote
  #11  
Old 03 Sep 2005, 22:44
Akex Akex is offline
 
Join Date: Jul 2003
Real name: Alexis
First, thank you for this tutorial, very helpful.

You forgot to put one key world in your javascript code : handler

So this code :


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Becomes


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

__________________
www.vbulletin-fr.org administrator
Member of the french unofficial translators team of vB 3
Reply With Quote
  #12  
Old 02 Oct 2005, 03:04
harmor19 harmor19 is offline
 
Join Date: Apr 2005
Real name: Andrew Harmor
I did the code above but it didn't work at first.
I changed the $_POST to $_GET then I passed test.php?do=ajax&pagevar=rrr in the address bar and it worked.
But using $_GET is insecure.

Can someone make a small working example like a simple chat?
Reply With Quote
  #13  
Old 02 Oct 2005, 03:38
Jenta Jenta is offline
 
Join Date: Dec 2004
look at vbshout
its like a simple chat
Reply With Quote
  #14  
Old 26 Dec 2005, 14:46
DaFire DaFire is offline
 
Join Date: Apr 2003
the missing .handler. should really added to the first posts example
Reply With Quote
  #15  
Old 26 Dec 2005, 23:47
PennylessZ28 PennylessZ28 is offline
 
Join Date: Mar 2002
Real name: Mike
this was very useful, thanks
Reply With Quote
Reply



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

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 00:37.

Layout Options | Width: Wide Color: