[ACCEPTED]-jquery ajax load certain div-html

Accepted answer
Score: 23

If the div is part of the AJAX response:

    url: 'test.html',
    dataType: 'html',
    success: function(html) {
        var div = $('#sourceDiv', $(html)).addClass('done');


Score: 7

Here is a slightly different take on it. Also 6 your target div maybe hidden by default 5 so I've added in a Fade In affect to show 4 it. If your html is going to change then 3 you might want to add in a cache: false.

  url: "html.htm",
  type: "GET",
  dataType: "html",
  success: function (res) {

If 2 you're interested you can take a look at 1 how jQuery does the load method here jQuery Source Viewer

Score: 2

Here is an example that I use on my site 5 for the navigation.

<ul id="nav">        
    <li><a name="portfolio" href="portfolio.php" class="ajax_nav">PORTFOLIO</a></li>
    <li><a name="biography" href="biography.php" class="ajax_nav">BIOGRAPHY</a></li>

For the javascript you 4 can try this.

var hash = window.location.hash.substr(1);
var hash2 = window.location.hash.substr(1);

// Menu items to lower main content
var href = $('.ajax_nav').each(function(){
    var href = $(this).attr('href');
        var toLoad = hash+'.html #ajax_content';

// For inner overlay of featured content. 
var href2 = $('.feat_item_link').each(function(){
    var href2 = $(this).attr('href');
        var toLoadFeatured = hash2+'.html #ajax_featured_content';

// For Bottom Navigation
$('#nav li a').click(function(){

    var toLoad = $(this).attr('href')+' #ajax_content';
    $('#wrapper').append('<span id="load">LOADING...</span>');

    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href'));
    function loadContent() {
    function showNewContent() {
    function hideLoader() {
    return false;

The id of #load simply uses 3 an animated gif in the CSS.

Place the javascript 2 in the $(document).ready() and you should 1 be all set.

More Related questions