I created a table with different rows like this, for the rating starts I use raty:

while ($row = pg_fetch_assoc($rs)) {
    echo "<tr>";
    echo "<td>" . $row['question_id'] . "</td>";
    ...
    echo "<td><div> \r \n <div id=\"score-question" . $row['question_id'] ."\" data-score=\"" . $row['rating'] . "\"></div> \r \n </div> \r \n</td>";
    ...
    echo "</tr>";
}

<script type="text/javascript">
    $(function() {
        $.fn.raty.defaults.path = '../plugins/raty/lib/img';

        $('#score-question1').raty({
            readOnly: true,
            noRatedMsg: "Press edit to change the rating",
            score: function() {
                return $(this).attr('data-score');
            }
        });

        $('#score-question2').raty({
            readOnly: true,
            noRatedMsg: "Press edit to change the rating",
            score: function() {
                return $(this).attr('data-score');
            }
        });

        $('#set-action').on('click', function() {
            var options = $('#set-function-demo').val(),
                    mand = "$('#function-demo').raty('set', " + options + ");";
            eval(mand);
        });
        $('#destroy-action').on('click', function() {
            $('#function-demo').raty('destroy');
        });
    });
</script>

I use a javascript function to control the star rating bar. I have to use different names because you can't have two divs with the same name, but now I have to use a separate function for each rating bar. Is er a better way to fix this problem? I don't have any experience with javascript so it's probably a beginner question

I created a table with different rows like this, for the rating starts I use raty:

while ($row = pg_fetch_assoc($rs)) {
    echo "<tr>";
    echo "<td>" . $row['question_id'] . "</td>";
    ...
    echo "<td><div> \r \n <div id=\"score-question" . $row['question_id'] ."\" data-score=\"" . $row['rating'] . "\"></div> \r \n </div> \r \n</td>";
    ...
    echo "</tr>";
}

<script type="text/javascript">
    $(function() {
        $.fn.raty.defaults.path = '../plugins/raty/lib/img';

        $('#score-question1').raty({
            readOnly: true,
            noRatedMsg: "Press edit to change the rating",
            score: function() {
                return $(this).attr('data-score');
            }
        });

        $('#score-question2').raty({
            readOnly: true,
            noRatedMsg: "Press edit to change the rating",
            score: function() {
                return $(this).attr('data-score');
            }
        });

        $('#set-action').on('click', function() {
            var options = $('#set-function-demo').val(),
                    mand = "$('#function-demo').raty('set', " + options + ");";
            eval(mand);
        });
        $('#destroy-action').on('click', function() {
            $('#function-demo').raty('destroy');
        });
    });
</script>

I use a javascript function to control the star rating bar. I have to use different names because you can't have two divs with the same name, but now I have to use a separate function for each rating bar. Is er a better way to fix this problem? I don't have any experience with javascript so it's probably a beginner question

• javascript
• php

2 Answers 2

It's not name, it's id which have to be unique ;)

Instead of using id you can use class attribute for every div you want to and then use it in jQuery like this:

$('.ratyClass')

Just to elaborate:

$('.ratyClass').raty({
            readOnly: true,
            noRatedMsg: "Press edit to change the rating",
            score: function() {
                return $(this).attr('data-score');
            }
        });

When you use $(this) it acts only on the object on which the function was called and will not affect the other $('.ratyClass') objects.

A little reading might make things clearer : http://www.quirksmode/js/this.html