Im trying to do what is suggested here: How to reopen a Django form in a jQuery dialog when the form validation fails in the backend?
But I don't have enough points to add a comment there..
In my base html page i have a link which opens a dialog with a Django-form. I use the jquery load() to fill the Dialog with this child-html-template. In this child template i have a submit button. I'm trying to bind this button to an ajax function that will:
Post the form to the right URL
Fetch the response from Django view (the form as HTML to be able to show valdidation errors)
Replace the content in the dialog box with the data i get back from the submit-POST.
Is this possbible? Been working on this for days now and i just cant make it happen. Can somone post an example with code to end my suffering.. It's the ajax that is my biggest problem.
Where should i put the script? In the base or the child template? Do you have any alternative solutions?
Thank you!
I did this not long ago in. I found it easier to send the errors in json, and then handle them client-side and attach them to the relevent fields. Like so:
Use ajax to load the form from a view into the jQuery dialog box
When the user sends the data send the information to same view
If validation fails, send errors as a json array. Use js on client-side to attach them to the relevant fields
If succeeds send a positive response of some kind
Check out this excellent example for reference
edit
Here's a working example. Not sure I'm using the best methods to do this, but I think it's pretty understandable. Also, I'm not accounting for the possibility of non-ajax form submit (it's easy enough to do, some logical conditioning using form.is_ajax() and see example linked above for further reference).
So first the views (ContactForm is the same as the one linked):
import json
from django.http import HttpResponse
from django.shortcuts import render_to_response
def home(request):
return render_to_response('index.html') #nothing special here
from django.views.decorators.csrf import csrf_exempt
from cStringIO import StringIO
#csrf_exempt #you should use csrf, I'm just skipping this for the example
def contact(request):
if request.method == 'POST':
form = ContactForm(request.POST)
response = {}
if form.is_valid():
response["status"] = "OK"
# save the data, or do whatever.
else:
response["status"] = "bad"
response.update(form.errors)
# now just to serialize and respond
s = StringIO()
json.dump(response, s)
s.seek(0)
return HttpResponse(s.read())
else:
form = ContactForm() # An unbound form
return render_to_response('contact.html', {
'form': form,
})
As you can see, if there's nothing here you get an html with the form, if not, you get a json response with an object called response which contains 'status' and might also contain errors. I'm using StringIO with json.dump(data, file) as it has always proved the least buggy and most fluent way I ever used to serialize to json (seriously. You won't believe how easily it can break).
Now let's go over the client side:
base.html:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
contact.html:
{% extends 'base.html' %}
{% block content %}
<form method="post" id='myform'>
{{ form.as_p }}
</form>
{% endblock %}
and finally, the main.html with the relevant js. This is where the magic happens:
{% extends 'base.html' %}
{% block content %}
<button class='btn'>Contact!</button>
<div id="dialog-modal">
</div>
<script>
$(function() {
$('button').on('click', function() {
// first things firts, fetch the form into the dialog
$('#dialog-modal').load('contact/ #myform');
// initiate dialog
$('#dialog-modal').dialog({
height: 450,
modal: true,
// I'm using the built-in buttons, but you can use your own
buttons: {
Send: function() {
var dialog = $(this),
form = $('#myform'),
data = form.serialize();
$('.off').remove(); // this is to avoid duplicates
// run ajax post call
$.ajax({
url: 'contact/',
data: data,
type: 'post',
// if successful print response
success: function(response) {
res = $.parseJSON(response);
// if form was successful:
if (res['status'] == 'OK') {
// form was successful
alert('Thank you! Form has been submitted'); // say thank you
dialog.dialog('close'); // close dialog
}
// if not...
else if (res['status'] == 'bad') {
delete res['status'] // we don't need this anymore...
var errors = res; // just for simplicity
$.each(errors, function(key, value) {
// i.e. key='subject' and value is the error message itself
var err = $('<span></span>', {
'class': 'off',
'text': value
}),
br = $('<br></br>', {
'class': 'off',
}),
input = $('#id_'+key).parent(); //find the parent div for the relevant input by key
// add a small break
br.appendTo(input);
// add the error
err.appendTo(input);
// add some styling
err.css('color', 'red').css('font-size', '10px');
});
}
}
});
}
}
});
});
});
</script>
{% endblock %}
Hope that's not too much. Here's an image how it looks after attempting to send:
Pick it up from here. There's a lot of room to play around and extend this.
Good luck!
Related
Sorry if the title is a little confusing. A kind user here on StackOverflow helped me make my Flask app display some scraped data, only now I have added a parameter in the function so that I can scrape the data I want to search for. I have an input box, and I want to be able to get the data from it, and pass it as a string in my python function in Flask
Current HTML Side
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>NBA Data Web App</title>
</head>
<body>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin = "anonymous"></script>
<form id = "nameForm" method = "POST" role = "form">
<input name = "text">
<button id = "searchBtn"> Search </button>
</form>
<div id = "container"></div>
<script type = "text/javascript">
//Function to take place when our search button is clicked
$('button#searchBtn').click(function() {
$.ajax({
url: '/_get_data',
data: $('form').serialize(),
type: 'POST',
success: function(response) {
console.log = response;
},
error: function() {
alert('Failure in first Ajax call');
}
});
/*Everything below this was working before, as I only made one ajax call when a button was pressed. Now, when I press the button, I want to pass its contents as a string to my scrape_data() function in Flask, and return, and display, its contents as shown below. */
//Declare our list so we can print something, and loop through it later
var data_list;
//Variable for our HTML table
var rowMax = 29, html = "<table><tr>";
//Post request
$.post('/_get_data', {
//If done, do this
}).done(function(response) {
/* Assign our scraped data to our variable that was declared earlier,
which is turned into an array here in JS */
data_list = response['data'];
//Declare some variables for making our table
var perRow = 1, count = 0, table = document.createElement("table"),
row = table.insertRow();
//Loop through the data and add it to the cells
for (var i of data_list) {
//Insert a cell for each piece of data
var cell = row.insertCell();
//Add the data to the cell
cell.innerHTML = i;
//Increment our count variable
count++;
//If we have met our set number of items in the row
if (count % perRow == 0) {
//Start a new row
row = table.insertRow();
}
}
//Add the table to our container in our HTML
document.getElementById("container").appendChild(table);
//If request fails
}).fail(function() {
alert("request failed");
});
});
</script>
</body>
</html>
Python (Flask) Side
rom flask import Flask, render_template, jsonify, request, escape, url_for
#Get our lists to post
headers = data_headers()
#Start the flask app
app = Flask(__name__)
#Start page
#app.route('/')
def index():
return render_template('index.html')
#What happens when our button is clicked
#app.route('/_get_data', methods = ['POST'])
def _get_data():
text = request.form['text']
#Here, I am trying to assign the contents of the input box of the form to a variable, so I can pass that variable as a parameter for my function.
data = scrape_data(text)
#Return the json format of the data we scraped
return jsonify({'data' : data})
#Run the app
if __name__ == "__main__":
app.run(debug = True)
I am currently getting error 405 method not allowed. I'm not sure if my syntax in the first Ajax call is incorrect, or if I need to break this up into two different #app.route(urls) since each call is going a different way.
If you use the method attribute of form element and do not specify the action, request will be sent /. What is happening here is when you click on search button it will send two post requests one to '/' and '/_get_data' from ajax. In Flask routing if you do not explicitly provides methods=[] that route will allow GET only. Remove the method attribute from you form, you should not get method not allowed error.
I'm fairly new to django, and I'm trying to figure out how to create a form using the taggit-selectize widget (or django-taggit). Everything I've found online refers to its use the admin page, but I want the tags to be user-facing and editable - much like the tags I create below this post. So far, I've determined that I need to create a form using a widget:
# models.py
from taggit_selectize.managers import TaggableManager
tags = TaggableManager()
# forms.py
from taggit_selectize.widgets import TagSelectize
from .models import MyModel
class TagForm(forms.ModelForm):
class Meta:
model = MyModel
fields = ('tags',)
widgets = {'tags': TagSelectize(),}
but I can't figure out how to include this form in my template so that it appears beside my MyModel objects. Ideally, I guess I'd was expecting it to behave like django-fluent-comments, where I can just call {% render_comment_form for obj %} and call it a day.
Update
I've edited views (see below) and can now access the form in the template, but I can't seem to submit my tags (ideally this wouldn't trigger a redirect, either).
# views.py
from .forms import TagForm
def show_tags(request):
return render(request, 'tags.html', {'tagform' : TagForm})
# tags.html
<div>
{{ tagform.media }}
{{ tagform.as_p }}
</div>
So, I finally figured this out. It involves wrapping the tagform in <form> tags and catching the POST request. For the record, this is part of a project that involves using Haystack to return a list of results that I then want to tag. My views.py subclasses a SearchView rather than defining a function as I do here (show_tags()), and rather than one object per page I have multiple.
For an object obj on the page, you have the following
# views.py
from .forms import TagForm
from .models import MyModel
from django.views.decorators.http import require_POST
from django.views.decorators.csrf import csrf_exempt
def show_tags(request):
# Perhaps the request specifies the object, but
# for simplicity's sake we just pick a specific model instance
object = MyModel.objects.filter(pk = 123)
return render(request, 'tags.html', {'tagform' : TagForm,
'obj' : MyModel})
#require_POST
#csrf_exempt
def create_tag(request):
# See javascript below for creation of POST request
data = request.POST
tag_text_raw = data.get('tag_data')
# clean_tag() not shown, but it splits the serialized
# tag_text_raw and returns a list of strings
tag_text_clean = clean_tag(tag_text_raw)
obj_pk = data.get('obj_pk')
#save tags to document
doc = DocInfo.objects.get(pk = obj_pk)
doc.tags.add(*tag_text_clean)
# not strictly necessary; mainly for logging
response_data = {'tag_text': tag_text_clean,
'obj_pk': obj_pk
}
return JsonResponse(response_data)
So show_tags sends the information to the template with render, then the template has access to those objects. This is what didn't make sense to me initially.
# tags.html (extends base.html)
{% block scripts %}{{ block.super }}
<script type="text/javascript" src="{{ STATIC_URL }}js/ajaxtag.js"></script>
{{ tagform.media }}
{% endblock %}
{{ obj.text }}
<form method="post" action="create_tag/" id="tag-form-{{ obj.pk }}" name="tag-form-obj" data-object-id={{ obj.pk }}>
{{ tagform.as_p }}
<input type="submit" name ="tag-form-input" value="Add Tags" />
</form>
We can catch the POST request with javascript:
#ajaxtag.js
(function($)
{
// A stripped-down version of ajaxcomments.js from fluent_comments
// See that file for further expansions
$.fn.ready(function () {
var tagform = $('form[name="tag-form-obj"]');
if (tagform.length > 0) {
// Detect last active input.
// Submit if return is hit
tagform.find(':input').focus(setActiveInput).mousedown(setActiveInput);
tagform.submit(onTagFormSubmit);
}
});
function onTagFormSubmit(event)
{
event.preventDefault(); // prevents redirect
var form = event.target;
create_tag(form);
return false;
}
function create_tag(form)
{
console.log("create_tag is working!") // sanity check
var $form = $(form);
var tag_text = $form.serialize();
var url = $form.attr('action');
var obj_id = $form.attr('data-object-id')
$.ajax({
url : url,
type: "POST",
data: { tag_data: tag_text, obj_pk: obj_id},
success: function (data) {
data;
console.log(data);
console.log('success');
},
error: function (xhr, errmsg, err) {
// Return error to console
console.log(xhr.status + ": " + xhr.responseText)
}
});
}
function setActiveInput() {
active_input = this.name;
}
})(window.jQuery);
Finally, urls.py sends the request back to create_tag()
# urls.py
from .views import create_tag
...
url(r'^create_tag', create_tag, name = 'tag-form')
...
Hi I'm new in Ajax and django and I want to refresh my form. I try some code but it didn't work. I'm sure what I want to do is very basic.
Here my html:
<div class="row" style="padding-top:20px;">
<div class="col-md-12" id="testAjax">
{% load crispy_forms_tags %}
{% crispy form %}
</div>
</div>
I want to refresh my form in the div testAjax.
Here my view:
def createPin(request):
error = False
if request.method == "POST":
form = CreatePinForm(request.POST)
if form.is_valid():
pin = form.save(commit=False)
pin.customer = request.user.customer
pin.save()
msg = "pin saved"
return redirect('/pin/CreatePin', {'form': form, 'msg': msg})
else:
error = True
else:
form = CreatePinForm()
return render(request, 'createPin.html', {'form': form, 'error': error,})
My Ajax:
function refresh()
{
$form=$('#createPin');
var datastring = $form.serialize();
$.ajax({
type: "POST",
url: '/pin/CreatePin/',
dataType: 'html',
data: datastring,
success: function(result)
{
/* The div contains now the updated form */
$('#testAjax').html(result);
}
});
}
Thanks alot for your help.
When I need to do some operations and I don't want to reload the page I use a JQuery call to Ajax, I make the pertinent operations in AJAX and then receive the AJAX response in the JQuery function without leaving or reloading the page. I'll make an easy example here for you to understand the basics of this:
JQuery function, placed in the template you need
function form_post(){
//You have to get in this code the values you need to work with, for example:
var datastring = $form.serialize();
$.ajax({ //Call ajax function sending the option loaded
url: "/ajax_url/", //This is the url of the ajax view where you make the search
type: 'POST',
data: datastring,
success: function(response) {
result = JSON.parse(response); // Get the results sended from ajax to here
if (result.error) { // If the function fails
// Error
alert(result.error_text);
} else { // Success
//Here do whatever you need with the result;
}
}
}
});
}
You have to realize that I cannot finish the code without knowing what kind of results you're getting or how do you want to display them, so you need to retouch this code on your needs.
AJAX function called by JQuery
Remember you need to add an url for this Ajax function in your urls.py something like:
url(r'^/ajax_url/?$', 'your_project.ajax.ajax_view', name='ajax_view'),
Then your AJAX function, it's like a normal Django View, but add this function into ajax.py from django.core.context_processors import csrf from django.views.decorators.csrf import csrf_exempt from django.utils import simplejson
#csrf_exempt
def ajax_view(request):
response = []
#Here you have to enter code here
#to receive the data (datastring) you send here by POST
#Do the operations you need with the form information
#Add the data you need to send back to a list/dictionary like response
#And return it to the JQuery function `enter code here`(simplejson.dumps is to convert to JSON)
return HttpResponse(simplejson.dumps(response))
So, without leaving the page you receive via javascript a list of items that you sended from ajax view.
So you can update the form, or any tag you need using JQuery
I know that this can be so confusing at the beginning but once you are used to AJAX this kind of operations without leaving or reloading the page are easy to do.
The basics for understanding is something like:
JQuery function called on click or any event you need
JQuery get some values on the template and send them to AJAX via
POST
Receive that information in AJAX via POST
Do whatever you need in AJAX like a normal DJango view
Convert your result to JSON and send back to the JQuery function
JQuery function receive the results from AJAX and you can do
whatever you need
I have a Django app, with a page in Admin where I can upload a zip file of product data, which then goes to get processed. I have the list status_message set up in Python so that it is constantly updated with information about how the processing is going.
While on Firefox, making this on my dev environment, this worked pretty well. When I tested it on Chrome the report was no longer displayed at all. More importantly, but perhaps related, is that when I push to my staging server and test it, as soon as the upload happens and the file begins to be processed, I get redirected to a 404 error page, and I don't know why. The biggest difference I can think of is SSL on the staging server, but not my dev environment. Finally, probably due to my inexperience with AJAX + Django, there is a final page refresh after the status message is loaded. That's annoying, but doing no real harm (unless it's also causing one of the other problems). My head's spinning. What's going on? Is one line the problem, my view, or the whole thing?
Problem 1. The report in the div #status-message updates as it comes in Firefox, but not Chrome.
EDIT 1: Turns out this partially comes from Chrome 28 caching things. See Jquery ajax random error in Chrome only. Now with this, Chrome displays the message after all processing, but still not as the status-message changes until then:
function retrieve_status()
{
$.ajax({
url: "print_status",
success: function(data){
$('#status-message').html("");
for (var i=0; i<data['message'].length; i++)
$('#status-message').append(data['message'][i] + "<br>");
$('#status-message').scrollTop($('#status-message')[0].scrollHeight);
},
cache: false
});
}
Problem 2. 404 error after zip upload only on staging server.
Edit 2: In the browser console from the staging server, I get the warning "The page at https://myapp.com/admin/product-load/ displayed insecure content from http://myapp.com/admin/product-load/print_status/?_=1380231818430." I haven't figured out how to fix this yet. The whole site is supposed to use SSL, and if you copy in that second path, it even forwards to the https version. The url: in the AJAX doesn't seem to matter. I even completely hardcoded the url with an https prefix and it said the same thing: url: https://myapp.com/admin/product-load/print_status",
Problem 3. Annoying page refresh after processing is complete.
Here's my code. I didn't trim much off because I'm not sure what is or isn't relevant.
views.py:
from django.http import HttpResponse
from django.shortcuts import render
from django.contrib.admin.views.decorators import staff_member_required
from myappload.forms import ProductLoadForm
from myappload.load import ProductLoader
import json
status_message = []
#staff_member_required
def index(request):
global status_message
status_message = []
if request.method == 'POST':
form = ProductLoadForm( request.POST, request.FILES)
if form.is_valid():
product_data = request.FILES.get('file')
loader = ProductLoader( zip_filename=product_data, index=False, status=record_status)
load_report = loader.load()
return render ( request, 'myappload/index.html', { 'form': form})
else:
form = ProductLoadForm()
return render ( request, 'myappload/index.html', { 'form': form})
def record_status(status):
global status_message
status_message.append(status)
print status
def print_status(request):
return HttpResponse(json.dumps({ 'message': status_message }), content_type="application/json")
urls.py
from django.conf.urls.defaults import patterns, url
# URLs
urlpatterns = patterns('myappload.views',
url(r'^$', 'index', name='product_load_page'),
url(r'^print_status/$', 'print_status', name='product_upload_status'),
)
forms.py
from django import forms
class ProductLoadForm(forms.Form):
file = forms.FileField()
index.html:
{% extends "admin/base_site.html" %}
{% block content %}
<form name="product_load_form" class="form form-horizontal"
enctype="multipart/form-data" method="post">
{% csrf_token %}
{% include 'forms/basic.html' %}
<input id="upload-button" type="submit" value="Upload"/>
</form>
<div id="status-message">
The status message will show up here <br>
</div>
<script>
function retrieve_status()
{
$.get("print_status", function( data ) {
$('#status-message').html("");
for (var i=0; i<data['message'].length; i++)
$('#status-message').append(data['message'][i] + "<br>");
$('#status-message').scrollTop($('#status-message')[0].scrollHeight);
});
}
$(document).ready(function() {
retrieve_status(); //the page will refresh when done, calling this on load
$('#upload-button').click(function() {
setInterval(function(){retrieve_status()},500);
});
$('#status-message').css('height', $(window).height() - 170);
});
</script>
{% endblock %}
I am constructing an application that need a lengthy calculation. After a user submitted the information, it need about 30 minutes to calculate and then return the result. So I am considering to add a “please wait" page.
I followed instructions mentioned in the following link,
http://groups.google.com/group/django-users/browse_thread/thread/c1b0d916bbf86868
However, when I submit something, it stays in http://127.0.0.1:8000/please_wait
and will not redirect to the result page like http://127.0.0.1:8000/display_DHM
does anybody know what is going on?
Here are all related files, I tried various ways, but when I
submit a form, it only return the please_wait page and then stay there
forever. There is no redirect happened.
Since I want to check if it works first, there is no actual
calculation in the code.
url.py
urlpatterns = patterns('',
(r'^test$',views.test_form),
(r'^please_wait', views.please_wait),
url(r'^run_DHM$', views.run_DHM, name="run_DHM") ,
url(r'^displayDHM', views.display_DHM, name="displayDHM")
)
view.py
def test_form(request):
return render_to_response('test.html')
def please_wait(request):
return render_to_response('please_wait.html')
def run_DHM(request):
### lengthy calculations... ...
return HttpResponse("OK")
def display_DHM(request):
return render_to_response('display_DHM.html')
test.html
{% extends "baseFrame.html" %}
{% block maincontent %}
<form method="POST" action="please_wait">
<p>Test:</p>
<div id="address"></div>
<p>Type your value in here:</p>
<p><textarea name="order" rows="6" cols="50" id="order"></
textarea></p>
<p><input type="submit" value="submit" id="submit" /></p>
</form>
{% endblock %}
please_wait.html
<html>Please wait
<script type="text/javascript" src="http://code.jquery.com/
jquery-1.7.1.min.js">
$.getJSON('{% url run_DHM %}', function(data) {
if (data == 'OK') {
window.location.href = '{% url displayDHM %}';
} else {
alert(data);
}
});
</script>
</html>
display_DHM.html
<HTML>
<BODY>END FINALLY!</BODY>
</HTML>
I write here because I can't use the comment space. My question is a bit similar to yours and maybe the answer can help you.
Briefly:
the question:
I have an external python program, named c.py, which "counts" up to 20 seconds. I call it from my Django app views.py and in the html page I have a button to start it. It's ok (= in Eclipse I can see that c.py prints 0,1,2,3,...20 when I press the button on the webpage) but I would like that the button changes from "GO" to "WAIT" during c.py process (or I would like to perform a waiting page during the counting or also a pop-up).
the answer:
You would need to be able to report back the status of c to the client
via ajax long polling or WebSockets, or, if you don't care about the
incremental status of c and just want to change the text of the link,
you'll need to use JavaScript to set the value when the click event of
the link fires:
views.py
from django.core.urlresolvers import reverse
from django.http import JsonResponse
def conta(request):
c.prova(0)
redirect = reverse('name_of_home_user_view')
return JsonResponse({'redirect': redirect})
and js:
// assuming jQuery for brevity...
$(document).ready(function() {
// avoid hard-coding urls...
var yourApp = {
contaUrl: "{% url 'conta' %}"
};
$('#btnGo').click(function(e) {
e.preventDefault(); // prevent the link from navigating
// set css classes and text of button
$(this)
.removeClass('btn-primary')
.addClass('btn-danger')
.text('WAIT');
$.get(yourApp.contaUrl, function(json) {
window.top = json.redirect;
});
});
});
If you need lengthy calculations I think you could be interested in celery. Nice waiting pages (progress indicators?) would be a byproduct.