The Arcive of Official vBulletin Modifications Site.

Lionel · #1 10-15-2006, 02:17 PM

I am working on a nice hack: Calendar sports predictions

I have my predictions.php where I have all the code laid out for submissions, but it is important to me that the prediction are done in ajax so the user does not leave the page which sometimes has multiple events, thus multiple predictions (for each event).

I sought help in the paid forums, got the run around by 2 wantabe coders so I decided to do it myself, and if not for the ajax, I am pretty much done.

What I am looking for is something in the manner of the Post Thank You hack to submit into a TABLE_PREFIX ."predictions.

That's all I need. As a picture is worth a thousand words, I am attaching two of them, both from calendar custom fields.

Please someone give me the ajax formula. I never worked on ajax before and I have no idea where to start. I need the formula when you click on submit to submit to predictions.php and the one when you click on remove simply deletes the predictions (once it is deleted the boxes reappear, providing that timenow is smaller than dateline_from, all that is done already)

nico_swd · #2 10-15-2006, 02:19 PM

Post your HTML form and I'll help you.

Lionel · #3 10-15-2006, 02:27 PM

nico, thank you. The html form really is just a simple form

Quote:

<form action="predictions.php" method="post"><input type=hidden value="do"><input type="hidden" value="dopredict">
then I have the different fields which are dynamic
<input type=text value=Home>
<input type=text value=Away>
and the submit button

see, since this is for sports, I created two custom fields and named them Home and Away, and I get them with $customtitle for value. So the boxes are always right (they are in calendar_showevents_customfieldsbit)

The 2 templates that I am working with are calendar_showeventsbits
and calendar_showevents_customfields. The form is in the showevents and the fields are in the custom fields.

Since there was no hook for customfields, I had to do all the coding the php, at the foreach loop.

and my current database structure (which will be extended but has nothing to do with the ajax part)

PHP Code:


			
   id  int(10)   No    auto_increment              
   eventid  int(10)   No  0                
   userid  int(10)   No  0                
   homepred  int(3)   No  -1                
   awaypred  int(3)   No  -1                
   homeactual  int(3)   No  -1                
   awayactual  int(3)   No  -1                
   hometeam  varchar(50)   No                  
   awayteam  varchar(50)   No                  
   iswinner  tinyint(1)   No  0

homeactual, awayactual and iswinner are not to be used with ajax. Those are moderator input and iswinner is dynamic that I use in leaderboard, results, stats etc...

nico_swd · #4 10-15-2006, 02:51 PM

Your form is somewhat messed up. I need the names of the input fields, and I need to know which values you want to send to your PHP script.

Here a raw example.

Code:

<script type="text/javascript">

function create_req_object()
{
	var req = false;
	
	if (window.XMLHttpRequest)
	{
		req = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		var msp = new Array('Microsoft', 'Msxml2');
		
		for (var i in msp)
		{
			try
			{
				req = eval('ne' + 'w Act' + 'iveXObj'+ 'ect(msp[i] + ".XMLH'+ 'TTP");');
			}
			catch(e)
			{
				continue;
			}
		}
	}
	
	return req;
}

function submit_form(form)
{
	var http = create_req_object();
	
	if (!http)
	{
		return true;
	}

	http.open('POST', form.action);
	http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	http.onreadystatechange = function()
	{
		if (http.readyState == 4 && http.status == 200)
		{
			alert("The data has been submitted.");
		}
	}
	http.send('do=dopredict&foo='+ form.fieldname.value +'&bar='+ form.otherfield.value);
	return false;
}

</script>
<form action="predictions.php" method="post" onsubmit="return submit_form(this);">
<input type="hidden" value="do"><input type="hidden" value="dopredict">
then I have the different fields which are dynamic
<input type=text value=Home>
<input type=text value=Away>
<input type="submit">
</form>

What this code would do is, if someone clicks submit, it will send the data via XMLHttpRequest to the PHP script, and show an alert once that happend.

You have to edit this line.

Code:

http.send('do=dopredict&foo='+ form.fieldname.value +'&bar='+ form.otherfield.value);

These are the variables that are sent to the script. You just have to change the names and maybe add more if necessary. it will send the data via POST, that means you can receive it's value with the $_POST or $vbulletin->GPC variables.

So if you'd do a print_r() for the example above you'd get something like this

Code:

Array
(
      do => dopredict,
      foo => (value of your field),
      bar => (value of your field),
)

Hope that helps.

Lionel · #5 10-15-2006, 02:58 PM

this the calendar_showeventsbit template

PHP Code:


			
  <if condition="$show['customfields']">

<if condition="$calendarinfo[calendarid]=='4'">

<form action="prediction.php" method="post"><input type="hidden" name="do" value="addpredict">

<table class="tborder" cellspacing="1" cellpadding="4" border="0">

<tr><td class="tcat" colspan="5">Interactive game details</td></tr>

<tr><td class="thead">Your predictions</td><td class="thead">Actual</td><td colspan="2" align="center" class="thead">Teams</td><td class="thead">Colors</td></tr>

</if>

   $customfields

<if condition="$calendarinfo[calendarid]=='4'">

<tr><td align="center">$button</td><td class="alt2" style="border-top:0px solid #c0c0c0;" align="center" colspan="4">insert link to leaderboard here</td></tr>

</table>

</form>

</if>

   <hr size="1" style="color:$stylevar[tborder_bgcolor]" />

  </if>

]

and the fields are in calendar_showeventsbit_customfield

PHP Code:


			
<if condition="$show['customoption']">

<div class="smallfont">

<if condition="$customtitle=='Home' OR $customtitle=='Away'">

<tr><td align="center">

$box

</td><td class="alt2" align="center">$score</td><td nowrap></if>

<strong>$customtitle</strong>:

<if condition="$customtitle=='Home' OR $customtitle=='Away'"></td><td>

</if>

$customoption

<if condition="$customtitle=='Home' OR $customtitle=='Away'">

</td><td><img src="images/calendarteams/$customoption.gif"></if> 

</div>

</if>

<if condition="$customtitle=='Home' OR $customtitle=='Away'"></td></tr>

</if>

and the way it displays

PHP Code:


			
<td align="center">

<input name="Home" type="text" size="1" value="">

</td><td class="alt2" align="center"></td><td nowrap>

<strong>Home</strong>:

</td><td>

US Freres

</td><td><img src="images/calendarteams/US Freres.gif"> 

</div>

</td></tr>

 

<div class="smallfont">



<tr><td align="center">

<input name="Away" type="text" size="1" value="">

</td>

and in calendar.php

$box="<input name=\"$customtitle\" type=\"text\" size=\"1\" value=\"\">";
$button="<input type=\"image\" src=\"$stylevar[imgdir_button]/predict.gif\">";

Nico,

I have some problems. The form submits, but it's not ajax.

and I also have a javascript error. Here is what I am submitting

Quote:

and here is my predictions.php

PHP Code:


			
if ($_REQUEST['do'] == 'addpredict')

{

 // get input data

 $vbulletin->input->clean_array_gpc('r', array('eventid' => TYPE_UINT, 'Home' => TYPE_UINT, 'Away' => TYPE_UINT, '1Home' => TYPE_STR, '1Away' => TYPE_STR));

 

 $eventid =& $vbulletin->GPC['eventid'];

 $home   =& $vbulletin->GPC['Home'];

 $away   =& $vbulletin->GPC['Away'];

 $hometeam   =& $vbulletin->GPC['1Home'];

 $awayteam   =& $vbulletin->GPC['1Away'];

 $player=$vbulletin->userinfo['userid'];

$db->query("INSERT into new_predictions(id,eventid,userid,homepred,awaypred,hometeam,awayteam) VALUES ('','$eventid','$player','$home','$away','$hometeam','$awayteam')");   

}

nico_swd · #6 10-15-2006, 08:28 PM

There were a couple of syntax errors. Also note that variable names cannot begin with numbers. Neither in PHP nor Javascript. (I changed 1Home to Home1 and 1Away to Away1).

This works for me.

Code:

<script type="text/javascript">
function create_req_object()
{
	var req = false;
	
	if (window.XMLHttpRequest)
	{
		req = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		var msp = new Array('Microsoft', 'Msxml2');
		
		for (var i in msp)
		{
			try
			{
				req = eval('ne' + 'w Act' + 'iveXObj'+ 'ect(msp[i] + ".XMLH'+ 'TTP");');
			}
			catch(e)
			{
				continue;
			}
		}
	}
	
	return req;
}

function submit_form(form)
{
	var http = create_req_object();
	
	if (!http)
	{
		return true;
	}

	http.open('POST', form.action);
	http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	http.onreadystatechange = function()
	{
		if (http.readyState == 4 && http.status == 200)
		{
			alert("The data has been submitted.");
		}
	}
	http.send('do=addpredict&Home='+ form.Home.value +'&Away='+ form.Away.value +'&eventid='+ form.eventid.value +'&1Home='+ form.Home1.value +'&1Away='+ form.Away1.value);
	return false;
}

</script>
<form action="predictions.php" method="post" onsubmit="return submit_form(this);">
<input type="hidden" name="do" value="addpredict">
<input type="hidden" name="eventid" value="32">
<table class="tborder" cellspacing="1" cellpadding="4" border="0">
<tr><td class="tcat" colspan="5">Interactive game details</td></tr>
<tr><td class="thead">Your predictions</td><td class="thead">Actual</td><td colspan="2" align="center" class="thead">Teams</td><td class="thead">Colors</td></tr>

<div class="smallfont">

<tr><td align="center">
<input type="hidden" name="Home1" value="RDG">
<input name="Home" type="text" size="1" value="">
</td><td class="alt2" align="center"></td><td nowrap>
<strong>Home</strong>:
</td><td>
RDG
</td><td><img src="images/calendarteams/RDG.gif">
</div>
</td></tr>

<div class="smallfont">

<tr><td align="center">
<input type="hidden" name="Away1" value="Victory">
<input name="Away" type="text" size="1" value="">
</td><td class="alt2" align="center"></td><td nowrap>
<strong>Away</strong>:
</td><td>
Victory
</td><td><img src="images/calendarteams/Victory.gif">
</div>
</td></tr>

<div class="smallfont">

<strong>Venue</strong>:

Gonaives - Parc Vincent

</div>


<div class="smallfont">

<strong>Competition</strong>:

Digicel Cloture

</div>


<div class="smallfont">

<strong>Round</strong>:

9

</div>


<tr><td align="center"><input type="image" src="/forums/images/kirsch/buttons/predict.gif"></td><td">/buttons/predict.gif"></td><td class="alt2" style="border-top:0px solid #c0c0c0;" align="center" colspan="4">insert link to leaderboard here</td></tr>
</table>
</form>

Code Monkey · #7 10-15-2006, 08:58 PM

You should be using the default vBulletin AJAX code to properly intigrate it and minimize the use of javascript.

Lionel · #8 10-16-2006, 12:54 AM

What is the default vb code?

The good news is that I got it to work, there was a java typo. But now, how do I replace the java alert so it replaces the input boxes with the predictions that was just submitted?

nico_swd · #9 10-18-2006, 09:29 AM

Sorry, forgot about this. And I didn't figure out yet how vB's AJAX system works...

I think this should do what you want.

Code:

<script type="text/javascript">
function create_req_object()
{
	var req = false;
	
	if (window.XMLHttpRequest)
	{
		req = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		var msp = new Array('Microsoft', 'Msxml2');
		
		for (var i in msp)
		{
			try
			{
				req = eval('ne' + 'w Act' + 'iveXObj'+ 'ect(msp[i] + ".XMLH'+ 'TTP");');
			}
			catch(e)
			{
				continue;
			}
		}
	}
	
	return req;
}

function submit_form(form)
{
	var http = create_req_object();
	
	if (!http)
	{
		return true;
	}

	if (isNaN(form.Home.value) || isNaN(form.Away.value))
	{
		alert("Invalid prediction. Please use numbers only.");
		return false;
	}

	http.open('POST', form.action);
	http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	http.onreadystatechange = function()
	{
		if (http.readyState == 4 && http.status == 200)
		{
			alert("Predictions successfully submitted.");
			
			fetch_object('Home1').innerHTML = form.Home.value;
			fetch_object('Away1').innerHTML = form.Away.value;
		}
	}
	http.send('do=addpredict&Home='+ form.Home.value +'&Away='+ form.Away.value +'&eventid='+ form.eventid.value +'&1Home='+ form.Home1.value +'&1Away='+ form.Away1.value);
	return false;
}

</script>
<form action="predictions.php" method="post" onsubmit="return submit_form(this);">
<input type="hidden" name="do" value="addpredict">
<input type="hidden" name="eventid" value="32">
<table class="tborder" cellspacing="1" cellpadding="4" border="0">
<tr><td class="tcat" colspan="5">Interactive game details</td></tr>
<tr><td class="thead">Your predictions</td><td class="thead">Actual</td><td colspan="2" align="center" class="thead">Teams</td><td class="thead">Colors</td></tr>

<div class="smallfont">

<tr><td align="center">
<input type="hidden" name="Home1" value="RDG">
<div id="Home1"><input name="Home" type="text" size="1" value=""></div>
</td><td class="alt2" align="center"></td><td nowrap>
<strong>Home</strong>:
</td><td>
RDG
</td><td><img src="images/calendarteams/RDG.gif">
</div>
</td></tr>

<div class="smallfont">

<tr><td align="center">
<input type="hidden" name="Away1" value="Victory">
<div id="Away1"><input name="Away" type="text" size="1" value=""></div>
</td><td class="alt2" align="center"></td><td nowrap>
<strong>Away</strong>:
</td><td>
Victory
</td><td><img src="images/calendarteams/Victory.gif">
</div>
</td></tr>

<div class="smallfont">

<strong>Venue</strong>:

Gonaives - Parc Vincent

</div>


<div class="smallfont">

<strong>Competition</strong>:

Digicel Cloture

</div>


<div class="smallfont">

<strong>Round</strong>:

9

</div>


<tr><td align="center"><input type="image" src="/forums/images/kirsch/buttons/predict.gif"></td><td">/buttons/predict.gif"></td><td class="alt2" style="border-top:0px solid #c0c0c0;" align="center" colspan="4">insert link to leaderboard here</td></tr>
</table>
</form>

Lionel · #10 10-18-2006, 11:19 AM

Thank you, thank you, thank you a thousand times. I simply reajusted the names in form to match my names.

After predicting, the predict button disappears and is replaced by a remove link. How can I 'ajax' that also? Now the remove link appears only when I refresh the page.

The "Remove" Link simply deletes the prediction in DB and the input boxes reappear. Anyway to 'ajax' this action too?

this the action done by the remove. Currently it takes me to predictions.php. I suppose I could make it give a successful confirmation message and take user back to previous page. But I am using this with both calendar.php and showthread.php (events forums hack) and people have access to two pages for input, either via the thread for single input or via calendar for multiple inputs for same day events.

PHP Code:


			
if ($_REQUEST['do'] == 'remove')

{



 // get input data

 $vbulletin->input->clean_array_gpc('r', array('eventid' => TYPE_UINT));

 

 $eventid =& $vbulletin->GPC['eventid'];

 $player=$vbulletin->userinfo['userid'];

$db->query("DELETE FROM new_predictions WHERE eventid='$eventid' and userid='$player'");

}

first image is after ajax submit and second is after refreshing the page.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.07180 seconds Memory Usage 2,370KB Queries Executed 12 (?)
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 (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (5)bbcode_code (6)bbcode_php (2)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (10)postbit (4)postbit_attachment (10)postbit_onlinestatus (10)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 post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!