Ajax/Hijax Rating Exempel
Published Wednesday, April 18, 2007 in Ajax, Javascript, jQuery, PHP, Web Standards
Det är mycket snack om ajax nu för tiden, och jag tänkte bara visa ett simpelt exempel på hur man använder ajax på "rätt" sätt. Dvs, det är tillgängligt även om användaren inte har JS aktiverat.
index.php
<?php ob_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="__js/jquery.js"></script>
<script type="text/javascript" src="__js/js.js"></script>
<title>Hijax Rating Example</title>
</head>
<body>
<div id="rating">
<?php include("rating.php"); ?>
</div>
</body>
</html>
rating.php
<?php
if(isset($_REQUEST['rating']) and $_REQUEST['rating'] > 0 and $_REQUEST['rating'] < 6)
{
// Calculate and store new rating in DB
// Set cookie
setcookie("has_rated", "1", time()+60*60*24*365);
// This is needed if it's an ajax-call because the cookie isn't actually set untill next page-reload (why is this?)
$ajaxCookie = true;
// if this is not an ajax-call, refresh page
if(!isset($_GET['ajax_call']))
{
header("Location: #rating");
}
}
// If user has rated
if(isset($_COOKIE['has_rated']) or $ajaxCookie)
{
?>
<h2>Rating</h2>
<p>Current rating is <strong>4</strong></p>
<?php
}
// User has not rated
else
{
?>
<h2>Rate this!</h2>
<form method="post" action="">
<p>
<label><input type="radio" name="rating" value="1" /> 1</label>
<label><input type="radio" name="rating" value="2" /> 2</label>
<label><input type="radio" name="rating" value="3" /> 3</label>
<label><input type="radio" name="rating" value="4" /> 4</label>
<label><input type="radio" name="rating" value="5" /> 5</label>
</p>
<p><input type="submit" value="Rate it!" /></p>
</form>
<?php
}
?>
js.js (kräver jquery)
$(document).ready(function()
{
// Remove submit button (actually, remove last <p>aragraph in form)
$('#rating form > p:last-child').remove();
// Upon clicking a radio-button
$('#rating input[@type="radio"]').click(function()
{
// get the rating.php file, tell it that it's an ajax_call and pass the value from the radio we clicked
$.get('rating.php?ajax_call=1&rating=' +$(this).val(), function(data)
{
// Update the #rating-div with the new data
$('#rating').html(data);
})
});
});
Genom att först bygga komplett funktionalitet (utan JS) så kan man alltid vara säker på att det fungerar och är tillgängligt för alla.
Sen är det väldigt enkelt att lägga på ett ajax-anrop istället, om man bara tänker lite på att man ska göra det när man kodar PHP:n.
Comments
3 comments so far, why don't you post one too?
Thursday, April 26, 2007 | View all comments by Tobias
Ser skitbra ut, men är inte så jättebra på php. Du borde utveckla artikeln där du visar hur man gör den med riktiga resultat och databas.
Thursday, April 26, 2007 | View all comments by Ante
Tja.. det diffar ju lite från fall till fall.
Men det enda det handlar om är att ha en tabell där du lagrar ratings, typ:
ratings-id | rating | num-ratings
Sedan räknar du ut en ny rating mha num_ratings och rating.
Kolla på PHPSidan så lär någon kunna hjälpa dig med det.
Friday, July 25, 2008
Haha, ville hitta nåt om hijax för jag tänkte lägga till lite bling i debug komponenten... visst tusan blir det av en sida som du har skrivit :)