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 8 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 8 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
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