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.
Related
This may come off as a bit newb-ish, but I don't really know how to approach this.
Can anyone recommend me a way of delivering and image from a flask backend, after being called by an angular $http.get call?
Brief example of what I am trying to do.
//javascript code
myApp.controller('MyCtrl', function($scope, $http){
$http.get('/get_image/').success(function(data){
$scope.image = data;
});
});
#flask back end
#app.route('/get_image/', methods= ['GET', 'POST'])
def serve_image():
image_binary = get_image_binary() #returns a .png in raw bytes
return image_binary
<!-- html -->
<html ng-app= "myApp">
<div ng-controller= "MyCtrl">
{{ image }}
</div>
</html>
So as you can see, I am attempting to serve a raw-byte .png image from the flask backend, to the frontend.
I've tried something like this
<html>
<img src= "/get_image/">
</html>
But the trouble is, 'get_image_binary' takes a while to run, and the page loads before the image is ready to be served. I want the image to load asyncronously to the page, only when it is ready.
Again, I am sure there are many ways to do this, probably something built into angular itself, but it is sort of difficult to phrase this into a google-able search.
Can't speak to the flask stuff, but below is some AngularJS code.
This directive won't replace the source attribute until after Angular manipulates the DOM and the browser renders (AngularJS : $evalAsync vs $timeout).
HTML:
<div ng-controller="MyController">
<img lazy-load ll-src="http://i.imgur.com/WwPPm0p.jpg" />
</div>
JS:
angular.module('myApp', [])
.controller('MyController', function($scope) {})
.directive('lazyLoad', function($timeout) {
return {
restrict:'A',
scope: {},
link: function(scope, elem, attrs) {
$timeout(function(){ elem.attr('src', attrs.llSrc) });
},
}
});
Same code in a working JSFiddle
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!
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'd like to use bootstrap's carousel to dynamically scroll through content (for example, search results). So, I don't know how many pages of content there will be, and I don't want to fetch a subsequent page unless the user clicks on the next button.
I looked at this question: Carousel with dynamic content, but I don't think the answer applies because it appears to suggest loading all content (images in that case) from a DB server side and returns everything as static content.
My best guess is to intercept the click event on the button press, make the ajax call for the next page of search results, dynamically update the page when the ajax call returns, then generate a slide event for the carousel. But none of this is really discussed or documented on the bootstrap pages. Any ideas welcome.
If you (or anyone else) is still looking for a solution on this, I will share the solution I discovered for loading content via AJAX into the Bootstrap Carousel..
The solution turned out to be a little tricky since there is no way to easily determine the current slide of the carousel. With some data attributes I was able to handle the .slid event (as you suggested) and then load content from another url using jQuery $.load()..
$('#myCarousel').carousel({
interval:false // remove interval for manual sliding
});
// when the carousel slides, load the ajax content
$('#myCarousel').on('slid', function (e) {
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
var url = $('.item.active').data('url');
// ajax load from data-url
$('.item').html("wait...");
$('.item').load(url,function(result){
$('#myCarousel').carousel(idx);
});
});
// load first slide
$('[data-slide-number=0]').load($('[data-slide-number=0]').data('url'),function(result){
$('#myCarousel').carousel(0);
});
Demo on Bootply
I combined #Zim's answer with Bootstrap 4. I hope it will help someone.
First, load just the path of the images:
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item" data-url="/image/1.png"></div>
<div class="carousel-item" data-url="/image/2.png"></div>
<div class="carousel-item" data-url="/image/3.png"></div>
</div>
</div>
Then in JavaScript:
$('document').ready(function () {
const loadCarouselImage = function ($el) {
let url = $el.data('url');
$el.html(function () {
let $img = $('<img />', {
'src': url
});
$img.addClass('d-block w-100');
return $img;
});
);
const init = function () {
let $firstCarousel = $('#carousel .carousel-item:first');
loadCarouselImage($firstCarousel);
$firstCarousel.addClass('active');
$('#productsCarousel').carousel({
interval: 5000
});
};
$('#carousel').on('slid.bs.carousel', function () {
loadCarouselImage($('#carousel .carousel-item.active'));
});
init();
});
I have this html page with the form
<form method="post" id="form1" name="form1" action="/status_comment/save">
//Some text inputs
<input type="text" name="new_comment" id="new_comment" onkeydown="post_comment(event,'13')" >
</form>
And this is my javascript function to do the POST call
function post_comment(event,item_id)
{
var keyCode = ('which' in event) ? event.which : event.keyCode;
if(parseInt(keyCode)==13 && event.shiftKey!=1)
{
var str = $('#form1').serialize(); // Gets all the filled details
$.post('/status_comment/save',
str,
function(data){
alert(data);
});
}}
Backend is done using Django and this is the return statement
data=simplejson.dumps(data)
return HttpResponse(data, mimetype='application/json')
The referral url is say "/xyz".
The thing is, after the form gets submitted, it is being automatically redirect to the "/status_comment/save" page instead of remaining on the same page.
I tried the get method and it works fine but not the POST method.
I tried debugging it, so changed the url in post call to the referral url, then it refreshs the page instead of doing nothing.
Also the alert() command inside the function above doesnt work, so its probably not being entered into.
Interesting thing I have noticed, when looking at the web developer console, the Initiator for the POST call in this page is being displayed as "Other" while the initiator for GET call and POST call (in other pages, where its working) is "jquery-1.8.0.min.js:2"
Any thoughts? Thanks...
First you really shouldn't try to capture the enter if you can avoid it. Use the submit binding. It makes everything more obvious and easier for your fellow developers (I bet I am not the only one who thought "What the heck is KeyCode 13?").
I'm wondering if perhaps being more explicit might help. Have you tried calling preventDefault and stopImmediatePropagation?
$('#form1').submit(function(evt) {
evt.preventDefault();
evt.stopImmediatePropagation();
// serialize and be AJAXy yada yada yada
If that doesn't work, or for some reason you prefer to handle capturing enter on your own, then you might want to have the above code in addition to your keydown handler. So it would be:
<input type="text" name="new_comment" id="new_comment" onkeydown="post_comment(event,'13')" >
...
$('#form1').submit(function(event) {
event.preventDefault();
event.stopImmediatePropagation();
}
function post_comment(event,item_id)
{
event.preventDefault();
event.stopImmediatePropagation();
var keyCode = ('which' in event) ? event.which : event.keyCode;
if(parseInt(keyCode)==13 && event.shiftKey!=1)
{
var str = $('#form1').serialize(); // Gets all the filled details
$.post('/status_comment/save',
str,
function(data){
alert(data);
});
}
}
Start by getting rid of the onkeydown attribute from the input:
<form method="post" id="form1" name="form1" action="/status_comment/save">
//Some text inputs
<input type="text" name="new_comment" id="new_comment" />
</form>
And then simply subscribe to the .submit() event of this form using jquery and perform the AJAX request in there. Don't forget to return false from it to ensure that the default action is canceled and the browser stays on the same page:
$('#form1').submit(function() {
var str = $(this).serialize(); // Gets all the filled details
$.post(this.action, str, function(data) {
alert(data);
});
return false; // <!-- that's the important part
});