SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mootools ajax star rater (simpler way to do this?)

    is there a simpler way to do this using mootools, heres the javascript for the star rater

    PHP Code:
        <script type="text/javascript" src="/scripts/mootools.js"></script>
    <script type="text/javascript">
        window.addEvent('domready', function(){
        $('1').addEvent('click', function(e) {
        e = new Event(e).stop();
         var url = "/rate.php?vote=1";
         new Ajax(url, {
            method: 'get',
            update: $('log')
        }).request();
    });
    $('2').addEvent('click', function(e) {
        e = new Event(e).stop();
         var url = "/rate.php?vote=2";
         new Ajax(url, {
            method: 'get',
            update: $('log')
        }).request();
    });
    $('3').addEvent('click', function(e) {
        e = new Event(e).stop();
        var url = "/rate.php?vote=3";
         new Ajax(url, {
            method: 'get',
            update: $('log')
        }).request();
    });
    $('4').addEvent('click', function(e) {
        e = new Event(e).stop();
        var url = "/rate.php?vote=4";
         new Ajax(url, {
            method: 'get',
            update: $('log')
        }).request();
    });
    $('5').addEvent('click', function(e) {
        e = new Event(e).stop();
        var url = "/rate.php?vote=5";
         new Ajax(url, {
            method: 'get',
            update: $('log')
        }).request();
    });
            }); 
        </script> 
    and heres the html
    PHP Code:
        <div id="log">    
        <
    ul class="star-rating">
            <
    li class="current-rating" style="width:30%;">Currently 3/5 Stars.</li>
            <
    li><a href="#" id="1"  title="1 star out of 5" class="one-star">1</a></li>
            <
    li><a href="#" id="2"  title="2 stars out of 5" class="two-stars">2</a></li>
            <
    li><a href="#" id="3"  title="3 stars out of 5" class="three-stars">3</a></li>
            <
    li><a href="#" id="4"  title="4 stars out of 5" class="four-stars">4</a></li>
            <
    li><a href="#" id="5"  title="5 stars out of 5" class="five-stars">5</a></li>
        </
    ul>
    </
    div

    any ideas? thanks

  2. #2
    SitePoint Zealot Lars's Avatar
    Join Date
    Jun 2000
    Location
    Denmark
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    First of all you could select all <ul> elements with the class "star-rating". For each of these you select the desired <li> elements by their className property (provided they all have the same css class). Then loop through them all and assign their 'click' events, passing their innerText value as the 'vote' parameter.

    I am guessing mootools is pretty much like Prototype/jQuery. If I were creating it in Prototype I would probably use a solution basically like this:

    Code JavaScript:
    Event.observe(window,'load',
      function() {
        $$('ul.star-rating').each( // for each ul with class="star-rating"
          function(ul){
          $(ul).select('li.stars').each( // for each li with class="stars"
            function(li){
              Event.observe(li,'click', function(){
                var params = "vote="li.innerText; // 1,2,3, etc...
     
                var success = function(o) { alert(o.responseText); }
                var failure = function(o) { alert("Error!");}
     
                new Ajax.Request("/rate.php",
                { method: 'GET', 
                  postBody: params, 
                  onSuccess: success, 
                  onFailure: failure}
                 );
     
              },false); // add the 'click' event listener to each li element
           });
        });
      });

    I'm sorry I can't provide you with a solution in mootools, though I think you should be able to translate the basic idea to mootools' syntax.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •