[ACCEPTED]-jquery ajax load certain div-html

Accepted answer

Score: 23

If the div is part of the AJAX response:

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

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.

$.ajax({
  url: "html.htm",
  type: "GET",
  dataType: "html",
  success: function (res) {
       $("#targetDiv").html($(res).find("#sourceDiv")
                                  .addClass('done'))
                     .fadeIn('slow');
  }
});

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>
</ul>

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');
    if(hash==href.substr(0,href.length-4)){
        var toLoad = hash+'.html #ajax_content';
        $('#ajax_content').load(toLoad)
    }                                           
});

// For inner overlay of featured content. 
var href2 = $('.feat_item_link').each(function(){
    var href2 = $(this).attr('href');
    if(hash2==href2.substr(0,href.length-4)){
        var toLoadFeatured = hash2+'.html #ajax_featured_content';
        $('#ajax_featured_content').load(toLoadFeatured);
    }                                           
});

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

    var toLoad = $(this).attr('href')+' #ajax_content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');

    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href'));
    function loadContent() {
        $('#content').delay(1000).load(toLoad,'',showNewContent());
    }
    function showNewContent() {
        $('#content').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').delay(1000).fadeOut('normal');
    }
    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.

Source: stackoverflow.com

Reload a DIV without reloading the whole page

Forward button not working after history.pushState

Get contents of <body> </body> within a string

HTML Web Worker and Jquery Ajax call

Where is the best place to put JavaScript/Ajax in a document?

Time-out with jQuery.get()

HTML5 validation before ajax submit

Jquery function doesn't work after Ajax call

Show spinner and disable page while waiting for ajax request

jquery submit form and then show results in an existing div

Cookie Warning

We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.