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.
Related
I've got a flask application which renders an html page as a response to one of my endpoints (using jinja2 and render_template()). That html page has a form, which upon submission runs the form field values through some javascript functions which transforms the data and then makes 1 or more api calls to a different endpoint on my flask application.
I'd like to test the functionality of the javascript on that rendered html page. ie, given a certain input to the form fields on that page, ensure that the resulting requests contain the correct payloads.
Is that something that can be done for a flask application? All I've been able to find so far are ways to test the initially rendered html output, but that's not really helpful for me. I want to be able to update values in the form fields and then trigger a form submission and assert the results.
When user open some Django view there is option to choose what data to load from postgres DB. After that click submit and process is started. But when data is fetched and in the same view pressed reload, then all process starts from begining. Fetched time is about ~10min (best solution to fetched once by opening view and after that just manupulate with data without fetced each reloading)
I want to load data once or by button. But how to implement that i don't understand.
The easier approach is to do this with two pages:
First page: User can choose to load the data
Second page: Loads the data and shows it
If you want to do this on the same page you normally put a div on your page where the data should be loaded and then you need to use Javascript / AJAX to load and update your current page (or a part of it) based on user input like a clicked button.
There are multiple ways to implement this. Here are some examples:
HTMX - Click to load
JQuery - load div on button click
Pure Javascript
I would recommend HTMX, because it allows you to do this without having to write any JavaScript and it works great together with Django templates.
Hello Is there any way to accept a input from footer? I have a footer which is for Newsletter signup. Users insert their mail there. How could I accept that data? Do I need to send form via views every time. or there is a way to accept form from that included template code?
Well I also have a feedback form in the footer which in included in all the pages I want the feedback to be stored in my DB. I cannot figure out how I can accept the form data from all pages. (Sending forms in all page through views is possible But I think there is A easy (good Looking) idea) and also There are more them one Post method. I really don't know how to Explain. But I expect you can understand me.
I breakdown the your multiform/newsletter signup in steps as below:
Define view the post view
Add route to the url.py
In your html template add action in form tag example for
Validate input in your defined view
Save it.
That's it.
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 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/