jQuery ajax लोड निश्चित div

Question

मेरे सवाल का बहुत ही सरल है कि कैसे मैं लोड

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

Answer 1

तो div AJAX प्रतिक्रिया का हिस्सा है के साथ की तरह jQuery ajax comand

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

साथ कुछ div पुनः प्राप्त कर सकते हैं:

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

Answer 2

यहां थोड़ा अलग है। इसके अलावा आपका लक्ष्य div डिफ़ॉल्ट रूप से छुपाया जा सकता है, इसलिए मैंने इसे दिखाने के लिए फीड इन प्रभाव में जोड़ा है। यदि आपका एचटीएमएल बदलने जा रहा है तो आप कैश में जोड़ना चाहेंगे: झूठी।

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

आप रुचि रखते हैं, आप कैसे jQuery यहां लोड विधि jQuery Source Viewer

Answer 3

यहाँ करता है पर एक नज़र ले जा सकते हैं एक उदाहरण है कि मैं नेविगेशन के लिए अपनी साइट पर इस्तेमाल करते हैं।

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

जावास्क्रिप्ट के लिए आप इसे आजमा सकते हैं।

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

#load की आईडी सीएसएस में एनिमेटेड gif का उपयोग करती है।

$ (दस्तावेज़) .ready() में जावास्क्रिप्ट रखें और आपको सभी सेट होना चाहिए।