jQuery carga ajax cierta div

Question

mi pregunta es muy simple, ¿cómo puedo recuperar cierta div con jquery ajax COMAND

$.ajax({ 
     url: "test.html", 
     success: function(){ 
      $(this).addClass("done"); 
     } 
    }); 

como con la carga

$('#targetDiv').load('http://localhost/test.html #sourceDiv'); 

Answer 1

Si el div es parte de la respuesta AJAX:

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

Answer 2

Aquí hay una versión ligeramente diferente. También su div de destino puede estar oculto por defecto, así que he agregado un efecto Fade In para mostrarlo. Si su html va a cambiar, es posible que desee agregar un caché: falso.

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

Si usted está interesado puede echar un vistazo a cómo jQuery que hace el método de carga aquí jQuery Source Viewer

Answer 3

Este es un ejemplo que utilizo en mi sitio para la navegación.

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

Para el javascript, puede intentarlo.

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; 
}); 

La identificación de #load simplemente usa un gif animado en el CSS.

Coloque el javascript en $ (document) .ready() y debe estar todo listo.