My web app on the backend is Flask and I use Jinja2 and wtforms to dynamically generate content.
The main page that is generated is a table of all the sales for any given month. At the top of the table, there are select fields used to filter the sales, Month, Director, and Account Manager.
When someone selects an account manager, for example, from the Account Manager dropdown, I would like an event to be triggered that sends a "get" request back to the server with the selected account manager. The server would then generate the new filtered content and send the HTML page back to be rendered on the client.
I want the dynamic rendering to remain on the backend. I added an event listener to the Account Manager select field and then tried to use Axios to send an ajax call to the server using a "get" request, which works. I get the entire HTML document back as data.
My question is, how do I now render that entire HTML document returned to Axios? Or, is there a better way to do this?
I know I could easily create a form with those filter elements and then a submit button to send a "post" request back to the server and it will work. But, I really would like to send a "get" request when a select field changes without having the user click a button.
I was able to solve this on my own. I kind of answered it in my last paragraph of the question. A solution is to simply create a form that includes the filter select elements. I then added an event listener on each of the select elements. The function for the event listener then calls submit on the form. Pretty simple.
Related
How can I show the information I got from the place where I entered the title and text on the announcement page?
repo:https://github.com/qswezy/spa1
We have added the form and we want to show it in the announcements
Forms usually have target page. So, this is the page that will receive your submitted data, usually in some type of POST array (if you submitted it as a post.) If this assumes JavaScript, you probably need to run an Express server to do this.
So I have a NodeJS site and on the home page is a form containing some radio buttons. When the user clicks "Submit," I would like for the user to be redirected to another page based on the answer. This I have figured out (The buttons have an onclick attribute that changes the action attribute of the form element). However, I need to keep the data from the original form, so that after the user has "chosen their path," I know what path the took and the answers they made along it. Thank you in advance!
You could persist the client's state in a session. If you're using express, one alternative could be express-session. The way it works is that it assigns a unique identifier to the user in the form of a cookie and saves the data somewhere (memory, database, a file, etc. depending on which you choose). Then when the client makes another request, the server gets that data back with the identifier from the cookie.
Ok, this sounds crazy, but let me explain. I want a user to be able to push a button, and then the html file is edited in such a way that it a NEW p element is created, and stays there PERMENENTLY (eg on reload and for EVERYONE to see). Any way on how I could do that.
Again I am using node.js/express, and html/js/css.
It really depends upon exactly what you're doing.
Conceptually, you would probably use some sort of template system for generating your HTML files (like Jade, Dust, EJS, Handlebars, Nunjucks, PUG, etc..) and then you store some state in a database and use a query from the database as input to the template whenever you render a particular page.
So, when you add an item to the database, it will show up in all future renders of the page.
So, your button would trigger a form post to your server which would add an item to the database and the response from the form post would be a rendering of the page after adding the item to the database. All future renders of the page from all users would also show those same items in the rendered page.
I need to send form data to another page that will allow the user to do something in a form and return the result of that form back to the original page? Is this possible? I know it's not ideal, but the issue is that I need to make a "drop-in" solution that does not need to be integrated with other code. I know it's a very specific request and scenario.
I know how to send POST data that doesn't require any user input on the processing page. i.e. I can send POST data to 'calculate.php' which will do the math and send it back, but if I need additional user input on 'calculate.php', how can I still send it back?
An example of expected results would be:
Page #1: User enters a number and presses submit to go to next page.
Page #2: User enters a second number and presses submit to finish.
Back to Page #1: User receives sum of both numbers.
Obviously, this is a really redundant thing to do, but I'm trying to simplify the problem as much as possible.
EDIT: There a few restrictions I forgot to add.
Page #1 is not my application, I am developing Page #2 as a "drop-in" solution for Page #1. Essentially, I can only use Page #1 to call Page #2 and receive a response from it. The problem is that I need to be able to allow for user input on Page #2.
I know I can post to Page #2 and then post to Page #1 again, but what if I need to maintain the state of Page #1. For example, if there's an open Web Socket connection.
Please note, I understand that this may be impossible or extremely difficult, but if I don't ask I'll never know right?
You want it with PHP or any other language. If you are running Php on server side then you can use Global variables like $_GET and $_POST.
Page #1: Use Post/Get method to send data to second page.
Page #2: Receive all fields' values using Globe variables ($_GET and $_POST). You can use these values as default values of form fields. Now submit this data to page 1 using post or get method.
Back to Page #1: Here you will receive the data of first page from second page and newly posted data from page 2
Either of these should work:
Never leave the page - use AJAX / XMLHttpRequest to call out to other pages to process chunks of data
Do everything on page 1 using "postbacks" -- the form targets are the same page, there is a state variable like "stage=1", and you use JavaScript to add set hidden variables for any additional state that's needed.
... PHP state validation and processing for the different stages ...
... one or more blocks of HTML for the page (PHP if / else can be used to choose between multiple page views) ...
Edit for added restrictions:
Have page 2 use postbacks or AJAX to collect the additional information
I figured out a few ways to do it.
Update a Database (or Data Store of some sort, depends on security needs) and have Page #1 listen for events from a separate page (on the same server as the database). Very similar to the way PayPal's Instant Payment Notification (IPN) works. I was actually able to set up server sent events with it as well.
Essentially, Page #1 sends data to Page #2 where the user will perform the function and then Page #2 will send POST data to a listener somewhere (either on the same server or Page #1's server), the listener will update a database and Page #1 will be listening or pulling to an event handler that will send an update once the database updates.
Use JavaScript Child/Parent Window functions. This is okay if Page #1 and Page #2 are on the same server, but can get messy and browsers have a lot of restrictions and it varies depending on browser.
Page #1 will open Page #2 in a child window, after the user performs a function, Page #2 will call a function that accepts the result data on Page #1.
I have name and email id fields and want to post data to server to another website (if fields are valid) using form tags but i already have one form tag with runat="server", using second form tag causes second form to not show on page. I have JavaScript code to post data to server on form post. I saw something using action on button click, but how do i post data on button click
P.S I don't want to use iFrame, popup.
To send POST data on a form submit, try to use a submit button like this:
<input type="submit" value="POST_DATA" name="POST_PARAMETER_NAME">
Replace POST_DATA with your data you want to submit and replace POST_PARAMETER_NAME with the parameter name you want to access the data on the server.
If you already have a form on the page that uses asp.net web forms to communicate with the server then you would probably need to make an ajax request if you want to post back different data. This is quite easy these days using jQuery. The link bellow shows you how you may do this and how to create a web forms page that would accept your post. This way your current form and page would not need to change which is what it sounds like you are after.
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/