In Rails, the Ajax-enabled average rating bar refuses to reload

I've been developing a Ruby on Rails Application featuring a Rating System. The rating system is functioning as expected, and I have successfully implemented ajax functionality. Additionally, I am now looking to display the current average rating in a bar graph where the length of the bar corresponds to the average value of all ratings.

The calculation for setting the bar's length is as follows:

var average = parseFloat( $(".rating_filled").attr("data-average") );

var avg_width = (average/5)*200;


$(".rating_filled").css("width", avg_width);

The data value is provided in the HTML code like this:

    <div class="rating_bar">
        <div class="rating_filled" data-average="<%<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="665b2601070b03481407120f0801154807100314070103">[email protected]</a>(:value) %>"></div>
    </div>

When I use ajax to reload the partial containing the bar graph and other statistics after submitting a rating, everything refreshes except for the bar graph itself. The Firebug tool indicates that the bar receives the updated value from the recent submission, but the graphical representation disappears completely.

It seems like the issue lies in the fact that the JavaScript file responsible for defining the graphical length does not reload via ajax, resulting in the bar not being displayed at all. I'm unsure if I need to update my jQuery commands or make adjustments in my controller to pass the data through Json.

If anyone has insights or suggestions on how to resolve this issue, I would greatly appreciate it!

javascriptruby-on-railsrubyajaxrating

Answer №1

This is a snippet of code representing the appearance of my partial:

<div class="rating_stats">
<div>
    Average value:
    <span class="rating_avg">
    <% if <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e1f7e595f535b105f485b">[email protected]</a>_rating.present? %>
        Not rated
    <% else %>
        <%= @game.ratings.average(:value).round(2) %>
    <% end %>
    </span>
    <div class="rating_bar">
        <div class="rating_filled" data-average="<%= @game.ratings.average(:value) %>"></div>
    </div>
</div>

<div>
    Number of ratings: 
    <span class="rating_amount"><%= @game.ratings.count %></span>
</div>

<% if user_signed_in? %>
<p>
    Your rating :
    <span class="current_user_rating">

        <%= current_user_rating %>

    </span>
</p>
<% end %>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to access component data while inside a v-for loop scope

I recently started using Vue and I'm having trouble accessing my component data within a v-for loop. After implementing the code below, I encountered this error message. TypeError: Cannot read property 'whatever' of undefined at eva ...

javascriptvue.jsvuejs2

"Implementing a dynamic image thumbnail list with adjustable opacity effects and the ability to add or remove classes

I found a script on another post, but it's not working correctly in my implementation. Everything is functioning properly except that the "selected" class is not being stripped, causing the thumbnails to remain highlighted after being clicked. Here is ...

javascripthtmlthumbnailsopacity

What sets apart route.use(), route.all(), and route.route() in Express?

Is it possible to replace router.all() with router.use() if the former just matches all methods? Also, what are the differences between using router.use() and router.route()? ...

javascriptnode.jsexpress

Redirecting successfully after a 'delete' action in Express

When working from the client side, I am using jQuery to make an Ajax request of type "delete". On the server side, I am executing a res.redirect(URL) command. However, instead of redirecting as expected, the browser is making another delete request with ...

ajaxexpresshttp-delete

Modify the CSS style of the select label and change the color of the currently selected option in MUI

For the past few days, I've been facing challenges with implementing MUI components while working on a page for a React app. I'm almost finished with my project, but there are 2 key things missing... On my page, I have utilized a Select and an ...

javascriptreactjsdrop-down-menuautocompletemui

Unable to generate StumbleUpon traffic for a URL through AJAX due to the API returning text/plain

I'm attempting to acquire StumbleUpon views for a specific URL using $.ajax. This is the API I am utilizing: http://www.stumbleupon.com/services/1.01/badge.getinfo?url=http://example.com/ Here is the complete code snippet: $.ajax({ type: "GET ...

javascriptjqueryajaxjsonstumbleupon

Is there a Ruby gem similar to Readability that anyone can recommend?

Readability is a nifty JavaScript tool that magically transforms a cluttered HTML page into a more user-friendly format. I'm on the hunt for a Ruby implementation or something along those lines - does anyone know of a library that offers similar funct ...

javascriptcssrubyreadability

Sending a JavaScript click event using curl and PHP

Attempting to extract information from a website. The main page contains multiple option buttons along with an ACCEPT and RESET button. When the user selects options and clicks on the ACCEPT button, new content is displayed. I have a question regarding ma ...

phpjavascriptajaxcurl

Is there a way to programmatically trigger a submit button using jQuery?

In my ScanField, I am scanning a barcode. After scanning, I trim the last four characters of the barcode string and assign it to a hidden field. When I click on the search button, this value is passed to a PHP site via AJAX. For example: if I scan a barco ...

phpjqueryhtmlajax

Troubleshooting: AngularJS - Issues with nested controllers not functioning properly within ng-include

According to the AngularJS documentation (refer to nested controller fragment), I am attempting to implement nested controllers using ng-include Main.html <body id="spaWrapperApp" ng-app="spaWrapperApp"> <div class="container-fluid" id=" ...

javascriptjavaangularjs

The search feature in my React Pagination is not performing as effectively as expected

I recently set up a React app that interacts with a MongoDB database using an Express Server. The pagination feature is working smoothly, but I encountered an issue with the search function. It only works when typing in the input box; deleting characters d ...

javascriptreactjsexpresspagination

Limiting the display of every item in Angular ngFor

I'm currently working with Angular and I have the following code in my component.html: <div class="card" *ngFor="let item of galleries;" (mouseenter)=" setBackground(item?.image?.fullpath)" (mouseover)="showCount ...

javascripthtmlangular

`Open popup to make edits on the form`

I'm new to MVC and trying to grasp the best practices. Currently, I need some guidance as I'm stuck with a certain task. My situation involves an edit form where users can update a person's information and view their current contacts. These ...

jqueryajaxrazorasp.net-mvc-5

Can the color scheme be customized for both light and dark themes in Ant Design version 5?

After creating a hook that successfully toggles between light and dark modes in Chrome's Rendering panel, I noticed that the values in the ConfigProvider remain unchanged when switching themes. Can anyone suggest a workaround to modify the design toke ...

javascriptreactjsnext.jsthemesantd

Include quotation marks around a string in C# to convert it into JSON format

I am utilizing a service that operates with JSON format. However, the JSON data I am receiving does not include double quotes around keys and values. Here is an example of the data I have: [{name:{buyerfirstname:Randy, buyermiddlename:null, buyerlastnam ...

javascriptc#typescript.net-corejson.net

A step-by-step guide on constructing this JSON using PHP

Having an issue with my PHP code for sending a push notification as my JSON object is not formatting correctly... I am aiming for my JSON to be structured like this: { "to": ["xxx"], "data": { "title": "dw", "body": "dw", ...

javascriptphpjson

The issue of JavaScript Memory Leakage when utilizing FileReader and Promise

-Modify I have raised a bug report to address this issue I am attempting to upload a directory to my server containing large files, including CT scan images. While the process is functioning correctly, I am encountering memory problems. document.getElem ...

javascriptmemory-leaksfilereaderes6-promise

The jquery ajax call only seems to function properly when executed on a local

Currently, I am utilizing jQuery ajax to retrieve data from a back-end method in asp.net using the following code: $.ajax({ cache: false, type: "POST", url: '<%= Page.ResolveUrl("~/Live/Live.aspx/GetViews") %>', content: "j ...

asp.netajaxjquery

Combining strings in a loop with Angular's $scope

I have four values with the following names : $scope.restaurant.restaurantIsTop $scope.restaurant.restaurantIsRecommended $scope.restaurant.restaurantIsNew $scope.restaurant.restaurantIsPromoted Each of these values can be either 0 or 1. My goal is to c ...

javascriptangularjs

Using the set() method in Firestore with the merge option does not function properly when implemented in Node.js

const user = {name : myUsername}; databaseRef.set(user, { merge: true }); An error is occurring which states: Invalid use of type "undefined" as a Firestore argument. Despite following the Firebase documentation here, and seeing others use it in online ...

javascriptnode.jsfirebasenpmgoogle-cloud-firestore