Is it possible to dynamically load new content into Handlebars templates using AJAX after the initial content of the page has already been loaded

Question

Is it possible to dynamically load new content into Handlebars templates using AJAX after the initial content of the page has already been loaded

We are currently revamping a mobile application that offers customers an account dashboard.

The dashboard section of the app relies on numerous web service calls to retrieve data. Previously, we utilized server-side rendering to load the page with available user information at login. Subsequently, we would use AJAX calls to fetch additional data that required backend processing. This approach allowed users to view some information immediately without having to wait for all the data to load entirely.

In our new app, we are contemplating integrating Handlebars. I am aware that it is feasible to populate a Handlebars template using AJAX calls.

Is it viable to mix content that is displayed instantly upon page load with content loaded via AJAX after the initial page load?

For instance, consider the following component:

I aim to have all component content render upon page load, excluding the section highlighted in green. That specific part should be loaded via AJAX post page load. Is this achievable with Handlebars?

Thank you!

javascript ajax handlebars.js

Answer 1

Answer №1

If you want to achieve a similar functionality to Stack Overflow using format unicorn, you can follow this example:

Example HTML:

    <div id="messageBox">

    </div>
  </body>
  <script type="text/template" id="templateMessage">
    <h2>{title}</h2>
    <p>{message}</p>
    <br>
    <span><Strong>{sign}</strong><span>
  </script>

Example JavaScript:

String.prototype.formatUnicorn =  function () {
      "use strict";
      var str = this.toString();
      if (arguments.length) {
          var t = typeof arguments[0];
          var key;
          var args = ("string" === t || "number" === t) ?
              Array.prototype.slice.call(arguments)
              : arguments[0];

          for (key in args) {
              str = str.replace(new RegExp("\\{" + key + "\\}", "gi"), args[key]);
          }
      }

      return str;
  };
  var jsonMessage = {title:"Customized Template Using Form Unicorn",message:"Stack Overflow is amazing !!",sign:"John Doe"};
  let myUnicornTemplate = document.getElementById("templateMessage").text;
  var template = myUnicornTemplate.formatUnicorn(jsonMessage);
  document.getElementById("messageBox").innerHTML = template;

Note: You can view a working example with ajax on this jsfiddle link.

I hope this information proves useful! =)

Answer 2

If you want to achieve a similar functionality to Stack Overflow using format unicorn, you can follow this example:

Example HTML:

    <div id="messageBox">

    </div>
  </body>
  <script type="text/template" id="templateMessage">
    <h2>{title}</h2>
    <p>{message}</p>
    <br>
    <span><Strong>{sign}</strong><span>
  </script>

Example JavaScript:

String.prototype.formatUnicorn =  function () {
      "use strict";
      var str = this.toString();
      if (arguments.length) {
          var t = typeof arguments[0];
          var key;
          var args = ("string" === t || "number" === t) ?
              Array.prototype.slice.call(arguments)
              : arguments[0];

          for (key in args) {
              str = str.replace(new RegExp("\\{" + key + "\\}", "gi"), args[key]);
          }
      }

      return str;
  };
  var jsonMessage = {title:"Customized Template Using Form Unicorn",message:"Stack Overflow is amazing !!",sign:"John Doe"};
  let myUnicornTemplate = document.getElementById("templateMessage").text;
  var template = myUnicornTemplate.formatUnicorn(jsonMessage);
  document.getElementById("messageBox").innerHTML = template;

Note: You can view a working example with ajax on this jsfiddle link.

I hope this information proves useful! =)

Is it possible to dynamically load new content into Handlebars templates using AJAX after the initial content of the page has already been loaded

Answer №1

Similar questions

Maintain the property characteristics (writable, configurable) following the execution of JSON.parse()

From NodeJS to full word feature module: Expand all abbreviations to enhance readability!

When the Angular script is executed, the variable is not defined

Utilizing phonegap/jQueryMobile to extract OpenCart products in JSON format is a simple process

Tips on using the map and filter methods to narrow down a nested array based on specific object

Struggling to comprehend the node.js walker concept

Navigating through Dynamic URL Parameters with RouterLink in an Angular Application

Ways to eliminate toggle event in Angular

Implementing automatic image upload via Ajax without the need for a click event right after selection

Streaming data from MongoDB to a file using Node.js

Is there a way to instruct Express to refrain from parsing the request's query string?

Managing data from two tables in Node.js with ejs

What is the most suitable Vue.js component lifecycle for data retrieval?

Import Socket.io into your Node.js application using the import statement

Upon initiating a refresh, the current user object from firebase Auth is found to be

A guide to setting up a unit test for an Angular JS controller that utilizes an ajax service

Access to property 'nodeType' on AJAX request in Firefox has been denied due to permission error

Discover the correct steps to transition from using particles.js to the react-tsparticles package

What steps should be taken to modify an image following retrieval of data from the database?

Subsequent requests experience delays in processing due to ASP.NET validation errors causing slowdowns