![\"\"](\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/01\/image-2.png\")
<\/figure>\n\n\n\nTo make an Ajax request, we first need to include the jquery<\/strong> library to our page.<\/p>\n\n\n\n We define We define the url<\/strong> where the ajax request will be made in We define our function that will work according to the url request in According to the subject_id<\/strong>, we get the topics<\/strong> related to it from the database. We send topics<\/strong> as json<\/strong> data to frontend. If there is a problem, we send an error<\/strong> message to frontend.<\/p>\n\n\n\n Good luck.<\/p>\n\n\n\n <\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":" In Django projects, we may have data like categories and subcategories. We can present this data in forms with drop-down lists in the user interface. In this post, I will explain how to dynamically get subcategories from server with ajax request without refreshing the page, depending on the selected category. There is a database structure […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30,4],"tags":[],"yoast_head":"\n
As you can see in our HTML template below, while rendering the page, we render it with our subjects<\/strong> data. We will update our Topic<\/strong> drop-down list with the ajax request according to the subject<\/strong> selected from the drop-down list. <\/p>\n\n\n\n{% csrf_token %}\n<div class="col-md-6">\n <div class="form-group">\n <label for="inputStatus">Subject<\/label>\n <select id="question-subject" class="form-control-sm custom-select">\n <option selected disabled>Choose a subject<\/option>\n {% for subject in subjects%}\n <option value="{{subject.id}}">{{subject.title}}<\/option>\n {% endfor %}\n <\/select>\n <\/div>\n<\/div>\n<div class="col-md-6">\n <div class="form-group">\n <label for="inputStatus">Topic<\/label>\n <select id="question-topic" class="form-control-sm custom-select" name="topic">\n <option selected disabled>Choose a topic<\/option>\n <\/select>\n <\/div>\n<\/div><\/pre><\/div>\n\n\n\nid = \"question-subject\"<\/code> to our subject dropdown list. We select this list with the jquery selector and detect a change in this list with the change event<\/strong>. We assign the ID<\/strong> of the selected subject to a variable. Then, we make an ajax request to the address named get_topics_ajax<\/strong> and renew our topic list with the data returned from the request.<\/p>\n\n\n\n{% block javascript %}\n<script src="https:\/\/code.jquery.com\/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH\/C8ycbRAkjPDc=" crossorigin="anonymous"><\/script>\n<script>\n $("#question-subject").change(function () {\n const subjectId = $(this).val(); \/\/ get the selected subject ID from the HTML dropdown list \n $.ajax({ \/\/ initialize an AJAX request\n type: "POST",\n url: '{% url "get_topics_ajax" %}',\n data: {\n 'subject_id': subjectId, \/\/ add the country id to the POST parameters\n 'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val(),\n },\n success: function (data) { \/\/ `data` is from `get_topics_ajax` view function\n let html_data = '<option value="">---------<\/option>';\n data.forEach(function (data) {\n html_data += `<option value="${data.id}">${data.title}<\/option>`\n });\n $("#question-topic").html(html_data); \/\/ replace the contents of the topic input with the data that came from the server\n }\n });\n });\n<\/script>\n{% endblock javascript %}<\/pre><\/div>\n\n\n\nurls.py<\/code> in the backend.<\/p>\n\n\n\n path('get-topics-ajax\/', get_topics_ajax, name="get_topics_ajax"),<\/pre><\/div>\n\n\n\nview.py<\/code> as follows. <\/p>\n\n\n\nfrom quiz.models import Question, Topic, Subject\nfrom django.http import JsonResponse,\n\ndef get_topics_ajax(request):\n if request.method == "POST":\n subject_id = request.POST['subject_id']\n try:\n subject = Subject.objects.filter(id = subject_id).first()\n topics = Topic.objects.filter(subject = subject)\n except Exception:\n data['error_message'] = 'error'\n return JsonResponse(data)\n return JsonResponse(list(topics.values('id', 'title')), safe = False) <\/pre><\/div>\n\n\n\n