As Links: Magic Ratings (): Magic JavaScript

Star it like a pro.

Usage

Add <link href="/PATH/TO/magic/tricks/magic_ratings/magic_ratings..css" rel="stylesheet">
<script type="text/javascript" src="/PATH/TO/magic/tricks/magic_ratings/magic_ratings..js" charset="UTF-8"></script>

below your <script type="text/javascript" src="/PATH/TO/magic/wand..js" charset="UTF-8"></script>

Add <script type="text/javascript">$m.trick.magic_ratings.links = true;</script> inside your <body> tag.

Use the examples below to build your own!

Example 1

Update separate count element with AJAX

1 2 3 4 5 (1)

<p> <span data-mjf="magic_rating_links" data-mjf_ajax_url="_update_count.php" data-mjf_ajax_update_id="mjs_rating_link_ex_1_total" id="mjs_rating_link_ex_1"> <a href="#" data-mjf="magic_ratings_links_click" data-mjf_magic_ratings_state="on" data-mjf_magic_ratings_value="1" id="mjs_rating_link_ex_11">1</a> <a href="#" data-mjf="magic_ratings_links_click" data-mjf_magic_ratings_state="on" data-mjf_magic_ratings_value="2" id="mjs_rating_link_ex_12">2</a> <a href="#" data-mjf="magic_ratings_links_click" data-mjf_magic_ratings_state="off" data-mjf_magic_ratings_value="3" id="mjs_rating_link_ex_13">3</a> <a href="#" data-mjf="magic_ratings_links_click" data-mjf_magic_ratings_state="off" data-mjf_magic_ratings_value="4" id="mjs_rating_link_ex_14">4</a> <a href="#" data-mjf="magic_ratings_links_click" data-mjf_magic_ratings_state="off" data-mjf_magic_ratings_value="5" id="mjs_rating_link_ex_15">5</a> </span> (<span id="mjs_rating_link_ex_1_total">1</span>) </p>

The first span is a container for the rating stars and holds the standard data-mjf_ajax_XYZ attributes.
The <a> tags trigger the AJAX call when clicked.
- data-mjf_magic_ratings_state determines if the bg_rating_off.png or bg_rating_on.png CSS background image will be shown. Valid values are on and off.
- data-mjf_magic_ratings_value is the value that will be sent to the server when clicked. It will be named magic_rating.
- The innerHTML will be hidden from visitors.

Example 2

Update parent element with AJAX

1 2 3 4 5 (1)

<p id="mjs_rating_link_ex_2_cont"> <span data-mjf="magic_rating_links" data-mjf_ajax_url="_update_container.php" data-mjf_ajax_update_id="mjs_rating_link_ex_2_cont" id="mjs_rating_link_ex_2"> <a href="#" data-mjf="magic_ratings_links_click" data-mjf_magic_ratings_state="on" data-mjf_magic_ratings_value="1" id="mjs_rating_link_ex_21">1</a> <a href="#" data-mjf="magic_ratings_links_click" data-mjf_magic_ratings_state="on" data-mjf_magic_ratings_value="2" id="mjs_rating_link_ex_22">2</a> <a href="#" data-mjf="magic_ratings_links_click" data-mjf_magic_ratings_state="off" data-mjf_magic_ratings_value="3" id="mjs_rating_link_ex_23">3</a> <a href="#" data-mjf="magic_ratings_links_click" data-mjf_magic_ratings_state="off" data-mjf_magic_ratings_value="4" id="mjs_rating_link_ex_24">4</a> <a href="#" data-mjf="magic_ratings_links_click" data-mjf_magic_ratings_state="off" data-mjf_magic_ratings_value="5" id="mjs_rating_link_ex_25">5</a> </span> (<span id="mjs_rating_link_ex_2_total">1</span>) </p>

This example is exactly the same as the first however the parent <p> is filled with images so visitors can no longer using the rating system.

« Back to Magic Ratings

« Back to the main documentation