I'm using Expressjs for my project. I want to show a popup in if the post request is success. So I need a way to show a popup alert in the client side when server side says. It's seems not possible. Can any one help me with this?
You need to split that problem to 2 steps,
First, you have to response to the client with an appropriate answer fit to some convention you have established, for example:
app.post('/', function (req, res) {
res.json('{ success: true }')
})
Then, in the client, you need to check that response object and then to create the popup according the given result.
it has to be made on the client side, on the success callback of your POST. Example : https://api.jquery.com/jquery.post/
Related
Browser: Safari
Texteditor: VS CODE
Frontend framework: Reactjs
Backend setup: Express.js
Problem: I have an Axios post request on the front end after an onClick call event is triggered. I am unable to debug the data being sent in the body and know why it isn't getting over to the backend.
The screenshots show the code:(not the breakpoints in red. I am not sure where a good place to use debugger;
This is the code for the onClick event
This is the Backend code running on express port 8000
This is a screenshot of safari and the form being submitted. In the console is the response. As you can see it shows as post request type and status 200. None of that data gets over to the backend SQL database.
Note in the screen above that the object is rendered several times. That is because to get this code to show the results in the console I changed this function.
to this:(though according to react the above is the correct way and will only fire the function once when onclick event is triggered. The below approach does not require an onclick event.
Below is the data showed when setting a breakpoint on all requests. Note that it appears to be a GET request when it should be a POST
Note this is a POST REQUEST. This only happens when the onclick function is changed.
Any help on this matter would be greatly appreciated. I know I am close to figuring this out, however, I am still new to React and CRUD works with it.
So your backend isn't handling the request being made from the front-end. if you want to see the data, try doing this in your server. You need to handle the request your front-end is making before sending a response. The below code just destructures the request body so you don't have to write many lines of code. Once you click on the submit button, you should see that your front-end input is popping up on your back end console. You are currently trying to send an unhandled request. If you want to let's say send something to the front-end based on the request, you would do something like
res.json({nameOfThing: valueOfTheThing"}) AFTER HANDLING THE REQUEST.
app.post("/", (req, res)=>{
const {email, name, question} = req.body
console.log(`Your Email is ${email} and your name is ${name} and your ${question}`)
})
The data should appear in your console. I have actually written a blog on how to do stuff like this. Feel free to check it out. https://dev.to/gbudjeakp/how-to-connect-your-node-express-backend-with-your-react-front-end-post-610
I'ld like to send two successive ejs page to the client using the following code:
app.post('/', function(req,res) {
res.render('yourDemandIsBeingProceed.ejs');
//some code which require time (open an external programm, run a script, edit a response)
res.render('hereIsYourResult.ejs');
res.end();
});
So, once once the client post his form, he receives a page asking him to wait for a few seconds and then the page containing the response is send.
any suggestion?
many thx
What you can do is have client-side code in yourDemandIsBeingProceed.ejs when the page loads that performs a get/post request to a different endpoint. When the result from that is received, hide/show different elements inside yourDemandIsBeingProceed.ejs so it looks more like hereIsYourResult.ejs
What you really should do is have the user submit information via front end AJAX and put up a loading graphic until the JSON response gets back. AJAX was developed for situations exactly like this.
Hi i'm an express noob.... I have an api look page, that's all working but what i'd like to have is once a user hits the route i'll display a loading page, fire off the api http request then once it's successful redirect/render the results page. As i understand it you can't use res.render twice on the same route? Maybe our chum next(); can help here?
This is what i have so far:
router.get('/lookup/post/:url', function(req, res){
// Render the loading page...?
res.render('loading');
Lookup.post(req.params.url, function(err, result){
if(err){
}else{
// ...Then once the api lookup comes back ok redirect or render the results page?
res.render('results', {
posts : result.store.postData.posts[0],
votes : result.store.voteData
});
}
});
});
The solution to your problem is to do part in the UI and part on the server. You can do it with an Ajax call or by using Socket.IO, which will create a socket connection to the server.
I would argue that the later is the most convenient solution, because you can talk to the back-end and the front-end by emitting and listening to messages. The cool part of Socket.IO is that if the browser doesn't support sockets, it will default to an Ajax call.
The official website of Socket.IO is: http://socket.io. You can also check my bPhone project where I use Socket.IO in the simplest way possible. Plus my code have a lot of comments that should make everything super clear.
I hope this will put you on the right path :)
I am still new to Node and Express, and I've tried Googling this but perhaps I just need to know what to Google.
A big part of my app involves letting users create their own profile, which comes from a simple form submission. How would I go about taking what they've submitted in a form and putting that on a live page of my site?
Is there a middleware that I should be using for that? Is there a term I should Google? I just need to know how to get started and then I can figure the rest out from there. Thanks in advance for any suggestions.
Nicest way to do this is to set up a route with parameter. That way if user goes to /user/Jake he will see his profile. Like this: https://nimble-beetle.hyperdev.space/user/Jake
Check it out here: https://hyperdev.com/#!/project/nimble-beetle
app.get("/user/:username", function (request, response) {
response.send('thank you for registering, ' + request.params.username);
});
All you need to do is grab the username, fetch user's data and display his profile.
you are probably looking for the body-parser Middleware:
https://github.com/expressjs/body-parser
This one is decoding content of your request, it can decode Form data and JSON, depending how you send the data in your request, and gives you a JSON object.
I am using the npm "twit" and it is ultimately posting Twitter Status Updates. I have the user fill out a form and the action of the form is a post request to a path like home/tweet/.
In my express router I have a route home/tweet/. The Form data isn't really being posted there though, the reason I am doing this is because I am extracting the form fields qith req.body and then inside the router I am making the post request to Twitter to create a new tweet. Here is what it looks like:
router.post("/tweet/", function(req,res){
var tweet = req.body.tweet;
Twitter.post('statuses/update', { status: myFuncs.encode(myFuncs.key, tweet) }, function(err, data, response) {
});
res.redirect('/');
})
Even though this works, it feels a little hacky to me. Is there a better way to design this? Is there a better way to extract the Form Fields without using a post request using req.body, or a get request using req.query?
Although, I agree that it seems "hacky"---as you put it---but unfortunately, since Twitter has not enabled CORS on its API, you have no choice but to use an intermediary, such as your server. Alternatively, you may use a third-party service, but that still is an intermediary just like your server.