It's one of the first time that I use express.js and Handlebars. I need to autoplete this field: <input type="text" id="myInput" autoplete="on" placeholder="Search here...">. When everyone digit to this text, I need to make a POST and after a GET without refreshing the content in the page. The problem is, when I do the GET, Handlebars refresh all page. This is the mand that I use:

res.render('home',{ items:typeOfCategory}); 

and this is the structure of the hbs:

{{#if items}}
<ul>
{{#each items}} 
<li>{{this.title}}</li>   

{{/each}}
</ul>
{{/if}}

My question is: how to avoid the refreshing of the all page? Thanks

It's one of the first time that I use express.js and Handlebars. I need to autoplete this field: <input type="text" id="myInput" autoplete="on" placeholder="Search here...">. When everyone digit to this text, I need to make a POST and after a GET without refreshing the content in the page. The problem is, when I do the GET, Handlebars refresh all page. This is the mand that I use:

res.render('home',{ items:typeOfCategory}); 

and this is the structure of the hbs:

{{#if items}}
<ul>
{{#each items}} 
<li>{{this.title}}</li>   

{{/each}}
</ul>
{{/if}}

My question is: how to avoid the refreshing of the all page? Thanks

• javascript
• node.js
• express
• handlebars.js

Share Improve this question Follow edited Dec 13, 2017 at 11:22 TGrif 5,94099 gold badges3535 silver badges5555 bronze badges asked Dec 12, 2017 at 12:20 naninani 38211 gold badge55 silver badges1515 bronze badges 3

• Use AJAX to avoid refreshing of page. – vibhor1997a Commented Dec 12, 2017 at 12:21
• @vibhor1997a is it the only way to avoid refresh? – nani Commented Dec 12, 2017 at 12:22
• Yes you can send an AJAX get request from the client side and your server will send the autoplete data in the response – vibhor1997a Commented Dec 12, 2017 at 12:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I had read something like that in another question. Based on this tutorial: I found the answer to all my problems. this tutorial explain how to use a PJAX library that manages both the client and server side. Thanks to 3 rows of code you can obtain a speed navigation without reload the page.

1. Install client side library from jQuery-pjax page
2. into your html page that send the request add: <a href='/yourLink' data-pjax='main'>YourLink</a>

where main is the div that will content yout change. In my case is:

 <div id="main" class="main">                    
       {{{body}}}                    
 </div>

3. In your.js file add $('a[data-pjax]').pjax(); This mand 'simply call the pjax extension on every element that contains the data attribute ‘data-pjax’'

4. Install inside express the depency with the mand: npm install --save express-pjax

5. Set your server:

   var app = express();
   var pjax = require('express-pjax');
   
   ...
   
   app.use(pjax())
   

---

6. Replace the normal rendering:

res.render('index', {title: "Index"});

with

res.renderPjax('index', {title: "Index"});

UPDATE Alternatively you can obtain the same result. Consider that the structure of the project is as follows:

views
  |-> partials
  |      |-> addtest.hbs
  |
  |-> index.hbs

For example, image that in your index.hbs you have a sidebar with different items, described in this way:

<li>
    <a href="#testDB" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
   <img src="../img/database-data.svg" class="svg icon">Test</a>
    <ul class="collapse list-unstyled select-specific" id="testDB">
        <li value="addTest" class=" ">
            <a href="#" id="add-new-test">Add Test</a>
        </li>
         ....
         ....
    </ul>
 </li>

Inside the partials directory you have a simply form. Now for manage the form you have to do two operations:

1. Server side: For switching from one partial to another without refresh the page, you specify:

   router.get('/addtest', function (req, res) { res.status(200); res.header("Content-Type", "text/html"); res.render('partials/addtest', {title: "Add Test"}); });

2. Client side: In your client side file, you add make a simple get request:

   $('#add-new-test').click(function (event) { $.get('/addtest').then(function (data) { $('#main').html(data); }); });

In this way, when you make a get request with the same address (i.e in this case /addtest) the client add a part of code inside your view without refresh all.

NOTE: Keep in mind that, if you needed a some file.js in your partial, for load the file, use this:

<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>

This is used for avoid: “Synchronous XMLHttpRequest on the main thread is deprecated…” because the call is asynchronous. For more info..

The problem here is that you're making the browser request a new resource each time. This is triggering your templating and serving up a brand new page every time.

You'll want to make an express endpoint which returns JSON, and then send up a request to that endpoint using something like AJAX (found in jQuery) or a similar library. This way you can make a call up to your web server, express can return you some data in a JSON format (res.json({}) and your frontend can then interpret that response and decide how to display it on the DOM.

This sort of partial updating is where you start to need frontend JS along side programatic endpoints that return JSON. This is often where some of these big frontend frameworks like Vuejs and Angular thrive, but if you're new to this sort of thing I'd remend using jQuery to make a HTTP call to your server and return the JSON down to the frontend.