javascript - Convert Serialized Django Model Instance Back to Object in Ajax -
i'm using ajax search model instance, return instance, , pass variable template tag in template. in view, serialize object before sending ajax success function. once i'm in ajax function, though, how being model instance can use in template?
template.html
<div class="row"> <div class="col-md-10 col-md-offset-1" style="border: 2px solid #e4e4e4; border-radius: 8px"> <p class="text-center" style="color: #27ae60; padding: 20px 20px 0px 20px"><b>generate citation desired dataset typing id number in box below:</b></p> <form role="form" method="get" action="{% url 'databank:get_citation' %}" id="citation-form" style="padding: 0px 20px 20px 20px"> <div class="input-group"> <span class="input-group-addon" id="doi-prefix">11.23/</span> <input type="search" placeholder="data id" class="form-control form-search2" id="data-id" name="q"> <div class="input-group-btn"> <button class="btn blue-search-button"> <span>go</span> </button> </div> </div> </form> <div class="row"> <div class="col-md-10 col-md-offset-1" id="results">{{ errors }}</div> <div class="col-md-10 col-md-offset-1" id="generatedcitation"> <p style='font-size: 20px'class="citationresults">{% include 'databank/includes/citation.html' dataset=citationdataset registration=citationregistration %}</p> </div> </div> </div> </div> main.js
$('#citation-form').on('submit', function(event){ event.preventdefault(); console.log("form submitted!") // sanity check get_citation(); }); function get_citation(){ console.log("create post working!") // sanity check $.ajax({ url : "get_citation/", // endpoint type : "get", // http method data : { data_id : $('#data-id').val() }, // data sent request // handle successful response success : function(json) { $('#data-id').val(''); // remove value input console.log(json); // log returned json console if(json.errors){ $('.errors').html(json.errors); } else{ $('.citationresults').html(json.citation.citationdataset); $('.citationresults').html(json.registration.citationregistration); } console.log("success"); // sanity check }, // handle non-successful response error : function(xhr,errmsg,err) { $('#results').html("<div class='alert-box alert radius' data-alert>oops! have encountered error: "+errmsg+ " <a href='#' class='close'>×</a></div>"); // add error dom console.log(xhr.status + ": " + xhr.responsetext); // provide bit more info error console } }); }; views.py
def get_citation(request): if request.method=='get': dataset_id = request.get.get('data_id') print "id is: ", dataset_id try: dataset = dataset.objects.get(dataset_id=dataset_id) registration = registration.objects.get(dataset=dataset) if dataset.status == 'public': print "public: ", dataset, registration data_info = {} dataset = serializers.serialize('json', [ dataset, ]) data_info['dataset'] = dataset registration = serializers.serialize('json', [ registration, ]) data_info['registration'] = registration return jsonresponse(data_info) else: return jsonresponse({"errors": "the dataset requested has not yet been made public. check later."}) except dataset.doesnotexist: return jsonresponse({"errors": "the dataset requested not found. make sure using correct id."}) new working, code after following @juliengrégoire 's advice-
template.html:
<div class="row"> <div class="col-md-10 col-md-offset-1"> <p><b>citation generator</b></p> <form role="form" method="get" action="{% url 'databank:get_citation' %}" id="citation-form"> <div class="input-group"> <span class="input-group-addon" id="doi-prefix">11.0/</span> <input type="search" placeholder="data id" class="form-control form-search2" id="data-id" name="q"> <div class="input-group-btn"> <button class="btn blue-search-button"> <span>get citation</span> </button> </div> </div> </form> <div class="row"> <div class="col-md-10 col-md-offset-1" id="generatedcitation"> <p style='font-size: 20px' class="citationresults"></p> </div> </div> </div> </div> main.js:
$('#citation-form').on('submit', function(event){ event.preventdefault(); console.log("citation generator form submitted") get_citation(); }); function get_citation(){ console.log("citation generator working!") $.ajax({ url : "get_citation/", type : "get", data : { data_id : $('#data-id').val() }, // data sent request, inputted data id // handle successful response success : function(data) { $('#data-id').val(''); // remove value input console.log(data); // log returned json console $('.citationresults').html(data); console.log("success"); // sanity check }, // handle non-successful response error : function(xhr,errmsg,err) { $('.citationresults').html("<div class='alert-box alert radius' data-alert>oops! have encountered error: "+errmsg+ " <a href='#' class='close'>×</a></div>"); // add error dom console.log(xhr.status + ": " + xhr.responsetext); // provide bit more info error console } }); }; views.py:
def get_citation(request): if request.method=='get': dataset_id = request.get.get('data_id') try: dataset = dataset.objects.get(dataset_id=dataset_id) registration = registration.objects.get(dataset=dataset) if dataset.status == 'public': context = {'registration': registration, 'dataset': dataset} html = render_to_string('databank/includes/citation.html', context) return httpresponse(html) else: context = {'message': "the dataset requested has not yet been made public. check later."} html = render_to_string('databank/includes/no_citation.html', context) return httpresponse(html) except dataset.doesnotexist: context = {'message': "the dataset requested not found. make sure using valid id."} html = render_to_string('databank/includes/no_citation.html', context) return httpresponse(html)
templates rendered on server, don't see how can render in javascript, client side.
what can create template takes care of portion want update , send rendered html view , reinject it.
so here, instead of serializing in view, return render appropriate context , template , use jquery html function insert , div , should work.
Comments
Post a Comment