Create Dynamic Content Using JQuery

Contents hide

1) Why to create the dynamic content ?

2) # Directories

3) Dynamic Content To Be Viewed.

4) Main Page Creation

5) JQuery app file

Why to create the dynamic content ?

Loading the content of the page dynamically leads to the less code snippet. Basically, it used in static websites. While the web page content that is used on every page, this leads to multiple coding for the same content. Using Jquery elements the same content can be loaded on multiple pages.

# Directories

|
 |-- * index.html
 |-- * demopage.html
 |
 |-- Shared
 |     |-- *header.html
 |     |-- *footer.html
 |
 |-- js
 |  |-- * app.js

Index.html: A main page
demopage.html: A page linked to main page (index page)
shared (folder):
1) header.html: Contain The code of navbar contents.
2) footer.html: Contain the code of footer contents.
js (folder):
app.js: JavaScript file for loading header and footer content dynamically.

Dynamic Content To Be Viewed.

Now create the file containing the content that will be loaded on multiple pages.
For Example – header and footer content.
Create the separate files for both header and footer and for better indentation save those files in shared folder.

shared/header.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

After creating the header content now create the footer content named as footer.html and save in shared folder.

Link The Jquery CDN link in both header and footer file.

CDN Link

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Main Page Creation

Create the main page in which the header and footer content must be displayed.
load the content in div tag id="header" which will load content from js/app.js

index.html

<html>
 <head>
 </head>
  <body>

    <!-- header file linked with app.js -->

 <header id="header"> </header>

 <!-- 

  Your Body Content Goes Here 
  
 -->

 <!-- footer file linked with app.js -->

 <footer id="footer" ></footer>

   </body>

   <script src="js/app.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</html>

Create some other demo page to check the dynamic Loading of Jquery.

JQuery app file

Create the app file that loads the content on the web page which contains the Jquery code.

js/app.js

$(function(){
 $("#footer").load("./shared/footer.html");     // Loads The Footer Element.
}());
$(function(){
 $("#header").load("./shared/header.html"); // Loads The Header Element.
}());

Note :

To check the working of the dynamic loading the files must be run on localhost.
it won’t load the content in direct file browsing.

Tags: css3, html5, JavaScript, JQuery