Node.js - Changing html with a signal from Node.js - javascript

There's a section in my website where users can subscribe to our mailing list. I want it so that:
1. Users will input and submit their emails.
2. Node.js will handle this request and add the email to our mailing list.
3. If the request was successful, it will show up in the front-end that the subscription was either successful or unsuccessful.
So what I don't get how to do is executing a front-end javascript process (the process that will alert to the user that the request was either successful/unsuccessful) through a signal from Node.js. I am a beginner in Node.js and I am lost.
Thank you in advance!
EDIT: I am trying to do this in a single-page. I do not want to redirect the user to a whole another page just to tell them that they were successfully subscribed. I just want a simple alert.

You can create another page for the "Thank you" (in the case it was successful) and another one for a failed attempt. Handle it on the server and redirect them to the correct page (assuming you want to use different pages) Another thing you can do is create an empty div element for where you will put the status (successful of unsuccessful). When they submit the form and after you've handled the request, you can then re-render the page and pass in the message to put in your div.

Related

Display HTML content from Django

Whenever I receive an IPN in this url: https://www.example.com/payment/notifications, I want to display with JavaScript some HTML content to https://www.example.com/stream/notifications/<token>.
The goal is to display some successful donation message to a streamer whose token is user.stream_token. Then he can take that url and configure the alert with OBS.
This token is unique to every "streamer" and I can access it by doing user.stream_token
I manage the IPN from the server like this:
#csrf_exempt
def notifications(request):
jrequest = json.loads(request.body)
if request.method == "POST":
if jrequest['action'] == 'payment.created':
# some code
return HttpResponse(status=200)
I want to run the JS function that displays the html content inside that block of code, because that's when I can confirm that a payment or donation has been approved.
I know that Django is server-side and JS is client-side so I cannot just run a JS function inside there.
Any ideas on how could I implement this in the simplest way possible? I read about WebSockets but the implementation is way too difficult for me to understand.
If you are okay with your user having to send a request to trigger this change in the document, then you don't need a WebSocket. As we talked about last night on your question, you only need a WebSocket in a situation where you want your server to send your user a message without any prompting by the user.
However, if you are okay with the user having to send a request, you are on the right track. You are going to need to use ajax or fetch, etc. to make a request in your js to this view you are creating now. Then, depending on the data in the response from the view, you can render new elements in the document.
I am having a hard time understanding what the user is doing exactly in the frontend, and what you need to show them based on what event. If you can elaborate more we can keep working this out!

Is there a way to send POST data to another form and return the result of that form?

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.

Send POST data through PHP from one page to another

Short:
Is there a way to send POST data from a intermediate PHP page to another resultant page?
Long:
I have a page, let's say A.php where a form is present. The data is filled in the form, and send through POST to another page B.php
B.php checks the value and finds that the value entered is not correct (form validation). We redirect back to A.php with message "Invalid"
Right now I am sending data like this:
header("Location:A.php?msg=Invalid");
But I want to hide the msg part in URL from the user, by sending it in POST method or so.
I am not forced to use any particular method. This is just a project I am working on. So, please enlighten me.
So far I came to know that there is no way we can do that using header in PHP.
A better way to do this is to always post back to the same page. If there is an error you can then just display it without needing to redirect.
If there is no error then redirect to a results/response page.
The advantages of this are:
No need to send data that may be private through a redirect
If there was an error then refreshing the POST will continue to fail and will continue to only show the error message and allow the user to correct their mistake
If there was no error then the redirect will remove the POST operation and replace it with a new GET operation.
Refreshing the result page will not produce another POST operation, which might cause a problem with your data/database.
Example of what happens:
So first the browser sends a GET request for a.php.
On Form submission the browser sends a POST request for a.php.
If the code for a.php detects an error it just re-renders the same page with the form tags filled in with the POST values.
If the code for a.php does not detect an error then it does whatever it needs to do to save the data and then sends a redirect request for b.php.
The browser sends a GET request for b.php and removes the a.php from its history.
b.php displays some kind of thank you note or confirmation.

Post to another page without redirecting

I am building a movie recommended system. I want when a user login and rate a movie, the rating and movie name as well as user name will post to another page without going to that page automatically, i mean without pressing anything. How can I do that?
You can do that by executing an ajax request (after clicking the vote-button), which sends data (you can define the data to be what you want - rating, movie and user) to a php script that you will have to create.
the php script will read the posted data that the ajax has sent and can insert/update the database.
This way, the user will not be redirected. he won't even notice.
You can achieve this by using some kind of ajax requests triggered by vote event or callback.

Validate a Django Form with external POST action

I have a Django form, which sends the form data to an external source(to be more precise, it is a PayPal payment form). The user enters the price for the product, clicks on the button and the POST request is send to PayPal triggering the normal payment process.
Now I want to use OTP (like Google Authenticator) to validate each payment.
How should the validation be realized? I thought of several scenarios, but none of them is really satisfying:
Should I send the request first to my site, validate the OTP and then redirect the User to the PayPal site with the data via a POST request, coming with the request? Problem: POST requests are not meant to be redirected and I don't know, how to realize it in django.
Should I write JavaScript code, which sends an ajax request to my site, and "activates" the form on success? Problem: smarter users could just activate the form from the browser console, without sending the ajax request. Does anybody know some kind of activation trick in JavaScript, which is not "hackable"
I would be glad to hear some more solutions from you or some suggestions, how the solutions above could be realized without the problems mentioned.
EDIT - My Solution so far:
I have done a work around and split the form in two. The first form checks the OTP and sends the data to my internal django view. It also creates a model instance with an generated invoice, which can then be checked in the PayPal IPN routine. The second form is a PayPal payment form, which sends the POST request to PayPal. You can find the simplified code in the following Github-Gist:
https://gist.github.com/BloodyD/2cd15f38d0f666cf3a73
First method - normal redirection after POST:
I don't know why do You think that there shouldn't be any redirect after POST request? In django it happens all the time, without that each page refresh directly after adding something to database will trigger adding it one more time.
To redirect user into proper paypal page, you can just send HttpResponseRedirect instead of normal response when form is submitted with valid form data. If not, display some error messages.
2nd solution: using javascript.
You can send url to redirect to (paypal url) in AJAX response, so user won't be able to bypass this. Simply put some form submitted by AJAX, if it returns URL to redirect, just redirect user. If not, display error message.

Categories

Resources