![\"\"](\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/01\/image-2.png\")
<\/figure>\n\n\n\nA\u015fa\u011f\u0131daki html templatimizde de g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi sayfay\u0131 render ederken subjects<\/strong> verimizle birlikte render ediyoruz. A\u00e7\u0131l\u0131r listeden se\u00e7ilen subject<\/strong>‘ e g\u00f6re Topic<\/strong> a\u00e7\u0131l\u0131r listemizi, backende yapaca\u011f\u0131m\u0131z ajax<\/strong> requestle verilerimizi \u00e7ekip g\u00fcncelliyece\u011fiz.<\/p>\n\n\n\n Ajax requesti yapmak i\u00e7in ilk \u00f6nce jquery <\/strong>k\u00fct\u00fcphanesini sayfam\u0131za eklememiz gerekiyor. <\/p>\n\n\n\n Subject a\u00e7\u0131l\u0131r listemize Backendde Gelen url iste\u011fine g\u00f6re \u00e7al\u0131\u015facak fonksiyonumuzu Ba\u015far\u0131lar Dilerim.<\/p>\n\n\n\n <\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":" Django projelerinde kategori ve buna ba\u011fl\u0131 alt kategorili verilerimiz olabilir. Bunu kullan\u0131c\u0131 aray\u00fcz\u00fcnde a\u00e7\u0131l\u0131r listeler ile formlarda sunabiliriz. Bu yaz\u0131da se\u00e7ilen kategoriye g\u00f6re ba\u011fl\u0131 alt kategorileri sayfay\u0131 yenilemeden dinamik olarak ajax ile backenden nas\u0131l \u00e7ekilir bunu anlataca\u011f\u0131m. Yaz\u0131l\u0131m dillerini tutaca\u011f\u0131m\u0131z subject ad\u0131nda bir \u00fcst kategori ve bu kategoriye ba\u011fl\u0131 dillerin i\u00e7eriklerini tutacak topic ad\u0131nda alt […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[32,26],"tags":[],"yoast_head":"\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> idsini veriyoruz. Jquery selector ile bu listeyi se\u00e7ip bu listede olan bir de\u011fi\u015fimi change event<\/strong>i ile alg\u0131l\u0131yoruz. Se\u00e7ilen subject’in ID<\/strong>‘ sini bir de\u011fi\u015fkene at\u0131yoruz. Daha sonra get_topics_ajax <\/strong>ismindeki adrese ajax request yap\u0131p requestten d\u00f6nen veriler ile topic listemizi yeniliyoruz.<\/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(); \/\/ Se\u00e7ilen subject' in ID' sini de\u011fi\u015fkene atama \n $.ajax({ \/\/ AJAX request' ba\u015flatma\n type: "POST",\n url: '{% url "get_topics_ajax" %}',\n data: {\n 'subject_id': subjectId, \/\/ POST parameterlerine subject id' yi ekleme\n 'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val(),\n },\n success: function (data) { \/\/ `get_topics_ajax` view fonksiyonundan d\u00f6nen veri\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); \/\/ Serverden gelen veri ile topic listesinin i\u00e7eri\u011fini de\u011fi\u015ftirme\n }\n });\n });\n<\/script>\n{% endblock javascript %}<\/pre><\/div>\n\n\n\nurls.py<\/code> de ajax requestinin yap\u0131laca\u011f\u0131 url tan\u0131mlayal\u0131m.<\/p>\n\n\n\n path('get-topics-ajax\/', get_topics_ajax, name="get_topics_ajax"),<\/pre><\/div>\n\n\n\nview.py<\/code> de a\u015fa\u011f\u0131daki gibi tan\u0131ml\u0131yoruz. subject_id<\/strong> ye g\u00f6re ona ba\u011fl\u0131 topic<\/strong>‘ leri veritaban\u0131ndan \u00e7ekiyoruz. Topic’<\/strong> leri json<\/strong> verisi olarak frontende g\u00f6nderiyoruz. E\u011fer bir problem olursa frontende error<\/strong> mesaj\u0131 g\u00f6nderiyoruz.<\/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