Upon clicking the button, I see console output correctly; however, my options are not updating. I am a beginner in Ajax, Jquery, and Django and have spent over a week trying to resolve these issues with no success. Please assist me.
This is my Django code:
# model
class Post(models.Model):
post_heading = models.CharField(max_length=200)
post_text = models.TextField()
def __str__(self):
return self.post_heading
# view
def getmydata(request):
# Retrieve provinces for a given country from the database without null or blank values
if request.method == "GET":
data = list(Post.objects.all().values())
return JsonResponse({"data": data})
This is my HTML template:
<div >
<select name="car_maker" id="car_maker">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="postacct">
<p>{{ acct.post_heading }}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$('.clickme').click(function(){
let catid;
{#catid = $(this).attr("data-catid");#}
catid='nil'
$.ajax(
{
type: "GET",
url: "/getmydata",
data: {
post_id: catid,
'csrfmiddlewaretoken': '{{csrf_token}}'
},
success: function (data) {
console.log(data);
$("#car_maker option").remove();
$.each(data.rows, function (index, item) { //jQuery way of iterating through a collection
$("#car_maker option").append($('<option>')
.text(item.label)
.attr('value', item.value));
})
}
})})
</script>
</body>
</html>
My console output from Ajax call:
(index):54
{data: Array(2)}
data: Array(2)s
0: {id: 1, post_heading: "2", post_text: "two"}
1: {id: 2, post_heading: "1", post_text: "one"}
length: 2