I am making a forum using Node, Express, EJS and MongoDB. Currently, I render the forum page and pass data from the database using Node and EJS. I use GET and POST requests. As soon as I add a comment, the page stores in the database and then redirects back to the same route. I am then able to scroll down and see my comment. However I am not happy with this and I want the comments and replies to be handled by Ajax so that as soon as I comment, without refreshing, I create a post request and again without refreshing the page I can load the new comment. Any suggestion on how can I bring this to live?
The project is available to view on https://github.com/Ibrahim40021974/Forum . (Sorry for the untidy code. Am still working on version control). All suggestions are welcomed!
Thanks in Advance.
What you wanna achieve, is generally called a single page application where you won't see the page refresh but the small component of that page is actually got updated with new data.
I have done using Reactjs, Nodejs which is pretty easy to do in Reactjs. If you are interested , I can share the repo.
Had looked into your project and few things I noted.
If I am referring the right one (https://github.com/Ibrahim40021974/Forum/blob/master/views/forum.ejs#L69) then you need to stop default form submit using e.preventDefault(). Default form submit always refresh the page which you don't want. Same form operation you have to do with ajax call.For exm.
handleFormSubmit(e) {
e.preventDefault();
// <add your ajax call here>
}
See once you do this if things work without page refresh.
See if this helps you with how to make ajax call. https://www.thetopsites.net/article/53326172.shtml
As #Ajay kumar said the best way is to create a single page app : framework like react/angular/vue are pretty good when it's about refreshing only part of your page when new data are inserted.
Yet you could do this without using any of this framework but it will be tricky.
You can, in your ejs template add the javascript logic that will, when you submit your comment, do the following :
Send a post request to submit the new comment
Send a get request to get comment affiliated to this post as soon as post request ended
update the DOM(vanillaJs or Jquery) to display the list of comment.
The first choice will ask you to change your project architecture, but will be easier to manage, the second will give you the possibiliy to keep using ejs but is a bit more complicated.
Related
My issue: For my thesis I am creating an auction site. I have an admin panel in which I would like to have some configurations so that an admin can specify that if there are 10 days before the end of an auction some components should be displayed in different ways, some should be not visible at all etc. That’s what I call dynamic presentation.
My question: Right now I am working on architecture and wondering if SSR can be helpful in any way? I am already aware that it can shorten download time of some collections from my database even by half, but I am wondering if there is any way how it can be helpful with dynamic presentation itself?
What I already know: I have read all about advantages and disadvantages of ssr or universal rendering in react. Now I am only wondering if it can be in any way helpful with dynamic presentation or it won't matter if I choose SSR or CSR.
Small side question: I don’t have the whole architecture ready yet. What I know is that I would like to have a database, one separate app for an admin, backend and frontend (either ssr or csr). My first thought on how to manage this dynamic presentation was to store some rules in the database. Then the rules could be configured in admin app should an admin want to change anything. The rules should be send to backend and calculated with some additional data from frontend. Then backend could send some flag to frontend indicating which components to display etc. In theory I could move calculating to e.g. NodeJs server should I go with SSR. What I'm wondering about is; can you think of any better way to handle dynamic presentation? What I am most afraid of is numerous ifs in the fronetend. I would like to have some more elegant solution but I have no other idea so far. For some time I thought about a scoring system but I believe it would be too complicated (instead of sending a flag, send a score and frontend will display correct things based on the score). Also it wouldn’t solve the issue of ifs on the frontend.
I am aware that on StackOverflow questions which can be answered rather than discussed are preferred but I am really stuck and would appreciate help.
Basically SSR can provide some speed on your page because all of your data will not be trying to be fetched when the react script will end with an API call. Data are fetched from database when page is requested and be passed to the component to render with the script.
Also another very basic advantage and the reason why everyone are going the SSR way is SEO. You cannot achieve SEO page with react CSR. This is because google bot etc will try and crawl your page without even render it. Is like trying to "view source" of a page. When you are in CSR the page has no content only the initial react divs empty. You need SSR to have data on the first request of the user.
SSR brings the data on the first request of the user until a reload. In the meantime react router fetches data from the api.
Let me know if that help you.
PS: also a helpful link https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
I am learning nodejs with express and i am creating my first single page application with the help of knockoutjs, i have a lot of routes and i am looking for a way to hide the parameters in the Url other than encoding them, if i have header links like :
http://www.mywebapp.com/login
http://www.mywebapp.com/logout
http://www.mywebapp.com/signup
http://www.mywebapp.com/users/username
http://www.mywebapp.com/users/1-8
can i still make those links appear as
http://www.mywebapp.com
no matter what the route to be called is?
if not possible can someone please explain why?
my application is completely ajax driven.
Well if your app is ajax then the url won't change. You can also wrap the entire thing in an iframe and only navigate inner frame. But keep in mind that this is generally bad practice as history and bookmarks don't work.
I am a newbie in node.js. Just need a little bit of clarification here. I am using jade as the view engine. Other than normal form submit and ajax technology, is there any other way to submit date from a jade template in node?
Thanks
socket.io is one other method, although it's not tied to Jade specifically (can also be used from plain HTML).
Heck, you could even go 1999 and write a 1x1px transparent <img> with a src url containing GET parameters picked up by another route. If you are going to all that trouble, why are you not just using ajax again?
I'm working on an app that i being built using Node and Express. All is fine, however the app is currently not asynchronous and I'd like it to be, so I'm currently investigating what would be the best way to do it.
As far as I can tell, socket.io seems to be the preferred choice to go with Node.
My question is, is socket.io's methodology the best way to move data between the server and client or is there a better, more robust way to do it? Maybe something accomplished with Node only?
PS: I think socket.io sounds really nice. Its just that I'm new to Node and though there would be a simpler way to move data back and forth.
Many thanks
EDIT:
Ok, I've seen the term "realtime" used before and was frown upon. The commenter implied that technically there is no "realtime" application, hence me choosing asynchronous, however realtime does describe what I'm after: An app that will be all ajax-like. For instance, in my app, when I need to edit a saved document (mongodb records are called documents), I need to redirect the page passing the document id as argument. I don't want that. I want all through ajax. I can achieve this with jQuery, however behind the scenes the server will still be moving through urls (I'll need to create loads of app.get('product/:id/edit', ...), app.post('/product/:id/edit'. ... and then use $.ajax to get and post stuff ) so I was wondering what's the best way to achieve this.
PS: I might be looking at this completely wrong. Like I said, I'm new to Node and for app development for that matter.
EDIT2: An example: Let's say I have a page with a table in it where I list all products. Each product will have a EDIT/DELETE button. At the moment, when I click edit, I'm redirected to another page where I can edit the product and save it, then I'm redirected to the product listing. I'd prefer to load the product into a modal window, make whatever edits I need, then update the product/listing without leaving the page.
Using $.ajax I can use the product ID, enquiry the db for that particular product, populate the field in the modal with the product details and display to the user. Then allow the user to make the changes and update the products, however the part in which I need to enquiry the db in order to populate the modal is muddy because the id needs to be passed through the url...
I don't know how to pass the id to the application unless is through app.get('/product/:id/edit', ...) then app.post('/product/:id/edit').
I'm extremely new to node.js, and have years of experience in PHP, so my thinking about the issues below, might be tainted by my backed ways.
I'm currently using node set up with foundation CSS, and using their reveal modal windows to display most of my forms. I want to avoid re-displaying them upon submit, and instead, validate them on client side.
Basic user creation will have fields as per below:
name
email
password
password confirmation
Form my basic validation i can use require to validate the input,
input(type="text",name="user[email]",placeholder="#",required)
but I would also like the client to check if the email already exists after the user types it in, and whether the passwords are correct.
I've been reading about the validator module but from the documentation I read about it, I only understand how to validate the values after they've been posted. I've seen the express-form module as well, but It's no longer maintained, so I would rather avoid it.
Could someone point me in the right direction?
I don't have any experience with validator or express-form, and I am not sure you need them for what you are trying to achieve. Most of what you are trying to do will be client side work (e.g. jQuery Ajax calls to validate the data) That kind of client-side code should be pretty much the same regardless of whether you use a Node.js backend or a PHP backend.
Injecting the initial JavaScript in your Jade page should be pretty straightforward once you figure out the proper syntax to include JavaScript in a Jade page. The wiring of DOM events on the page to make Ajax calls (onClick, onTextChanged, et cetera) will be conceptually the same as if you were writing a plain HTML page.
In your Node.js server side you'll need a route to handle the request to validate if an e-mail address already exists and that code very likely will return JSON that you will use in your client side form to display the results of the validation to the user. But that should also be very similar to what you would have done with a PHP backend.