Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps!
We spend hours on Instagram and YouTube and waste money on coffee and fast food, but won’t spend 30 minutes a day learning skills to boost our careers.
Master in DevOps, SRE, DevSecOps & MLOps!
Learn from Guru Rajesh Kumar and double your salary in just one year.
#1 First include a button that trigger our Bootstrap model to take users rating and review
<button class="ratenow btn btn-success btn-sm border">Rate Now</button>#2 This is my bootstrap model
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="modal fade" id="ratingModel" tabindex="-1" role="dialog" aria-labelledby="ratingModel" aria-hidden="true"> | |
| <div class="modal-dialog" role="document"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="exampleModalLabel"></h5> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
| <span aria-hidden="true">×</span> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <p class="ratingmsg text-danger"></p> | |
| <div align="center"> | |
| <i class="fa fa-star fa-2x" data-index="0"></i> | |
| <i class="fa fa-star fa-2x" data-index="1"></i> | |
| <i class="fa fa-star fa-2x" data-index="2"></i> | |
| <i class="fa fa-star fa-2x" data-index="3"></i> | |
| <i class="fa fa-star fa-2x" data-index="4"></i> | |
| </div> | |
| <br> | |
| <label for="exampleFormControlTextarea3">Your review</label> | |
| <textarea class="form-control" id="reviewinput" value="" rows="5" required></textarea> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
| <button type="submit" id="saveChanges" class="btn btn-primary">Save changes</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
#3 jQuery to get the review and rating from bootstrap model and send it to database using ajax
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).on('click', '.ratenowbutton', function() { | |
| $("#ratingModel").modal(); | |
| rating(); | |
| }); | |
| var ratedIndex = -1; | |
| function rating(){ | |
| localStorage.removeItem('ratedIndex'); | |
| resetStarColors(); | |
| if(localStorage.getItem('ratedIndex') != null) | |
| setStars(parseInt(localStorage.getItem('ratedIndex'))); | |
| $('.fa-star').on('click',function(){ | |
| ratedIndex = parseInt($(this).data('index')); | |
| localStorage.setItem('ratedIndex', ratedIndex); | |
| }); | |
| $(".fa-star").mouseover(function (){ | |
| $("#saveChanges").prop("disabled", false); | |
| $(".ratingmsg").empty(); | |
| resetStarColors(); | |
| var currentindex = parseInt($(this).data('index')); | |
| setStars(currentindex); | |
| }); | |
| $(".fa-star").mouseleave(function (){ | |
| resetStarColors(); | |
| if(ratedIndex != -1) | |
| setStars(ratedIndex); | |
| }); | |
| function setStars(max){ | |
| for (var i=0; i <= max; i++) | |
| $('.fa-star:eq('+i+')').css('color','orange'); | |
| } | |
| function resetStarColors(){ | |
| $(".fa-star").css('color','black'); | |
| }; | |
| } | |
| $('#saveChanges').on('click',function(){ | |
| if(ratedIndex != -1 && $("#reviewinput").val() != ''){ | |
| var review = $("#reviewinput").val(); | |
| var orderid = $("#orderid").val(); | |
| $.ajax({ | |
| type: "POST", | |
| url: "URL", | |
| data: {'rating': ratedIndex+1, | |
| 'review':review,}, | |
| headers: { | |
| "Authorization": "Bearer " + localStorage.getItem('a_u_a_b_t') | |
| }, | |
| success: function(data) | |
| { | |
| $("#ratingModel").modal('hide'); | |
| location.reload(); | |
| } | |
| }); | |
| }else{ | |
| $("#saveChanges").prop("disabled", true); | |
| $(".ratingmsg").html("Rating and review can't be empty"); | |
| } | |
| }); |