Topic: Set Rating to read only after successful ajax request

Ralf priority asked 1 year ago


Expected behavior

I want to set the rating component to readonly after the Ajax request to handle the rating on the server was successful. But whatever I try, the rating can still be changed afterwards while a mouse over. I can hover over all five stars and they still change. Also the request can be sent again and again and again.

Resources (screenshots, code snippets etc.)

https://mdbootstrap.com/docs/standard/components/rating/

This is the HTML:

<ul class="rating" id="photo-rating" data-mdb-toggle="rating">
    <li><i class="far fa-star fa-sm text-primary"></i></li>
    <li><i class="far fa-star fa-sm text-primary"></i></li>
    <li><i class="far fa-star fa-sm text-primary"></i></li>
    <li><i class="far fa-star fa-sm text-primary"></i></li>
    <li><i class="far fa-star fa-sm text-primary"></i></li>
</ul>

And this is the part when the Ajax Request was successful. The Ajax Request itself works.

let ratingElement = document.querySelector('#photo-rating');
let ratingInstance = new mdb.Rating(ratingElement);
ratingInstance.readonly = true;
ratingElement.setAttribute('data-mdb-readonly', 'true');

Please advise how to fix this.


computingpro priority answered 6 months ago


Can you please advise how you got the rating to work, I don't have the hover effect. Which file(s) should I link to?


Kamila Pieńkowska staff commented 5 months ago

You need to import the mdb.umd.min.js file from the MDB5 Essential or Advanced package.


Ralf priority answered 1 year ago


Ok, In figured it out. My mistake was, that I had the line

const ratingInstance = new mdb.Rating(ratingElement);

within my event listener function. When I define it outside of it, everything works.

=> Problem solved



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.2.0
  • Device: HP Laptop
  • Browser: Firefox 111.0.1
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: Yes