Jquery/Ajax question – loading the content of a div on one page into a div on home page

4 Views

I really hope you can help me out here. I’m making a wordpress site, with 6 pages + the home page. The 6 pages have content contained within a div called #container. The content includes things like image slideshows etc, that all use various code to operate and function correctly.

On the front page, I have an image-based navigation menu, which I have inserted into a widget within the header via an html leaf. Here’s the code:

Read More
<ul id="navlist">
   <li id="webdesign"><a href="http://mysite.com/web-design/"></a></li>
   <li id="branding"><a href="http://mysite.com/branding/"></a></li>
   <li id="architecture"><a href="http://mysite.com/architecture/"></a></li>
   <li id="writing"><a href="http://mysite.com/writing/"></a></li>
   <li id="blog"><a href="http://mysite.com/blog/"></a></li>
   <li id="contact"><a href="http://mysite.com/contact/"></a></li>
</ul>

What I want to do is every time one of these 6 links is clicked, rather than loading the entire page, I just want to load the contents of the div #container from that particular page into the div #container on the home page, or even just load the and also keep all the rich content within that div doing its thing.

I am a total newbie when it comes to jquery/ajax, and have read and tried out a million different snippets of code, some of which half-work, and most of which don’t work at all. I don’t know if this is relevant, but the #container div on the site pages contain a lot of other divs, all holding different types of dynamic content.

If anyone can help me, I’ll be extremely grateful!!!

Thanks

Eleanor

Post Views: 4

Related posts

Leave a Reply

2 comments

  1. You could try to do something like this. I don’t know how well this will work with the content on the other pages though without seeing it

        $(function () {

        //Stop caching if page is likely to change often
        $.ajaxSetup({
            cache: false
        });

        $('#navlist a').click(function (evt) {
           //Grab url from link
           var url = $(this).attr('href'); 
           //This will load the entire page but only select the #container 
           $('#container').load(url +' #container'); 
           evt.preventDefault(); //Stop yourself from navigating to that page
        });

    });

   <ul id="navlist">
      <li id="webdesign"><a href="Secondary.aspx">webdesign</a></li>
   </ul>

   <div id="container"></div>

  2. @eleanonr , you can always have a place holder for your elements and say .html finally

    for example you have a place holder for ajax results

    <div "ajaxResults"> </div>

    once the ajax is completed you can target that div and paint it , so that it won’t refresh the complete page.

    $.ajax({
  url: "test.html"
  success: function(results){
   $("#ajaxResults").html(results);
  }
});

    please let me know if you want any furthur help