Page refresh interfering with jQuery actions

I have a 5-star rating system with the following features:

  1. The ‘vote’ is recorded in a database table.
  2. The number of votes and average score are pulled from the database and displayed, both graphically with the stars, and in a small text summary under the graphic.
  3. After the vote is recorded, comments are both recorded in the database table, and emailed to an administrator.

My problem is with the comment area, which I want to be visible only after the vote is cast, and then disappear once the comments form is submitted.

Here is my html for this part:

<div id="rating">
    <input name="star" type="radio" class="star {half:true}" value="0.5"/>
    <input name="star" type="radio" class="star {half:true}" value="1.0"/>
    <input name="star" type="radio" class="star {half:true}" value="1.5"/>
    <input name="star" type="radio" class="star {half:true}" value="2.0"/>
    <input name="star" type="radio" class="star {half:true}" value="2.5"/>
    <input name="star" type="radio" class="star {half:true}" value="3.0"/>
    <input name="star" type="radio" class="star {half:true}" value="3.5"/>
    <input name="star" type="radio" class="star {half:true}" value="4.0"/>
    <input name="star" type="radio" class="star {half:true}" value="4.5"/>
    <input name="star" type="radio" class="star {half:true}" value="5.0"/>
 </div>
 <p id="rating-stats">There are no scores for this organization yet.</p>
 <div id="vote-comment">
       <form action="comments.php" method="post">
              <label for="comments">Add a comment here:</label><br />
              <textarea id="comments" name="comments"></textarea><br />
              <input type="hidden" name="id" value="<?php echo $id; ?>">
              <input type="hidden" name="sid" value="<?php echo $last_id; ?>">
              <input type="submit" id="submit" name="submit_comment" value="Submit Comment">
       </form>
 </div>

Here is my jQuery:

$(document).ready(function() {
            
            $('#vote-comment').hide();
            
            $('#rating').on('click', '.star', function() {
                $('#vote-comment').slideToggle();
            });
            
            $('#vote-comment').on('click', '#submit', function() {
                $(this).slideToggle();
            });
                
        });

When the vote is cast, the textarea appears but because the page refreshes as soon as the vote is cast and its result sent to the database, the visibility of the textarea immediately toggles off.

I guess this could be solved somehow using Ajax, but I have had absolutely no experience with Ajax.

Is there anything I can do to fix this jquery code to make it do what I want it to do? Or is my approach totally wrong?

Nothing in the code you’ve shown should cause a page refresh/redirect when you vote, so I’m assuming there’s some other JS which controls the star ratings which is submitting whatever value gets chosen. Could you post or link to whatever code you’re using for that please?

The first function of this script counts the number of half-stars, calculates the score out of 5 and sends this to a php script which inserts it into a database table, then redirects back to this page. That is where the page refresh is. I want the action of clicking on the stars to also reveal the comment textarea. I don’t want it to be visible all the time, because it pushes all the relevant information about the subject matter too far down the page.

  // send score to php script for processing
            function sendScore() {
                var score = document.getElementsByClassName('star-rating-on').length / 2;
                var id = <?php echo $id; ?>;
                if (score > 0) {
                    window.location.href = "process_score.php?score=" + score + "&id=" + id;
                }
            }
            
            var ratingSystem = document.getElementById('rating');
            ratingSystem.addEventListener('click', sendScore, false);
            
            // update graphic on webpage showing current average score and info under the graphic
            var numStars = <?php echo $num_stars; ?>;
            var numRadios = 2 * numStars;
            var numVotes = <?php echo $num_votes; ?>;
            var ratingDiv = document.getElementById("rating");
            var defaultText = 'checked = "checked"';
            var radioButton = ratingDiv.getElementsByTagName("input");
            
            for (var i = 0; i < radioButton.length; i++) {
                if (i == numRadios - 1) {
                    radioButton[i].setAttribute("checked", "checked");
                    break;
                }
            }
            var statsText = "Number of votes: " + numVotes + ". Average score: " + <?php echo $average_score; ?> + ".";
            var statsDiv = document.getElementById("rating-stats");
            
            statsDiv.textContent = statsText;

I’m sorry this application is not live, so I can’t link to it.

I have not included the jquery for the plugin that runs the basic 5-star rating system, but that doesn’t affect the added features that I want.

Instead of redirecting to script:

window.location.href = "process_score.php?score=" + score + "&id=" + id;

Send that request with AJAX:

$.get("process_score.php", {score: score, id: id});

I’m not getting that to work. When I have some extra time this week, I’m going to build a sample of this without the sensitive information in the rest of the page and put it online so you can see exactly what is happening. Thank you.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.