Tengo el siguiente código html que me muestra las estrellas en pantalla.
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="rating.css" type="text/css" media="screen" title="Rating CSS">
</head>
<body>
<div class="container" style="margin-top:35px">
<div class="ratings">
<input type="radio" name="star" id="rating" value="1">
<input type="radio" name="star" id="rating" value="2">
<input type="radio" name="star" id="rating" value="3">
<input type="radio" name="star" id="rating" value="4">
<input type="radio" name="star" id="rating" value="5">
</div>
<br>
<span class="info"></span>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="rating.js"></script>
<script>
$('.ratings').rating(function(vote, event) {
$.ajax({
method: 'POST',
url: 'insrating.php',
data: {
vote: vote
}//línea 42
}).done(function(info) {
$('.info').html("Your vote: <b>" + info + "</b>")
})
})
</script>
</body>
Esto me muestra las 5 estrellas en la pantalla. Al pasar el ratón por encima, las va pintando como su fuese una calificación, ya que esa es la misión.
Lo que quiero lograr es que por ejemplo si hago click en 4 estrellas, salga un mensaje diciendo: "your vote: 4".
Aquí muestro el php a donde lo mando:
<?php
echo $_POST['vote'];
?>
Y estos son los errores que me salen en la consola. No entiendo los errores "anchorElement" o de "enlace":
Uncaught TypeError: $.ajax(...).done is not a function
at Object.callback ((index):42)
at HTMLAnchorElement.click (rating.js:1)
at HTMLAnchorElement.handle (jquery.min.js:19)
at HTMLAnchorElement.<anonymous> (jquery.min.js:19)
Alguien puede ayudarme??