Home/ Questions/Q 8985663
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T21:22:31+00:00

Viewing the error box in each process. saveRating.php php code <?php $result = array();

  • 0

Viewing the error box in each process.

saveRating.php php code

<?php
    $result = array();
    $result["status"] = "";
    $result["message"] = "";

    if(isset($_POST["itemID"]) && isset($_POST["itemValue"])){
        $result["status"] = "OK";
        $result["message"] = "Rating has been saved successfully.";
    } else {
        $result["status"] = "ERROR";
        $result["message"] = "Provide itemID and itemValue!";
    } 

    echo json_encode($result);
?>

html code

<body>
    <h1>Creating Five Stars Rating System</h1>
    <div class="fieldRow">
        <label>Book 123A</label>
        <ul id="book-123a" class="ratingStars">
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="fieldRow">
        <label>Book 123B</label>
        <ul id="book-123b" class="ratingStars">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="fieldRow">
        <label>Book 123C</label>
        <ul id="book-123c" class="ratingStars">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li class="active"></li>
        </ul>
    </div>

    <div id="placeHolder"></div>
</body>

jquery code

<script>
$(document).ready(function(){
    $('ul.ratingStars li.active').prevAll().addClass('active');

    $('ul.ratingStars li').each(function(){
        var $item = $(this);
        var $itemContainer = $item.parents('ul.ratingStars');
        var containerID = $itemContainer.attr('id');
        var $itemsAll = $itemContainer.find('li');

        $item.mouseover(function(){
            $itemsAll.addClass('default');
            $item.prevAll().addClass('highlighted');
        }).mouseout(function(){
            $itemsAll.removeClass('default').removeClass('highlighted');
        }).bind('click', function(){
            var itemIndex = $itemsAll.index(this);

            $.post('ajax/saveRating.php',{
                'itemID': containerID,
                'itemValue': itemIndex
            }, function(data) {
                if(data && data.status == "100"){
                    $item.addClass('active').removeClass('highlighted');
                    $item.nextAll().removeClass('active');
                    $item.prevAll().addClass('active');
                } else {
                    alert('Error!');
                } 
            }, "json");
        });
    });
});
</script>

css code

<style>
    label, ul {
        float:left;
    }
    .fieldRow {
        clear:both; margin:5px 0px; overflow:hidden;
    }
    ul.ratingStars {
        list-style:none; margin:0px 0px; 
        overflow:hidden;
    }
    ul.ratingStars li {
        float:left; width:16px; height:16px; 
        background:url('icons/star.gif') no-repeat left top; 
        cursor:pointer;
    }
    ul.ratingStars li.active {
        background-position: 0px -32px;
    }
    ul.ratingStars li.default {
        background-position: 0px 0px;
    }
    ul.ratingStars li.highlighted, ul.ratingStars li:hover {
        background-position: 0px -16px;
    }
</style>

stars img file

http://www.packtpub.com/sites/default/files/Article-Images/3081_02_06.png

Always alert('Error!'); Please help

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In your jquery code you check

    if(data && data.status == "100") {

    but in your saveRating.php php code you set status as either

    $result["status"] = "OK";

    or

    $result["status"] = "ERROR";

    hence your javascript check is false.

    • 0