How to use ajax in dropdown to select items, when I am working with the django framework? - ajax

Question

I am working on a Django framework and I am very much new to both Django and Ajax. I have used a drop down list and I need to select an item from that and accordingly display its details in a table like format. Can someone help me with an Ajax code for this. Also, it would be great if you could suggest how should I build the corresponding view for it.
The code that I tried to write is something like below:
<script type="text/javascript">
$(function() {
$('#profession').change(function() {
$.ajax({
url: '/fdp/instance_creation/(\d+)',
dataType: 'json',
type: 'GET',
// This is query string i.e. country_id=123
data: {instance_id : $('#profession').val()},
success: function(data) {
if(data == null || data ==""){
}
else{
document.getElementById("mytablebody").innerHTML="";
var srno=1;
for (var i = 0; i < data.length; i++) {
var table = document.getElementsByName("tablebody")[0];
var row = document.createElement('tr');
var cell1 = document.createElement('td');
var cell2 = document.createElement('td');
var cell3 = document.createElement('td');
var cell4 = document.createElement('td');
// var cell5 = document.createElement('td');
var text1 = document.createTextNode({{forloop.counter}});
var text2 = document.createTextNode(data[i].{{workshopid}});
var text3 = document.createTextNode(data[i].{{startdate}});
var text4 = document.createTextNode(data[i].{{enddate}});
// var text5 = document.createTextNode("");
cell1.appendChild(text1);
cell2.appendChild(text2);
cell3.appendChild(text3);
cell4.appendChild(text4);
//cell5.appendChild(text5);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
//row.appendChild(cell5);
table.appendChild(row);
srno++;
},
error: function(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
</script>
I am completely new in this field so it would be nice if you could pardon me for small mistakes.

Answer 1

What do you want to happen with this URL?
url: '/fdp/instance_creation/(\d+)',
Do you want something to be substituted at the end? You will have to do that beforehand. Do you want this:
url: '/fdp/instance_creation/' + $('#profession').val(),
Also, what did you mean by this code:
var text1 = document.createTextNode({{forloop.counter}});
var text2 = document.createTextNode(data[i].{{workshopid}});
var text3 = document.createTextNode(data[i].{{startdate}});
var text4 = document.createTextNode(data[i].{{enddate}});
The {{}} would be filled in on the Django side as templates. It really feels like you'd at least want:
var text1 = document.createTextNode(i);
The other ones could work if they resolve to field names in the JSON.
As for a view, you just need to respond with JSON data. To test, just make a view function that returns a hard-coded string like "[{'fld': 'val', 'fld2': 'val2'}]" (I don't know your real field names, but fill them in correctly)