javascript - Django - reloading element through AJAX -
i trying alter selection options on page dynamically without reloading page. alteration shall depend on id received dynamically value of element on same page. trying use ajax element fails dynamically updated. wish render update through end.
models.py
class exptype(models.model): exp_type = models.charfield(max_length=40) def __unicode__(self): return self.exp_type class subtype(models.model): exptype = models.foreignkey(exptype, related_name= 'exptypes') exp_subtype = models.charfield(max_length=40) def __unicode__(self): return self.exp_subtype class payer(models.model): exp_payer = models.charfield(max_length=40) def __unicode__(self): return self.exp_payer views.py
def recording(request): typex = exptype.objects.all() subtype = subtype.objects.all() payer = payer.objects.all() if request.is_ajax(): expval = int(request.post.get("formdata", "")) subtype = subtype.objects.filter(exptype=expval) return render(request, 'expenses/recording.html', { 'subtype': subtype, }) return render(request, 'expenses/recording.html', { 'payer': payer, 'typex': typex, 'subtype': subtype, }) recording.html
<td id="ontype"> <select id="expval" name="expsubmit"> {% exp in typex %} <option value="{{ exp.id }}">{{ exp }}</option> {% endfor %} </select> </td> </tr> <tr> <th>subtype</th> <th>payer</th> </tr> <tr> <td id="onstype"> <select id="subval" name="recordsub"> {% sub in subtype %} <option value="{{ sub.id }}">{{ sub }}</option> {# list of values here shall change depending on selection of #expval #} {% endfor %} </select> </td> <div id="result"></div> ajaxscr.js
$("#onstype").on("mouseenter", function() { expval = $("#expval").val() $.ajax({ type: "post", url: "/expenses/recording/", datatype: "json", data: { formdata: expval, }, success: function() { $("#result").html(expval); //checking ajax call } }); }); got post response console , correct. anyway dom element stayed outdated. be?
post response:
<!doctype html> (...) <td id="ontype"> <select id="expval" name="expsubmit"> </select> </td> </tr> <tr> <th id="onstype">subtype</th> <th>payer</th> </tr> <tr> <td> <select id="subval" name="recordsub"> <option value="3">fruit</option> <option value="4">meat</option> <option value="5">juice</option> </select> </td>
updating view context - won't update dom element. ajax job. conclusion - data should passed via json view javascript.js. here parts of code fixed:
views.py
def recording(request): typex = exptype.objects.all().values('id', 'exp_type') payer = payer.objects.all() if request.is_ajax(): var = int(request.post.get("expvalue", "")) subt = serializers.serialize('json', subtype.objects.filter(exptype=var), fields=('exp_subtype')) response_data = {} try: response_data['result'] = 'ok - submit' response_data['message'] = subt except: response_data['result'] = 'failure' response_data['result'] = 'the script failed' return httpresponse(json.dumps(response_data), content_type="application/json") return render(request, 'expenses/recording.html', { 'payer': payer, 'typex': typex, }) ajaxcode.js
$("#expval").on('change', function() { $('#subval').html(''); expval = $("#expval").val() $.ajax({ type: "post", url: "/expenses/recording/", datatype: "json", data: { expvalue: expval, }, success: function(json) { var expfilter = json.message var dat = json.parse(expfilter); //going extracting value of required object //console.log(expfilter) (fields in dat){ if (dat.hasownproperty(fields)) { var dd = dat[fields] var v_first = true; //console.log(dd) (i in dd) { if (dd.hasownproperty(i)) { if (v_first) { var obj = dd[i] //console.log(obj) v_first = false; var first = true; (x in obj) { if (obj.hasownproperty(x)) { if (first) { console.log(obj[x]); var subt = obj[x] //appending selection extracted values $('<option/>', { value : subt }).text(subt).appendto('#subval'); first = false; } } } } } } } } } }) }) recording.html
<tr><td id="ontype"> <select id="expval" name="recordtype"> <option selected="true" style="display:none;">select type</option> {% exp in typex %} <option value={{ exp.id }}>{{ exp.exp_type }}</option> {% endfor %} </select> </td> </tr> <tr> <td> <select id="subval" name="recordsub"> </select> </td> </tr>
Comments
Post a Comment