Desperate ajax help needed

[Lionel]

I tried to add

fetch_object('button').innerHTML = <a
href="predictions.php?do=remove&eventid=$eventinfo[eventid]">Remove</a>;

but of course that gives me a javascript error

[nico_swd]

Give this a try.

<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) || !form.Home.value || !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)
		{
			var eventid = parseInt(http.responseText);
			
			if (!isNaN(eventid))
			{			
				toggle_predictions();
				fetch_object('predction_home1').innerHTML = form.Home.value;
				fetch_object('predction_away1').innerHTML = form.Away.value;
				
				fetch_object('remove').innerHTML = '<a href="predictions.php?do=remove&eventid='+ eventid +'" onclick="return remove_prediction('+ eventid +');">Remove</a>';
				
				alert("Predictions successfully 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;
}


function remove_prediction(eventid)
{
	var http = create_req_object();
	
	if (!http)
	{
		return true;
	}
	
	http.open('GET', 'predictions.php?do=remove&eventid='+ eventid);
	http.onreadystatechange = function()
	{
		if (http.readyState == 4 && http.status == 200)
		{
			toggle_predictions();
			
			var form = document.predictions;
			form.Home.value = '';
			form.Away.value = '';
			
			alert("Sucessfully removed.");
		}
	}
	http.send(null);
	return false;
}


function toggle_predictions()
{
	var objects = new Array(
		'Home1',
		'Away1',
		'predction_home1',
		'predction_away1',
		'predict',
		'remove'
	);
	
	for (var i in objects)
	{
		var style = fetch_object(objects[i]).style;
		
		style.display = style.display == 'none' ? 'block' : 'none';
	}
}

</script>
<form action="predictions.php" method="post" onsubmit="return submit_form(this);" name="predictions">
<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>

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

<tr>
	<td align="center">
		<div id="Away1">
			<input type="hidden" name="Away1" value="Victory">
			<input name="Away" type="text" size="1" value="" id="Away1">
		</div>		
		<div id="predction_away1" style="display: none;"></div>
	</td>
	<td class="alt2" align="center"></td>
	<td nowrap><strong>Away</strong>:</td>
	<td>Victory</td>
	<td><img src="images/calendarteams/Victory.gif"></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" id="predict">
		<div id="remove" style="display: none;">
		</div>
	</td>
	<td class="alt2" style="border-top:0px solid #c0c0c0;" align="center" colspan="4">insert link to leaderboard here</td>
</tr>
</table>
</form>

You have to change this as well.

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')");

echo $db->insert_id();
} 


(echo'ing the insert_id() so we can use it for the remove link)

You should also do an error check in your PHP script. Javascript runs on the client side and can't be trusted.

[Lionel]

Nico, once again thanks for the help. Everything but the ajax remove is fine, but I will live with that. I simply put a front end redirect in predictions.php that brings back to the previous page.

It's a pity I had to edit calendar.php as there was no hook at the desired location.

My predictions is heavily customized. I am going to try to simplify it and release it, giving you 100% credits for the ajax code (not a line was from me). I only had to add the eventid to the <div> <div id="$customtitle$eventinfo[eventid]"> to make it unique, because sometimes there are multiple games in the same day.

[Cap'n Steve]

<a href="showthread.php?t=93249" title="vBulletin.org Forum - Thread 93249">Here's a nice tutorial.</a>

[nico_swd]

^^ Thank you for that. I'll have a look at it.

Lionel, I just downloaded your script. Thanks for the credit.

I saw you modified it a bit... don't use getElementById, cause it's not cross browser safe. Use vB's fetch_object() function instead.

fetch_object('button'+ form.eventid.value).innerHTML = '<a href="predictions.php?do=remove&eventid='+ form.eventid.value +'">Remove</a>';

Also, I'll have a look on how to make it compatible with vB's AJAX system and post an updated version later.


EDIT:

Give this a try.

function submit_form(form)
{
	if (isNaN(form.Home.value) || isNaN(form.Away.value) || !form.Home.value || !form.Away.value)
	{
		alert("Invalid prediction. Please use numbers only.");
		return false;
	}
	
	http = new vB_AJAX_Handler(true);
	
	if (!http)
	{
		return true;
	}

	http.onreadystatechange(handle_prediction);
	http.send('predictions.php', 'do=addpredict&Home='+ form.Home.value +'&Away='+ form.Away.value +'&eventid='+ form.eventid.value +'&1Home='+ form.Home1.value +'&1Away='+ form.Away1.value);
	return false;
}


function handle_prediction()
{
	if (http.handler.readyState == 4 && http.handler.status == 200)
	{
		var form = document.predictions;
		
		fetch_object('Home'+ form.eventid.value).innerHTML = form.Home.value;
		fetch_object('Away'+ form.eventid.value).innerHTML = form.Away.value;
		fetch_object('button'+ form.eventid.value).innerHTML = '<a href="predictions.php?do=remove&eventid='+ form.eventid.value +'">Remove</a>'
		
	}
}

You have to change the form name to "predictions", or change predictions to something else in the second function.

[Lionel]

cool. Thanks Nico. Feel free to modify all you want.

[nico_swd]

I edited the post above. I didn't fully test it though.