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.


<?php ob_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


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


        <div id="rating">

            <?php include("rating.php"); ?>




if(isset($_REQUEST['rating']) and $_REQUEST['rating'] > and $_REQUEST['rating'] < 6)
// Calculate and store new rating in DB

        // Set cookie

// 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
header("Location: #rating");
// If user has rated
if(isset($_COOKIE['has_rated']) or $ajaxCookie)

        <p>Current rating is <strong>4</strong></p>
// User has not rated
        <h2>Rate this!</h2>

        <form method="post" action="">
                <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><input type="submit" value="Rate it!" /></p>

js.js (kräver jquery)

    // 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

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


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

Comments closed

Comments are closed

Post It

From March 27 to January 30

  1. I got this link from 456berea and I really like its document outline (find it in the web developers toolbar): http://www.nvda-project.org/documentation/nvda_0.6p3_userGuide.html
  2. Friday!
  3. #home-page.not-logged-in #main-navigation = $a11y-hide;

August 2014

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

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.


Random Quote

The climate is made up of "weather"; whether it is nice out depends on whether it is raining or not. A wether is just a castrated sheep. - Unknown

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