I want to automatically reorder/sort a div according to the highest vote count once an ajax call is done, I have tried many thing codes and none seems to be working. Below is the code.
@foreach($candidates->sortByDesc("voteCount") as $candidate)
<div class="col-md-6" id="">// this is the div I want to reorder
<div class="card">
<div class="card-header">
<h4 class="card-title" id="heading-multiple-thumbnails"> </h4>
<a class="heading-elements-toggle">
<i class="la la-ellipsis-v font-medium-3"></i>
</a>
</div>
</div>
</div>
@endforeach
The Javascript
$('.castVoteForCandidateButton').on('click', function (e) {
$("#voteCofirmStatus").hide();
$("#voteProccessStatus").show();
$.ajax({
type:'POST',
url:'/vote',
data:{candidateId : candidateId, _token: "<?php echo csrf_token(); ?>",name:name ,position:position},
success:function(data){
if(data.status =='ok' ){
setTimeout(function() {$('#voteProcessingModal').modal('hide');}, 500);
$("#voteProccessStatus").hide();
$("#voteSuccessStatus").show().text('Nice job!,you have successfully voted for '+ data.name);
$("#voteCount"+data.id).text(parseFloat(data.voteCount)+" Votes");
$("#confirmCandidateVoteButton"+data.id).hide();
var div = $("#voteCount"+data.id);
div.animate({fontSize: "30px"}, "slow");
div.animate({fontSize: "17px"}, "slow");
const main = document.querySelector('#main');// this
const divs = [...main.children];// is
divs.sort((a, b) => a.id - b.id);// the
divs.forEach(div => main.appendChild(div));// Latest code I tried and its not working
}else{
$("#voteErrorStatus").show().text(data);
}
}
});
} );
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire