Ratings in Modal not working
Hi,
I have been struggling for hours with an issue so thought i better get help.
I am trying to put some rating stars in a modal, but they dont work! I am using the below code which is from here https://preview.keenthemes.com/html/metronic/docs/base/rating
<div class="rating">
<!--begin::Reset rating-->
<label class="btn btn-light fw-bold btn-sm rating-label me-3" for="kt_rating_2_input_0">
Reset
</label>
<input class="rating-input" name="rating2" value="0" checked type="radio" id="kt_rating_2_input_0"/>
<!--end::Reset rating-->
<!--begin::Star 1-->
<label class="rating-label" for="kt_rating_2_input_1">
<i class="ki-duotone ki-star fs-1"></i>
</label>
<input class="rating-input" name="rating2" value="1" type="radio" id="kt_rating_2_input_1"/>
<!--end::Star 1-->
<!--begin::Star 2-->
<label class="rating-label" for="kt_rating_2_input_2">
<i class="ki-duotone ki-star fs-1"></i>
</label>
<input class="rating-input" name="rating2" value="2" type="radio" id="kt_rating_2_input_2"/>
<!--end::Star 2-->
<!--begin::Star 3-->
<label class="rating-label" for="kt_rating_2_input_3">
<i class="ki-duotone ki-star fs-1"></i>
</label>
<input class="rating-input" name="rating2" value="3" type="radio" checked="checked" id="kt_rating_2_input_3"/>
<!--end::Star 3-->
<!--begin::Star 4-->
<label class="rating-label" for="kt_rating_2_input_4">
<i class="ki-duotone ki-star fs-1"></i>
</label>
<input class="rating-input" name="rating2" value="4" type="radio" id="kt_rating_2_input_4"/>
<!--end::Star 4-->
<!--begin::Star 5-->
<label class="rating-label" for="kt_rating_2_input_5">
<i class="ki-duotone ki-star fs-1"></i>
</label>
<input class="rating-input" name="rating2" value="5" type="radio" id="kt_rating_2_input_5"/>
<!--end::Star 5-->
</div>The stars show up, you can hover over them but you cannot select them when they are loaded up in a modal?? I have tried loading all of the css and js files when the modal opens but still doesnt work. There are no errors showing in the console.
Im confused.
Thanks
Paul
Replies (5)
Hi,
Sorry for the late reply.
We have tested your code in a modal using Metronic v8.2.3 and it worked as expected:
Regards
Hi Sean,
My apologies, looking back i only gave half the story.
I am calling the ratings in on a page that is loaded up in a modal using ajax. The ratings don't load up with the main page. Its when they get loaded up using the script below that they dont work.
Do i need to re-initialise 1 of the core files when loading this page up?
$(document).ready(function(){
$(".newNotes").click(function(){
var rid = <?php echo $rid; ?>;
var race = "<?php echo $id; ?>";
var uid = <?php echo $userid; ?>;
// AJAX request
$.ajax({
url: "modals/add_race_notes_modal.php",
type: "get",
data: {rid: rid, uid:uid, r:race},
success: function(response){
// Add response in Modal body
$(".modal-body").html(response);
// Display Modal
$("#notesModal").modal("show");
}
});
});
});Hi,
The rating component is a static JS-less component and should work as expected via Ajax.
Can you try to test the code that is returned from your Ajax source by putting it in your modal as a static HTML code ? Just to make sure that your modal markup is correct and it works as per original markup.
Regards.
Hi Sean,
Apologies, i did a work around and removed the modal however i now need to get back to loading this up in the modal again.
Its still not working for me. I have the basic code in my modal, copied from your support page https://preview.keenthemes.com/html/metronic/docs/base/rating
The modal opens up perfectly and all 5 stars are yellow, when i hover over the stars they change state as expected and when i hover over the reset they all go grey, but clicking them doesnt do anything at all.
1 think i did notice, i had the HTML for teh stars in my main page body behind on 1 test and clicking the stars in the modal, updated the stars in the main page behind. Am i missing some page structure so it knows what and where to update?
Thanks
Paul
EDIT: I just hardcoded the modal in the main page body and loaded it up without the ajax call and it worked perfectly. What am i missing! ??? Thanks
Hi,
The rating does not have any JS logic behind so it should be affected by the Ajax call.
Can you please double-check that the code loaded via Ajax and the hardcoded one are the same?
Can you please send us a test link to your page via a private reply here?
Regards.
