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.

Kolla in exmplet live här.

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'] > 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.


Rate It


Bookmark It

  • del.icio.us
  • Digg
  • Furl
  • Google
  • Technorati
  • Ma.gnolia
  • BlinkList
  • Blogmarks
  • Rojo
  • StumbleUpon

Comments

3 comments so far, why don't you post one too?

Tobias

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.

Ante

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.

Danne

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


Comments closed

Comments are closed



Post It

From June 02 to April 23

  1. Mogrify is what you're looking for if you want to convert multiple images to multiple other images in ImageMagick
  2. Tommorrow, finally, the inFamous demo will be friggin availble on PSN!! Suweeeeeeeeet
  3. Fuck canvas is cool, I've started playing around with old 3D-shit again :)

July 2014

S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31


Recent Comments

  1. Vlad on A follow-up to "An alternative to div overlays":
    I'll try this.....
  2. Steve on jQuery Live Ajax Search Plug-in:
    This is a great script but I've got...
  3. Frank on jQuery Live Ajax Search Plug-in:
    Hey, sounds like a great plugin! I ...
  4. Andreas on jQuery Drag to Select Plug-in:
    @Paul - I didn't take into account ...

Style Switcher

The style switcher allows you to change the look and feel of exscale.se.
Only CSS and JavaScript are changed. The XHTML stays the same.

For more information about the styles, check the styles page.


Categories


Random Quote

And with this one i can do the fruit - Turbo


Random Images




Answer This!

Do you find the "scroll-pagination" annoying? (If you don't know what it is, scroll to the bottom of the first-page)


Blog Roll