How to parse django view object to JavaScript object? - javascript

I am trying to build this :
There is a button, and if the button is clicked, it sends some request to django server and server returns some form. After that, put the form into a div.
So, my idea is
make a event handling function to handle button click event
put AJAX operation into the event handling function to send request and put a form into a div
Write view to receive request and return form that fits with request
the AJAX operation at Step 2 put returned form into the div
But the problem is, at step 3, returning form.
The form is
form = EventForm({'date':date(year,month,day)})
Which is a ModelForm based on the model Event.
Because Javascript cannot understand Django form object, I need something to parse it into a javascript object, like <div> node, or just some HTML string, but I don't know :(
I know there is {{ form.as_p }} for template, but I wonder whether there is such functions for python view codes.

With ajax, you won't be able to use django forms.
You would have to hand-craft the html form, and then use ajax to send the request to django, which would respond with a json object (most likely) which you would, again using some javascript running on the browser, be able to render on your html.

Related

Model null on submit in asp mvc.net form if using ajax to request data

I would like to know how to do it right or circumvent a problem I have.
I have an ASP MVC.NET 5 page with a model. On the [HttpGet]Index() I prepare the model and pass it to the view. The view contains #Html.EditorFor and #Html.DropdownFor input fields for the model properties. At the end is a singular submit button to send/POST the form to the controller and its [httppost]Index(MyModel model) controller method, which accepts the model as an input parameter. All dandy, all fine.
Now I want to dynamically change contents of dropdowns when the user selects the topmost dropdown, selects an entry then other dropdowns shall change as well.
The way I found to do it was to use javascript and .onchange(function(){.$.ajax(postdata)}) to generate a POST-request, this request is sent to a controller method, the controller generates a json-reply with new string lists, and then these strings are put into the other dropdowns. This works fine. I can click on the dropdowns, select values, and other dropdowns dynamically change content, and so forth. All dandy, all fine.
The view contains a few other fields, for the name of the user, or a phone number field, and so forth.
When the user fills in the data, selects dropdowns, and finally submits the form the controller method receives and empty/null model! Why is the controller receiving a null model?
I think I found the answer. Only the first POST inside a FORM wins with all the information available, following POSTS dont have all of them anymore.
The browser receives the page, and inside the page is the form tag. Inside this form-body an element is clicked/changed - the dropdown - and using javascript generates a POST-request to the server. Once this POST is done - the small reply is used to update other dropdowns inside the form-body - all further "data" in the browsers "memory" seem to be lost. When the user clicks the last submit button and generates a POST to the server, the browser sends .. nothing. Therefore the model being passed to the controller is null.
So: How can I update dynamically controls using javascript/ajax/jquery with bits of information from the controller while being inside an ASP MVC.NET 5 form, without using a POST request which seems to break the form processing?
Or: How can I send my model data on the final submit button to the controller, using javascript/ajax/jquery, and receive a new View as reply?
The problem was I named a property of the model 'Model' and that broke the processing. Once I renamed it the page final submit started to work. Sometimes things are as simple as that, yet with unseen consequences - at first.

HTML5 executing query without postback

I am using html5, javascript and JSP for my project. I want to know if there is some method that i can used to execute a query from my servlet without actually posting back the page. i know it can be done in ASP.net but i do n't how it can be be done in java script and JSP. Actually i have a dynamic webpage displaying data from server.what i want is that in a click event of button i want to execute a query form server and update it on the page. i know i can submit the form but it will submit the page which i want to avoid.Any suggestion......
regards
nquazi
You can use an AJAX request to submit inputs and get back an output without reloading that page. Here is a previous stackoverflow answer that shows you how to do a HTTP GET request.
HTTP GET request in JavaScript?
You will then need to process your inputs, run the query, and send back an output on the backend server.

How to get POST contents before form submits using javascript

So, I know that when I submit a form whose method is POST that the server receives the contents of that form and then processes them accordingly, and then returns a page with the desired content. What I am trying to learn is what exact query url is being passed to the server side script when I submit a form on a website that does not belong to me. The reason I want this query string is so that I can make use of the server side script programatically with my own data. There is no public API served by this website, but I would like to formulate my own.
So my question is, is there a way to intercept the POST as a query string URL? Perhaps by using a javascript console in browser?
I know I can look at the source code for the page and find the names/values of the form fields. However, there also happens to be a hidden field on this page whose properties are set by javascript during validation at submission time. How should I go about this?
You can use an extension for intercept the data : Tamper Data on FireFox
https://addons.mozilla.org/fr/firefox/addon/tamper-data/
You can intercept and modify all headers requests

AJAX Form Submit v/s Standard Form Submit

I am trying to implement GSA(Google Search Appliance) in my app. I want to use the REST(JSON) call that the GSA provides. The point for this question is that, the GSA needs a POST request in order to return the JSON response.
Now when I made a new dummy HTML page with a form and make a POST request with parameters I get a successful response(JSON)
But, when I try using the $.post(...) method to send a POST request to the URL I am not getting the actual response, but some error page.
I just wanted to know is there a difference between a standard submit and an ajax form submit. If yes, is there any workaround for this situation.
Please Help. Thanks in Advance.
If you want to submit the form through ajax but in the conventional way, You should have a look at jquery form plugin . Just make your submit button to type button and on click submit your form thorugh .ajaxSubmit(). I think this will solve your problem.
GSA search protocol is based on HTTP GET. All search parameters need to be passed in via query string. Also, out of box, GSA only returns either HTML or XML results. You could apply an xslt that transforms xml to JSON -- but I'm yet to find one that works really well (i.e., I've found a couple but they don't return valid JSON in all instances).

Can Django/Javascript handle conditional "Ajax" responses to HTTP POST requests?

How do I design a Django/Javascript application to provide for conditional Ajax responses to conventional HTTP requests?
On the server, I have a custom-built Form object. When the browser POSTS the form's data, the server checks the submitted data against existing data and rules (eg, if the form adds some entity to a database, does that entity already exist in the database?). If the data passes, the server saves, generates an ID number and adds it to the form's data, and passes the form and data back to the browser.
if request.method == 'POST':
formClass = form_code.getCustomForm()
thisForm = formClass(data=request.POST)
if thisForm.isvalid():
saveCheck = thisForm.saveData()
t = loader.get_template("CustomerForm.html")
c = Context({ 'expectedFormObj': thisForm })
(Note that my custom logic checking is in saveData() and is separate from the html validation done by isvalid().)
So far, standard Django (I hope). But if the data doesn't pass, I want to send a message to the browser. I suppose saveData() could put the message in an attribute of the form, and the template could check for that attribute, embed its data as javascript variable and include a javascript function to display the message. But passing all that form html back, just to add one message, seems inelegant (as does the standard Django form submission process, but never mind). In that case I'd like to just pass back the message.
Now I suppose I could tie a Javascript function to the html form's onsubmit event, and have that issue an XMLHttpRequest, and have the server respond to that based on the output of the saveData() call. But then the browser has two requests to the server outstanding (POST and XHR). Maybe a successful saveData() would rewrite the whole page and erase any potential for conflict. But I'd also have to get the server to sequence its response to the XHR to follow the response to the POST, and figure out how to communicate the saveData outcome to the response to the XHR. I suppose that is doable, even without the thread programming I don't know, but it seems messy.
I speculate that I might use javascript to make the browser's response conditional to something in the response to the POST request (either rewrite the whole page, or just display a message). But I suspect that the page's javascript hands control over the browser with the POST request, and that any response to the POST would just rewrite the page.
So can I design a process to pass back the whole form only if the server-side saveData() works, and a message that is displayed without rewriting the entire form if saveData() doesn't? If so, how?
Although you can arrange for your views to examine the request data to decide if the response should be an AJAXish or plain HTML, I don't really recommend it. Put AJAX request handlers in a separate URL structure, for instance all your regular html views have urls like /foo/bar and a corresponding api call for the same info would be /ajax/foo/bar.
Since most views will examine the request data, then do some processing, then create a python dictionary and pass that to the template engine, you can factor out the common parts to make this a little easier. the first few steps could be a generic sort of function that just returns the python dictionary, and then actual responses are composed by wrapping the handler functions in a template renderer or json encoder.
My usual workflow is to initially assume that the client has no javascript, (which is still a valid assumption; many mobile browsers have no JS) and implement the app as static GET and POST handlers. From there I start looking for the places where my app can benefit from a little client side scripting. For instance I'll usually redesign the forms to submit via AJAX type calls without reloading a page. These will not send their requests to the same URL/django view as the plain html form version would, since the response needs to be a simple success message in plain text or html fragment.
Similarly, getting data from the server is also redesigned to respond with a concise JSoN document to be processed into the page on the client. This also would be a separate URL/django view as the corresponding plain html for that resource.
When dealing with AJAX, I use this:
from django.utils import simplejson
...
status = simplejson.dumps({'status': "success"})
return HttpResponse(status, mimetype="application/json")
Then, AJAX (jQuery) can do what it wants based on the return value of 'status'.
I'm not sure exactly what you want with regards to forms. If you want an easier, and better form experience, I suggest checking out uni-form. Pinax has a good implementation of this in their voting app.
FYI, this isn't an answer...but it might help you think about it a different way
Here's the problem I'm running into...Google App Engine + jQuery Ajax = 405 Method Not Allowed.
So basically I get the thing to work using the outlined code, then I can't make the AJAX request :(.

Categories