rating-widget not displaying when performing an ajax request

Having an issue with the star rating plugin () while using an ajax function for searching and filtering.

The star rating displays correctly when the page initially loads https://i.stack.imgur.com/eaOmu.png

However, when utilizing the filter and search functions, the star rating disappears. Here is an example when selecting "motivational" from the dropdown list https://i.stack.imgur.com/CXSkm.png

This code snippet below shows the main page setup with the image, search bar, and filter function

  <!-- Code omitted for brevity -->

The file filterSp.php is called when using the filter dropdown list, containing the JavaScript for the star rating plugin.

  <!-- PHP Code Omitted for Brevity -->

The file searchSp.php is called when utilizing the search function, also containing the JavaScript for the star rating plugin.

  <!-- PHP Code Omitted for Brevity -->

Answer №1

There is an issue in the searchSp.php file where the rating script is not being passed to the ajax response.

You can utilize the SDK as mentioned in the comment, eliminating the need for JavaScript in your searchSp.php:

<?php  

error_reporting(E_ALL & ~E_NOTICE);
error_reporting(E_ERROR | E_PARSE);
    // Utilize API site scope.
define('RW_SDK__API_SCOPE', 'site');

// Adjust the following details according to your site.
define('RW_SDK__SITE_ID', '__YOUR_SITE_ID__');
define('RW_SDK__SITE_PUBLIC_KEY', '__YOUR_SITE_PUBLIC_KEY__');
define('RW_SDK__SITE_SECRET_KEY', '__YOUR_SITE_SECRET_KEY__');

// Include RatingWidget's SDK.
require dirname(__ROOT__) . '/ratingwidget.php';

// Initialize SDK with site details (assuming the SDK is located in the same directory).
$rw_api = new \RatingWidget\Api\Sdk\RatingWidget(
    RW_SDK__API_SCOPE,
    RW_SDK__SITE_ID,
    RW_SDK__SITE_PUBLIC_KEY,
    RW_SDK__SITE_SECRET_KEY
);

$item_id = $array["id"]; // Replace it with your rating id.

// To enable Rich-Snippets functionality for ratings,
// designate the rating class as one of these values:
//     product, page, blog-post, post, front-post, item
$rating_class = 'product';  
$connect = mysqli_connect("localhost", "root", "", "srdatabase");   

$search = mysqli_real_escape_string($connect, $_POST["search"]);

$query = "
SELECT * FROM speakers 
WHERE speaker_fullname LIKE '%".$search."%'
OR speaker_specialization1 LIKE '%".$search."%'
OR speaker_specialization2 LIKE '%".$search."%'
OR speaker_specialization3 LIKE '%".$search."%'
";  

$result = mysqli_query($connect, $query);  

if(mysqli_num_rows($result) > 0)   
{  
    while ($array = mysqli_fetch_array($result)) 
    { 
            $output .= '  
                 <a href="speakerProfile.php?id='.$array["id"].'">
                     <div class="col-sm-6 col-md-4 wow fadeInDown">
                         <div class="thumbnail"><img class="speakers-image" src="img/'.$array["speaker_image"].'" style="height:220px; min-width:100%;"/>
                         <div class="caption" style="height:220px;">
                             <center>
                                 <h3 class="speakers-name speaker-topics">'.$array["speaker_fullname"].'</h5>
                                 <p class="speakers-name speaker-topics">'.$array["speaker_specialization1"].'</p> 
                                 <p class="speakers-name speaker-topics">'.$array["speaker_specialization2"].'</p>
                                 <p class="speakers-name speaker-topics">'.$array["speaker_specialization3"].'</p>
                                 <br><br>
                                  <div class="rw-ui-container rw-class-'. 
                                    $rating_class .' rw-urid-'. $item_id.'">
                                   </div>'.
                                  $rw_api->EchoAggregateRating($item_id).'
                             </center>
                         </div>
                     </div>
                 </div>
                 </a>
            ';  
       }  
}
echo $output;  
?>

Refer to this link for more information.

Answer №2

Adjust the vertical dimension from height:150px to height:220px

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

"Problem encountered during WooCommerce checkout process: Unexpected 500 error in

After updating the woocommerce plugin on my site to version 2.6.0, I encountered a 500 error during checkout with varying error messages based on the payment method being used. I have two payment methods available: Direct Bank Transfer and Cash On Deliver ...

Understanding how to deduce parameter types in TypeScript

How can I infer the parameter type? I am working on creating a state management library that is similar to Redux, but I am having trouble defining types for it. Here is the prototype: interface IModel<S, A> { state: S action: IActions<S, A&g ...

Having trouble getting dayjs to work in the browser with Vue.js?

Trying to display date differences in a human-readable format using the guide found here: I'm attempting to incorporate DayJS as a component in my VueJS application like this: <script src="{{ asset('/vendor/vuejs/vue.js') }}" t ...

Attempting to retrieve an array within a Mustache JavaScript template

I'm attempting to retrieve data from a mustache array using this.location.coordinates.0: <div class="block"> <label>Location (longitude/latitude):</label> {{location.coordinates.0}}/{{location.coordinates.1}} </d ...

"Retrieving Data Using jQuery's .ajax Method in Visual Basic

<WebMethod()> Public Shared Function gtet() As String ... Dim GET = uClass.GetSets(dbuser, dbparam1) ... End Function and $(document).ready(function () { data = { }; var jsondata = $.toJSON(data); $.ajax({ type: "GET ...

Regularly send requests to an Express server using the $.get function

Operating an Express server with a time generator to send generated time data to the client page gtm.hbs. How can I implement regular polling of the server from the client using Ajax? Displayed below is the server-side code located in \routes\ge ...

Executing code asynchronously and handling callbacks using Process.nextTick and Promise

When I execute the following code: process.nextTick(() => console.log(8)) Promise.resolve("hi").then(t => console.log(t)) console.log(7); The output displayed is 7 8 hi This behavior is as expected because process.n ...

What is the best way to update the content of a modal using jQuery and AJAX?

Despite previous inquiries on this matter, none of the answers provided have been helpful to me. Therefore, I am addressing the issue again... I am currently developing the frontend of a website that does not involve any backend functionality (no server c ...

Check to see if the menu item exceeds the allotted space, and if so, display the mobile menu

Currently, I am in the process of creating a unique responsive menu for my website that I think will need some JavaScript implementation. My skills with JavaScript are not very strong, so I am looking for guidance, code examples, or resources that can assi ...

Changing state property upon clicking child element in React is not feasible

I am interested in changing the text color upon clicking it using a function triggered in a child element that affects the parent's state. This is because a specific property of the parent determines whether the text should be one color or another. W ...

Tips for sending data through AJAX before the browser is about to close

My issue is with a javascript function that I've called on the html unload event. It seems to be working fine in Google Chrome, but for some reason it's not functioning properly in Firefox and IE. <script> function fun() { ...

Issue with accessing $index.$parent in function parameter within ng-repeat in AngularJS

Can anyone with more experience please explain to me why this particular code compiles successfully: <li class="btn dropdown top-stack breadcrumb-btn" ng-repeat="nodeName in selectedNodeNames"> <a class="dropdown-toggle btn-anchor"> ...

When using momentJs to add days, it will return a moment object rather than a

How can I add 7 days to a date using momentJs in my Angular project? let startDate = "2018-08-16T02:00:00.242Z"; let newDate = moment(startDate).add(7, 'days'); I was expecting to receive the date after adding 7 days, but instead I get a momen ...

What is the best method for extracting a value from a JSON file within an array using electron and node.js?

Hey there, I'm currently working with a JSON file that contains an array of value sets. I'm trying to figure out how to extract the first value from the initial set, specifically the value 3 under the key "pink". This is all being done in Node.js ...

Changing a d3 event from JavaScript to Typescript in an Angular2 environment

I am a beginner in Typescript and Angular 2. My goal is to create an Angular2 component that incorporates a d3js tool click here. However, I am facing challenges when it comes to converting it to Typescript. For instance, I am unsure if this code rewrite ...

Font destruction in IE occurs when content is loaded via AJAX

Check out this specific website. Click on the orange arrow button and then the backward arrow once more. The paginator is set to display page 1 as default and load content from other pages using AJAX. However, in Internet Explorer, the content of the de ...

Utilizing jQuery to implement a CSS style with a fading effect, such as FadeIn()

I have a jQuery script that applies a CSS style to an HTML table row when the user clicks on a row link: $(this).closest('tr').css("background-color", "silver"); Is there a way to soften this color change effect, such as by gradually fading in ...

Configuring .env files for both production and development environments in Node.js

As I observed, there were various approaches to setting up environments in NodeJS - some seemed straightforward while others appeared more intricate. Is it possible to utilize package.json scripts to manage environment variables? If so, what is the best p ...

What is the process for capturing a window screenshot using Node.js?

I am currently conducting research to discover a way to capture a screenshot of a window using Node.js. I have been attempting to achieve this with node-ffi, but I am facing some difficulties at the moment: var ffi = require('ffi'); var user32 ...

Efficiently handling multiple form submissions using a single jQuery Ajax request

I'm working on a page that has 3-4 forms within divs, and I want to submit them all with just one script. Additionally, I want to refresh the content of the specific div where the form is located. However, I'm unsure of how to specify the current ...