Using AJAX to reload only a Div

April 24, 2017
AJAX, Developers
LinkedInTwitterFacebookEmail

Ajax has become very popular because of the ease of use it incorporates into a website for the user. It isn’t a single language, but more a conglomeration of css, ajax, javascript and html. Basically, I’m going to show you how to get the iframe effect (not reloading the whole page, only part of it) but without the iframe (because really, no one should be using those anymore!).

If you’re looking to load a Div based on specific timing intervals, check out:

Refresh a Section of a Page at Specific Intervals 

Reloading AJAX - Coding

First, we have to set up our page. You will need to include a link to a jquery library source of your choice. I use google because, well, I like google and it’s easy:

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">

Just paste that code between the tags of your page and you’ll be good to go. Second, you need to create divs and name them with IDs. If you don’t know how to do this, just check out some CSS articles. You need to create two pages, each one with the same div ID. I used “main” as my div ID below.

PAGE 1

1
2
<a id="detailed">LINK</a>
<div id="main">Hello - This is my main Div that will be reloaded using Jquery.</div>

PAGE 2 (saved as “property-detailed.php”)



1
<div id="main">Hello - This is the div that will be loading into the first div</div>



The actual coding is really very simple:

1
2
3
4
5
6
7
8
9
<script type="text/javascript" language="javascript">
$(document).ready(function() { /// Wait till page is loaded
   $('#detailed').click(function(){
      $('#main').load('property-detailed.php #main', function() {
           /// can add another function here
      });
   });
}); //// End of Wait till page is loaded
</script>

What is happening here??? Don’t worry! I’ll walk you through it. First, as with all jquery coding, we encase the actual coding into the “$(document).ready” function. This makes sure that the jquery coding doesn’t try (and fail) to work before the page is loaded.

Then the following is done: We take the Div ID “detailed” (this is a div surrounded by < a > tags on page one) and when it is clicked, we want the following function to run:
The Page 1 Div ID “main” will load the Page 2 (“property-detailed.php”) but only the Div ID “main” from that page. When that is done, I left a space for adding another function after the new Div loads.

That’s it! When you boil it down, it really is just one line of code. A nice little function for a nice little trick.

Just a minor note: you cannot do this cross-site. In other words, you can’t load part of another website into your website using this JQuery function.

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Comments