www.webdeveloper.com
Results 1 to 1 of 1

Thread: Load in content with AJAX

  1. #1
    Join Date
    Jul 2010
    Posts
    50

    Cool Load in content with AJAX

    Hi there,

    I have been working on a site and have a content box sliding down when someone clicks on the navigation. I want the content of the href="page.php" to be loaded in to the #content div. So the text from #content on the new page to be loaded via AJAX in to the #content of the page we are on.

    Here is my HTML:
    HTML Code:
    <div id="content-container">
          <div id="content">
                  <p>Home</p>
          </div>
          <a href="#" id="close">Close</a>
    </div>
    Code:
    $('ul li a').click(function(){
            $('#content-container').slideDown('5000');
            $('#close').click(function(){
                $('#content-container').slideUp('5000');
            })
    	return false;
    });
    Ok, I have progressed and not far off. I have the content boxex calling in the value of the href but not the #content from that page.

    Code:
    var lastData;
    $(function () {
        $("ul li a").click(function(event) {
            loadData($(this).attr("href"));
            event.preventDefault();
        });
    });
    
    function loadData(data) {
        if(lastData == data) {
            $("#content-container").slideUp();
        } else {
            $('#content').html(data);
            $("#content-container").slideDown();
             $('#close').click(function(){
                  $('#content-container').slideUp('5000');
              })
        }
        lastData = data;
    }
    So I need to adapt the code to call in the contents of #content from the page in the href.
    Last edited by zebedeee; 03-02-2013 at 05:43 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles