Topic: Set Rating to read only after successful ajax request
Ralf priority asked 11 months 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 4 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 4 months ago
You need to import the mdb.umd.min.js
file from the MDB5 Essential or Advanced package.
Ralf priority answered 11 months 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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