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?
Related
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.
I am working on a POC on Node JS, and I learnt that a typical tech stack will look like - Jade (instead of HTML)/ NodeJS/ and some database. My question instead of Jade can we use HTML 5? This is to avoid learning one more language to complete the POC. Also I assume that I will be able to expose the Node JS methods as rest API instead of having PHP or Java layer.
More over if I use simple HTMl/JQuery - for UI and Node.js ( for restful service) it will be easy for one to migrate to other framework easily. Please share your experience.
This is more an opinionated question, so i would like to share my opinion.
My question instead of Jade can we use HTML 5?
Jade is not alternative of HTML5. Jade is a templating engine whereas HTML5 is not. So, both are different.
Getting back to your question, you can use HTML5 as well.
Role of Jade
Ex: Consider yourself in a scenario where after user login you need to display a profile page and in profile page You need to print 'Hello '.
Since is dynamic value, so it can't be hardcoded in HTML file. Therefore, you place a placeholder in HTML (since you have added placeholder and made your HTML file generic for all user, thats why such file is called template file instead of plain HTML file). Now you can fill the placeholder with dynamic value either on server side or on browser.
If you select to replace placeholder by their value on server side, you use some templating engines. Ex EJS, JADE etc. Templating engine are responsible for generating HTML from template
If you select to replace placeholder by their value on client side, then you can choose to opt Ajax calls and fill your placeholder using Jquery or Angular.js may be handy if your project is expected to be big enough.
if I use simple HTMl/JQuery - for UI and Node.js ( for restful service) it will be easy for one to migrate to other framework easily.
IMO, using HTML with jquery for UI is better, since it is simple and traditional and you will get more support on community forum. Also, you wont have to learn template, templating engines straightaway.
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.
what template engine is recommended for NodeJS when using jQueryMobile Multi-Page template?
I need logic in every view such as include_once('html-header') because I never know is current page is first on rendering list (aka does it match session-privilege criteria).
I've tried Jade but it seems to be completely impropriety solution for such problems. But maybe my design is wrong?
Probably something simmilar to PHP with <? and <?= will be best to fit my project needs.
Edit:
I'm using nodejs as a HTTP server.
You can use emberjs and detect the states and you can append and delete views as you need them to the outlet, Ember uses handlebars template engine to render html
Emberjs
Also check outlets in this page
Is it possible to generate Server side includes with express.js?
I'm trying to reuse my header and footer markup on different pages so I can make header/footer changes in one place.
Try to use partials.
You have to choose between some template engines. The default template engine is jade, so for this you have to do the following: create a file views/header.jade and put your stuff in. in your action you can render the partial with partial('header');
See the expressjs docs for more.