web-dev-qa-db-fra.com

jQuery - onglets, utilisez url pour charger le contenu ajax

Donc, mon script ressemble à ceci

function() {
    $( "#tabs" ).tabs();
});

function Wczytaj(link, div_id, parametr1, parametr2, parametr3)
{
   $.ajax(link, { data: { par1: parametr1, par2: parametr2, par3: parametr3 },
   type: "post",
     success: function(data) {
       $('#'+div_id).fadeOut("medium", function(){
       $(this).append(data);
      $('#'+div_id).fadeIn("medium");
     });
  }
 });
}

<div id="tabs">
    <ul>
        <li><a href="#id1" onClick="Wczytaj('trouble2.php','id1','null','null','null');">My id 1</a></li>
        <li><a href="#id2" onClick="Wczytaj('trouble2.php?action=lista','id2','null','null','null');">My id 2</a></li>
        <li><a href="#id3" onClick="Wczytaj('troubl2.php?action=old','id3','null','null','null');">My id3</a></li>
    </ul>

    <div id="id1"></div>
    <div id="id2"></div>
    <div id="id3"></div>
</div>

Et cela fonctionne sans problème, MAIS je veux aussi utiliser une adresse URL pour charger le contenu div Par exemple, http://myurl.com/page.php#id2 devrait charger la page avec les onglets sélectionnés avec id2 - ça marche, mais div est vide à cause de l'attribut onClick. Comment le réparer?

Je m'excuse pour mon anglais

jqueryajaxtabs
10
breq

Vous n'avez pas besoin d'utiliser votre propre fonction pour AJAX charger dans des onglets, jQuery peut le faire pour vous. Il suffit de définir href sur l'URL et de ne pas ajouter le <div>s.

<div id="tabs">
    <ul>
        <li><a href="trouble2.php">My id 1</a></li>
        <li><a href="trouble2.php?action=lista">My id 2</a></li>
        <li><a href="trouble2.php?action=old">My id3</a></li>
    </ul>
</div>

jQuery créera les onglets et automatiquement chargera la page via AJAX. Voir la documentation ici: http://jqueryui.com/tabs/#ajax

Il fera également le <div> pour vous. Dans l'exemple, ils s'appellent ui-tabs-X, où X est l'index de tabulation. Donc, http://myurl.com/page.php#ui-tabs-2 devrait charger la page avec votre deuxième onglet ouvert.

Découvrez la démo de jQuery ici: http://jqueryui.com/resources/demos/tabs/ajax.html#ui-tabs-2

EDIT: Si vous souhaitez exécuter une fonction avant ou après le chargement des onglets distants, l'interface utilisateur jQuery fournit les événements tabsbeforeload et tabsload .

Ils peuvent être liés lors de la création des onglets:

$('#tabs').tabs({
    beforeLoad: function(event, ui){
        alert('loading');
    },
    load: function(event, ui){
        alert('loaded');
    }
});

Ou ils peuvent être liés après:

$('#tabs').on('tabsbeforeload', function(event, ui){
    alert('loading');
});

$('#tabs').on('tabsload', function(event, ui){
    alert('loaded');
});
20
Rocket Hazmat

Réinitialisez l'URL href avant de charger le contenu de l'onglet ajax dans Jquery:

$( "#pending_recs" ).tabs({
    beforeLoad: function( event, ui ) {
        var filter_url = get_url();
        var url_str = site_url+'/admin/pending_recs/'+filter_url+"/0";

        $("#pending_recs .ui-tabs-nav .ui-state-active a").attr('href',url_str);

        ui.panel.html('<div class="loading">Loading...</div>');

        ui.jqXHR.error(function() {
            ui.panel.html('<div align="center"><p>Unable to load the content, Please <a href="javascript:void(0)" onclick="return load_contents();">Click here to Reload</a>.</p></div>');
        });
    }
    ,load:function( event, ui ) { /* After page load*/  }
});
1
ShivarajRH

Si vous ne définissez que l'attribut href de chacun des liens d'onglets vers l'URL ajax que vous êtes censé charger, cela devrait fonctionner.

Si vous ne le souhaitez pas, supprimez les attributs onClick. Le problème est que lorsque la page charge le déclencheur pour la sélection d'un onglet particulier tel que #id2, cela se produit avant que les éléments de clic ne soient liés. Avant cela, vous devez lier les gestionnaires de clics et appeler le correspondant lorsque l’onglet en question est sélectionné par le fragment.

0
Explosion Pills