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

Verify if there is a date present within the JSON entity

I have a PHP array containing date strings and I want to validate them using a native HTML5 date input element. To achieve this, I have converted the date array into a JSON object for use with JavaScript: <script> var date_array = <?php echo json ...

Unable to select image inside linked container

I'm attempting to display a dropdown menu when the user clicks on the gear-img div using jQuery. However, because it's wrapped inside an a tag, clicking redirects me to a URL. I also want the entire div to be clickable. Any suggestions for a solu ...

Do AngularJS applications function similarly to windows?

Do AngularJS apps behave like windows? And is it possible to add an event listener to them? I am currently working on a proof of concept to see if an Angular app can communicate with a server without impacting the host. One potential solution I have thou ...

"Exploring the method of adding information to a table with the help of

Here is the structure of my HTML table: <table id="tableOrderDetail" class="table-striped table-bordered" style="align: center; width: 100%;"> <thead> <tr> <th width="5%">Sr. No.</th> <th width="25%">Product N ...

Combining Versioning with BundleConfig.cs: A Comprehensive Guide

Encountering a recurring issue where changes made to CSS or Javascript files do not reflect in client browsers unless they manually refresh the page with ctrl+F5. This poses a challenge, especially in a school system with numerous users who may not be awar ...

Setting a validation message for a Vuejs username input while enforcing a maximum character limit

<script> export default { name: "Register", props: { msg: String, }, }; </script> <style scoped> * { box-sizing: border-box; } div { padding: 0; margin: 0; font-family: system-ui; } .red { color: red; } <template& ...

What are the steps for populating a table cell with data using AJAX, MySQL, and PHP in the given situation?

The challenge is to create an HTML table with two columns where the first column gets its data from PHP and MySQL. The goal is to turn the values in the first column into clickable links that, when clicked, trigger an AJAX call to fetch information from th ...

What could be hindering the activation of my button click event?

Below is the js file I am currently working with: var ButtonMaximizer = { setup: function () { $(this).click(function(){ console.log("The maximize button was clicked!"); }); } }; $(docum ...

leveraging third party plugins to implement callbacks in TypeScript

When working with ajax calls in typical javascript, I have been using a specific pattern: myFunction() { var self = this; $.ajax({ // other options like url and stuff success: function () { self.someParsingFunction } } } In addition t ...

What is the best way to utilize functions in Express to dynamically display content on my Jade template?

I have successfully implemented a user registration and login page, but now I need to determine what content to display based on whether the user is logged in. I found this solution: app.use(function(req, res, next) { db.users.find({rememberToken: req.c ...

Leveraging the power of JavaScript and possibly regular expressions to extract numerical values from a

I am attempting to extract a variable number from the text provided in the following example: Buy 5 for € 16.00 each and save 11% Buy 50 for € 15.00 each and save 17% Buy 120 for € 13.00 each and save 28% Buy 1000 for € 10.00 each and save 45% Th ...

Tips for displaying lesser-known checkboxes upon clicking a button in Angular

I have a form with 15 checkboxes, but only 3 are the most popular. I would like to display these 3 by default and have an icon at the end to expand and collapse the rest of the checkboxes. Since I'm using Angular for my website, I think I can simply ...

What is the best way to utilize a variable in jQuery outside of a function?

I am attempting to utilize the .index method to determine the position of the image that is clicked on. I then need to use that number in another variable which must be external to the function. var index; $('.product img').click(function () ...

Fade in and out a Div with a distinct class and ID

I'm currently experiencing a minor issue with some jQuery code. Below are some divs: <div class="add" id="1">Follow</div> <div class="added" id="1">Following</div> <div class="add" id="2">Follow</div> <div clas ...

Retrieve the Checkbox id of a material-ui checkbox by accessing the object

I'm currently working on extracting the id of a Checkbox object in my JSX code. Here's how I've set it up: <div style={{display: 'inline-block', }}><Checkbox id='q1' onclick={toggleField(this)}/></div> ...

Is there a method to pre-load a CSS background image so that it can still be displayed even without an internet connection?

Situation: Imagine having a web app that shows an error message when trying to perform an action but fails due to a connectivity problem. The error dialogue has a CSS class with a background image that can't load because of the connection issue, res ...

Displaying the active navigation element in ApyCom JavaScript jQuery menu: tips and tricks

Currently, I am utilizing the jQuery navigation menu from ApyCom. Everything seems to be functioning properly except for one issue. Whenever I click on a different navigation element, I expect that element to remain highlighted in order to indicate to the ...

Are there any disadvantages to utilizing bindActionCreators within the constructor of a React component when using Redux?

I have come across numerous instances where the bindActionCreators function is used within the mapDispatchToProps function as shown below: ... const mapDispatchToProps = (dispatch, props) => ({ actions: bindActionCreators({ doSomething: som ...

Keep the sub-menu in a kendo context menu from closing until the user either hovers over another menu item or clicks outside of the current item

Please take a look at this example: Due to the small size of sub-items, the sub-menu closes quickly when hovering over the menu and losing focus. My goal is to keep an opened sub-menu from closing until the user hovers over another menu item or clicks on ...

Toggle the Editable Feature in AngularJS JSON Editor

Currently, I'm utilizing a library called ng-jsoneditor that is available on GitHub. I am attempting to switch the state of an element from being editable to being read-only. To indicate that an element should be read-only, I need to specify the onE ...