I am planning on creating a single page with toolbar on the top.
I want to click on different buttons on the toolbar and get the form without a page refresh.
Is there a way I can do it with Django templates using if conditions (such as below)? And is the page refresh necessary?
{% if new_button_pressed %}
{% else %}
views.py
if request.POST.get('new'):
logger.info('user clicked new')
elif request.POST.get('last'):
logger.info('user clicked due next')
elif request.POST.get('previous'):
logger.info('user clicked due next')
Is it doable or not?
Django is a (server) backend framework. Which means that it generates the code for the the client to process. You cannot edit the contents without it reloading the page. So.. what you have in your view is not going to work just like that.
What you will need is Javascript. AJAX (if you want to do a request to the server without reloading) or jQuery if you have already rendered everything and just want to show it.
You might want to use a Javascript framework like VueJS, ReactJS or AngularJS.
An example is right here: https://realpython.com/blog/python/django-and-ajax-form-submissions/
Related
I'm working on setting up a gateway form on a Sitecore 7.2 site using the Web Forms for Marketers module that installed and the fancybox plugin that the site has (the site is using fancybox version 1.3.4, and I cannot update this version or it may break other features on the site that are using this plugin).
This is how the form is supposed to work: The user clicks a link on a page and this opens a popup window with a form they must fill out before they can access a download.
So far, I have gotten things working so that, when a link is clicked on a page, the fancybox modal opens and displays the WFFM form.
Here is the jQuery that does this:
jQuery.noConflict();
(function($) {
$(document).ready(function() {
// Open the gateway form into a fancybox modal
//check to see if there is a gateway form link on the page
if ($(".protected-item").length > 0) {
//if so, then we want to target the click event
$('.protected-item').click(function(event) {
event.preventDefault();
//Get the value of the href of the link since this url will contain the page with the gateway form
var url = $('.protected-item').attr('href');
//open the page with the gateway form in the fancybox modal
$.fancybox({
'autoDimensions': true,
'height': 400,
'width': 400,
'scrolling': 'no',
'href': url,
'autoScale': true,
});
});
}
});
})(jQuery);
What I have done is created a generic page in Sitecore (I called in Gateway Form Test Page) and inserted the test gateway form onto it. Then, on the page I want to feature the gateway form on, I have linked some text ("click here") to that Gateway Form Test Page.
The problem is that, upon hitting the submit button for the WFFM form, the page sends me to the url where the form is located (i.e. domainname/OtherPages/GatewayFormTestPage.aspx) instead of just reloading the fancybox window and displaying the success message or an error message if not all fields are filled in.
I tried setting the type to 'iframe' for the fancybox modal, but all that did was render an empty popup (no content displayed in the fancybox-content block, either--I inspected the element in Chrome's dev tools).
Is there a way that I can wrap the WFFM form in an iframe so I can avoid going to another page when clicking "submit?" I want the user to stay within the popup modal at all times.
Thanks, and I know this is probably a convoluted process, and I wish I could choose a better solution but this is what I must work with.
I think that using iframe is not right approach for your task. It is better to use AJAX requests instead of iframe.
You should check "Is Ajax Mvc Form" on form item to reload only form without page postback. It will allow you get form update without full reloading page.
If you are using WebForms(not MVC) then you can wrap WFFM form into update panel.(not very good for performance and transparency)
And tip about usage WFFM: you should use it only in cases when fields/actions will be managed by marketers. You don't need to use it for all forms on site. Make sure that it is not your case.
I have project in Django with already written pages. I want to rewrite some of them and put html content using Ajax in Modal window from Twitter Bootstrap. These pages should be internal(access from browser should be forbidden). Is it possible in Django?
You can check request.is_ajax() in the view and send back a different template. I usually do this with passing in a different context variable for the base template that doesn't show any of the usual header, footer, etc. content.
I want to make a progress bar for a poll. I use django 1.4.8 for the implementation. The progress bar should display a rercentage of people who have already vote. There is also a helper function which return the sum of users voted.
At first i edit the template and the css to display the bar. After that, i try to use jquery for the actual behavor. But I am lost. I searched on the internet but i could make understanding in a clear manner. I am not sure which is the right way to do it. I dont want to use any other external library.
So, the question is how to call the help function and where i ll use the value to display the proper percentage on the progress bar into the template?
You need to think about how the web browser and the server (Django) communicate.
The browser makes a 'get' request to a url on the server. In Django you have an urls.py file which determines which view will handle requests to that url. For example there will be a view which renders a template containing the HTML code for the poll form.
When the user submits the poll, the browser makes a 'post' request, sending the form data for the poll to the server - to a specific Django view which handles saving the poll vote to the database. Usually in Django we'd use the same view function for both the get and the post for a form - see this answer for more details: https://stackoverflow.com/a/21114637/202168
It's not clear whether you want to show the progress bar initially, or only after they've submitted their vote. Either way you just need to calculate the relevant values for percentage and sum of users in your Django view and pass those values into the template, which renders the HTML sent back to the browser.
If you're using an HTML5 progress bar you don't even need jQuery. Unless you want a user to see the progress bar changing as other users submit their votes (much more complicated) you don't need any 'ajax' stuff either.
I suggest first you start with the Django tutorial:
https://docs.djangoproject.com/en/dev/intro/tutorial01/
So to be accurate the helper.py imports register from jingo. This means you call the function instantly into template. Furthermore I used instead of for my purpose.
helper.py
from jingo import register
#register.filter
def get_value():
return value
into template
<meter min="0" value="{{ <app_name>|get_value }} max="1"></meter>
I have an HTML form in my Django web application (NOT implemented using Django forms) that does POST request.
Now I want to implement a feature so that other web apps, not necessarily django, from different domains, can send some data to my application and get redirected to the web page with this form, partially filled with that data (the data can be JSON).
Besides redirecting, after the user clicks submit on my form, I would also want to send a message to the other server with some short text information.
I am not sure what is the best way to implement this. REST interface like Piston?
Could you give me some general directions I should follow?
You should create a view that handles the POST data from the form and the external web apps.
You should be able to check whether the data you are getting in the view is coming from your site or another by checking request.META['HTTP_REFERER'].
If it is from your site, you can just handle the form as you usually would.
However if it is from an external site, you would instead render the template with the form in it. You can put the information you got from the external site into the context, so you can pre-fill the form in the template.
You should also include a flag in the form to say that this was from an external site, something like:
<input type="hidden" name="external_site_url" value="{{ external_site_url }}">
After that form is submitted, you can check for the existence of external_site_url. If it exists you can then send the message to the other server.
Note, because you want other apps to use your view, you'll have to disable CSRF protection on the view (https://docs.djangoproject.com/en/dev/ref/contrib/csrf/#csrf-protection-should-be-disabled-for-just-a-few-views).
Also, by allowing other apps to use your view, you are opening yourself up to a lot of possible attacks. Be very careful with input validation and only give the view the ability to do the things it really needs -- you don't want an external app to be able to delete entries in your database for example.
I created a django form and want to display it in a light box after someone clicks a button on my html page. besides loading the form on the initial page load, i also wanted to call the view which displays the form with javascript. is there a way to only load the form template without reloading the entire webpage? I want to do this incase there are errors on the form so that I could just reload the lightbox with the form and error messages instead of the entire page.
Thanks!
Return just the HTML for the form from a separate view, then call the view via XHR. Once you've received the HTML, just replace what is already in the appropriate div.