jquery-ui .tabs ajax charger le contenu spécifique de la page?

J'essaie d'utiliser .tabs() de jQuery UI pour obtenir du contenu via AJAX, mais le comportement par défaut est de récupérer le contenu de la page entière. Comment est-ce que j'obtiendrais le contenu d'un #id et/ou de plusieurs # id spécifiques?jquery-ui .tabs ajax charger le contenu spécifique de la page?

Je sens que je vais avoir besoin d'utiliser l'événement load: (http://docs.jquery.com/UI/Tabs#event-load), mais je besoin une aide sur ce comprendre.

Exemple:

La page avec les onglets qui se fait et l'affichage du contenu à onglets. J'ai placé #content après le premier lien #the_tabs à récupérer dans une tentative d'obtenir cette région spécifique du contenu, mais la page entière est encore chargée.

<div id="tabs"> 

    <div id="tabs_display"> 

    </div> 

    <ul id="the_tabs"> 
     <li><a href="testcontent.html#content" title="tabs display"><span>1</span></a></li> 
     <li><a href="testcontent2.html" title="tabs display"><span>2</span></a></li> 
     <li><a href="testcontent.html" title="tabs display"><span>3</span></a></li> 
     <li><a href="testcontent2.html" title="tabs display"><span>4</span></a></li> 
    </ul> 

</div><!-- /#tabs -->

La page en cours de récupération par le balisage précédent:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>Remote HTML Page Example</title> 
    </head> 
    <body> 
     <div id="content"> 
      I want this content 
     </div> 
     <div id="other_stuff"> 
      Not this content  
     </div> 
    </body> 
</html>

la JS (à des fins de configuration):

$(document).ready(function(){ 

    /* Tabs 
    --------------------*/ 
    $(function() { 

     var $tabs = $('#tabs').tabs({ 

     }); 

    }); 

});

Source

2009-10-10 tester

Dans Jquery-UI 1.9, "ajaxOptions" est déprécié; Ainsi, au lieu du code ci-dessous a fonctionné pour moi: (ref: http://jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options-added-beforeload-event)

$(function() { 
    $("#the_tabs").tabs({ 
      beforeLoad: function(event, ui) { 
        ui.ajaxSettings.dataType = 'html'; 
        ui.ajaxSettings.dataFilter = function(data) { 
          return $(data).filter("#content").html(); 
        }; 
      }  
    }); 
});

Source

2013-03-07 11:10:14

merci pour garder cette mise à jour! – tester

Mise à jour: return $ (data) .find ('# content'); a également mieux fonctionné dans mon cas. L'utilisation du filtre ou de la recherche dépend de la structure du code HTML renvoyé: http://stackoverflow.com/questions/4245231/how-do-i-filter-the-returned-data-from-jquery- ajax –

$ (document) .ready (function() {

/* Tabs 
--------------------*/ 
var $tabs = $('#the_tabs').tabs({ 
    ajaxOptions: { 
     dataFilter: function(data, type){ 
      return $(data).filter("#content").html(); 
     } 
    } 
});

});

accessoires Solution à Supavisah dans #jquery sur irc.freenode.net

Source

2009-10-11 01:34:13 tester

J'ai eu la chance en utilisant .Find, plutôt que .filter. Comme ceci:

$(document).ready(function(){ 
$('#the_tabs').tabs({   
     ajaxOptions: { 
       cache : true, 
       dataFilter: function(data){ 
         return $(data).find('#content'); 
       }, 
     } 
});  
});

Source

2011-01-29 17:15:00 wjdennen

jquery-ui .tabs ajax charger le contenu spécifique de la page?

Répondre

Questions connexes