Post
Ask Question

How To Change the Content Of A Div Without Refreshing The Page Using jQuery

In this article I will show you how to change the contents of a div without refreshing the whole page using jQuery. 

Let us create view first :
  1. <div class="container">  
  2.     <div class="container-left">  
  3.         <ul>  
  4.             <li> <a id="one" href="#">About Company</a></li>  
  5.             <li><a id="two" href="#">Our Products</a></li>  
  6.             <li><a id="three" href="#">Our Services</a></li>  
  7.         </ul>  
  8.     </div>  
  9.     <div class="container-right">  
  10.         <h2>Welcome to Some Company Name</h2> </div>  
  11. </div>  
There is one main div called container(class name) and two sub divs with classnames container-left and contaner-right. Container-left has 3 links, with ids one, two and three.This acts as a content changer.content-right div is empty, initially I have inluded an h2 tag(Welcome to Some Company Name).

Here is the Css for the page :
  1. body  
  2. {  
  3.     background: #DDD;  
  4. }.container  
  5. {  
  6.     width: 80 % ;padding: 10 px;  
  7. }.container - left, .container - right  
  8. {  
  9.     background: #FFF;padding: 25 px;border: solid 1 px# CCC;float: left;  
  10. }.container - left  
  11. {  
  12.     width: 20 % ;  
  13. }.container - right  
  14. {  
  15.     width: 70 % ;  
  16. }  
Now let us see the jquery part :

 

  1. First I have included the latest jquery library(cdn) :
    1. <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>  
  2. Inslude the $(document).ready() frunction i have create three variables called p1,p2,p3.In each variable I have stored the html contents. (Here I have stored dummy contents)/
    1. var p1 = "<h2>About Company</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>";  
    2. var p2 = "<h2>Our Products</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>";  
    3. var p3 = "<h2>Our Services</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,</p>"; 
  3. Then I have created event handler click function for each links having id : one,two,three.Inside each click function ,i used the method html() to change the innerHTML of content-right div.
    1. $("#one").click(function()   
    2. {  
    3.     $(".container-right").html(p1);  
    4. });  
    5. $("#two").click(function()  
    6. {  
    7.     $(".container-right").html(p2);  
    8. });  
    9. $("#three").click(function()  
    10. {  
    11.     $(".container-right").html(p3);  
    12. });  

Here #one, #two and #three is the id of each link. And content-right is the classname of the div that we want to change the inner html.When we click on any of the links, click function for the corresponding link will execute and it will change the innerHTML of the content-right div with correspoding contents(p1,p2,p3);

Instead of storing the contents inside the variable we can use database to store, and it can be fetched from database using any serverside programming language using ajax call.

Here is the full code and Screenshot :

  1. <html>  
  2.   
  3. <head>  
  4.     <title>Content Changing using jQuery</title>  
  5.     <style type="text/css">  
  6.         body  
  7.         {  
  8.             background: #DDD;  
  9.         }  
  10.           
  11.         .container  
  12.         {  
  13.             width: 80%;  
  14.             padding: 10px;  
  15.         }  
  16.           
  17.         .container-left,  
  18.         .container-right  
  19.         {  
  20.             background: #FFF;  
  21.             padding: 25px;  
  22.             border: solid 1px #CCC;  
  23.             float: left;  
  24.         }  
  25.           
  26.         .container-left {  
  27.             width: 20%;  
  28.         }  
  29.           
  30.         .container-right {  
  31.             width: 70%;  
  32.         }  
  33.     </style>  
  34.     <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>  
  35.     <script type="text/javascript">  
  36.         $(document).ready(function()  
  37.        {  
  38.             var p1 = "<h2>About Company</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>";  
  39.             var p2 = "<h2>Our Products</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>";  
  40.             var p3 = "<h2>Our Services</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,</p>";  
  41.             $("#one").click(function()  
  42.             {  
  43.                 $(".container-right").html(p1);  
  44.             });  
  45.             $("#two").click(function() {  
  46.                 $(".container-right").html(p2);  
  47.             });  
  48.             $("#three").click(function() {  
  49.                 $(".container-right").html(p3);  
  50.             });  
  51.         }); < /script> < head > < body > < div class = "container" > < div class = "container-left" > < ul > < li > < a id = "one"    
  52.         href = "#" > About Company < /a></li > < li > < a id = "two"  
  53.         href = "#" > Our Products < /a></li > < li > < a id = "three"  
  54.         href = "#" > Our Services < /a></li > < /ul> < /div > < div class = "container-right" > < h2 > Welcome to Some Company Name < /h2> < /div > < /div> < /body > < /html>  

 

about

Thank you,if you have any doubts, please feel free to ask me.
 
Read more articles on jQuery:


Similar Articles