Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Intergrating AJAX Technology Into Your Modifications
Zero Tolerance's Avatar
Zero Tolerance
Join Date: Feb 2004
Posts: 813

 

England
Show Printable Version Email this Page Subscription
Zero Tolerance Zero Tolerance is offline 07-30-2005, 10:00 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 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:
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 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:
Code:
My_AJAX_Object.onreadystatechange(My_AJAX_Reciever);
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:
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 recieved 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 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:
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

https://vborg.vbsupport.ru/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
Reply With Quote
  #12  
Old 09-03-2005, 09:44 PM
Akex Akex is offline
 
Join Date: Jul 2003
Location: France
Posts: 111
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

First, thank you for this tutorial, very helpful.

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

So this code :

Code:
function My_AJAX_Reciever()
{
	if (My_AJAX_Object.readyState == 4 && My_AJAX_Object.status == 200 && My_AJAX_Object.responseText)
	{
		alert('Data recieved successfully\n\n' + My_AJAX_Object.responseText)
	}
}
Becomes

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 recieved successfully\n\n' + My_AJAX_Object.handler.responseText)
	}
}
Reply With Quote
  #13  
Old 10-02-2005, 02:04 AM
harmor19 harmor19 is offline
 
Join Date: Apr 2005
Posts: 1,324
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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
  #14  
Old 10-02-2005, 02:38 AM
Jenta Jenta is offline
 
Join Date: Dec 2004
Posts: 377
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

look at vbshout
its like a simple chat
Reply With Quote
  #15  
Old 12-26-2005, 01:46 PM
DaFire DaFire is offline
 
Join Date: Apr 2003
Posts: 29
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

the missing .handler. should really added to the first posts example
Reply With Quote
  #16  
Old 12-26-2005, 10:47 PM
PennylessZ28 PennylessZ28 is offline
 
Join Date: Mar 2002
Location: North America
Posts: 737
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

this was very useful, thanks
Reply With Quote
  #17  
Old 12-28-2005, 06:06 PM
DaFire DaFire is offline
 
Join Date: Apr 2003
Posts: 29
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

yes it's great start to integrate own ajax things.. I used rico.js but looks like it creates problems with some vb javascript so I change everything to vb-ajax now
Reply With Quote
  #18  
Old 06-25-2006, 07:33 PM
MP3 MP3 is offline
 
Join Date: Aug 2004
Posts: 89
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

For the JavaScript written in post 7 by " LiveWire " how can we add auto refresh so every 5 min it will check certain variables in a PHP file if its exist then small popup will shown if no nothing will happen and all of this will happen without the manually refresh.
Reply With Quote
  #19  
Old 07-02-2006, 01:49 PM
rogersnm rogersnm is offline
 
Join Date: Apr 2006
Location: Cyberspace, UK
Posts: 729
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

so for the:
PHP Code:
if ($_POST['do'] == 'ajax')
{
    echo 
$_POST['pagevar'];
    exit;

could i change it to:
PHP Code:
if ($_POST['do'] == 'ajax')
{
    echo 
$_POST['$variable'];
    exit;

if $variable is defined in the global_start?
Reply With Quote
  #20  
Old 07-02-2006, 02:44 PM
akanevsky akanevsky is offline
 
Join Date: Apr 2005
Posts: 3,972
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Yes.
Reply With Quote
  #21  
Old 07-02-2006, 02:53 PM
rogersnm rogersnm is offline
 
Join Date: Apr 2006
Location: Cyberspace, UK
Posts: 729
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

PHP Code:
if ($_POST['do'] == 'ajax')
{
    echo 
$_POST[$i] . '|||';
    echo 
$_POST[$really] . '|||';
    echo 
$_POST[$suck] . '|||';
    exit;

So once i have done that can i just put $suck in a template and it will automatically refresh when the user clicks a link?

What should i use for onclick?: eg <a href='#' onclick='return Who knows'>Refresh</a>

DOES ANYONE HAVE A WORKING EXAMPLE OF THIS?
Reply With Quote
Reply


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

Forum Jump


All times are GMT. The time now is 08:26 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04616 seconds
  • Memory Usage 2,319KB
  • Queries Executed 25 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (7)bbcode_code
  • (5)bbcode_php
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (3)pagenav_pagelink
  • (11)post_thanks_box
  • (3)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete