web-dev-qa-db-fra.com

Actualiser le contenu de l'onglet lors d'un clic dans les onglets de l'interface utilisateur JQuery

Le contenu de TAB1 est chargé par ajax à partir de l'URL distante. Lorsque TAB1 est sélectionné, je dois basculer sur TAB2 puis sur TAB1 pour actualiser le contenu chargé.

Comment rendre le contenu chargé d'actualisation de TAB1 lorsque vous cliquez sur son onglet?

Edit: HTML code est comme ci-dessous

<div id="tabs">
    <ul>
        <li><a href="url1">Tab1</a></li>
        <li><a href="url2">Tab2</a></li>
    </ul>
</div>
<script type="text/javascript"> 
    $(document).ready(function(){
        $tabs = $("#tabs").tabs({
            select: function(event, ui) {
                $('a', ui.tab).click(function() {
                    $(ui.panel).load(this.href);
                    return true;
                });
            }
        });
});
</script>
jqueryjquery-ui-tabs
12
jack

Un autre moyen simple d’actualiser un onglet dans jQuery consiste à utiliser la méthode load:

$('#my_tabs').tabs('load', 0);

La valeur numérique est l'index à base zéro de l'onglet que vous souhaitez actualiser. 

18
Scott Pier

1) Lorsque vous définissez vos onglets qui chargent du contenu ajax, veillez à utiliser un attribut title, qui place cette valeur dans l'id de la div chargée. Dans mon cas, le titre était "alert-tab". Sinon, la div générée par jquery a un ID arcane:

<li><a href="/alert/index" title="alert-tab">Alert</a></li>

2) Maintenant, utilisez ceci dans l’événement où vous souhaitez recharger l’onglet:

var href = "/alert/index/";  
$("#alert-tab").load(href);
9
jj2

Vous pouvez simplement supprimer le contenu de l'onglet sur lequel vous avez cliqué et le recharger avec le même contenu (ou tout ce que vous voulez). Par exemple:

$( "#tabs" ).tabs({                                                                  
  activate:function(event,ui){ 
    //Remove the content of the current tab
    ui.newPanel.empty();
    //load the file you want into current panel
    ui.newPanel.load('content'+(ui.newTab.index()+1)+'.php');                                                 
  }                                                                          
});

Dans ce cas, par exemple, si vous cliquez sur le deuxième onglet, le panneau est vidé et rechargé avec content2.php

4
Ehsan Khaveh

Voici comment je l'ai fait. Une chose à noter est que j'ai trouvé les ID attribués aux DIV rendant le nom de chaque onglet nommé assez prévisible et correspondant toujours au href de l'ancre dans l'onglet sélectionné. Cette solution dépend de cela, elle pourrait donc être qualifiée de "trop ​​fragile", je suppose. Le formulaire dont je tire le code est une sorte de contrôle réutilisable qui peut être hébergé ou non dans un onglet. C'est pourquoi je vérifie la valeur de parentID avant de lancer le fichier .each ().

//I get the parentID of the div hosting my form and then use it to find the appropriate anchor.
var parentID = '#' + $('#tblUserForm').parent().attr('id');
//Trying to enable click on an already selected tab.
if(parentID == '#ui-tabs-3') //The value of var parentID
{
     $('#tabs a').each(function() {
          if($(this).attr('href') == parentID)
          {
              $(this).bind('click', function() {  
                  $(parentID).load(your_URL_here);
              });
          }
    });
}
2
Trevor Conn

lutté avec ce problème parce que les onglets semblent tuer les événements de clic ... donc je viens d'utiliser mousedown. 

$("#tabs ul.ui-widget-header")
 .delegate("li.ui-tabs-selected","mousedown",function(){
   $tabs.tabs("load",$(this).index());
 });

cette question a été postée il y a quelque temps, mais j'espère que cela aidera quelqu'un.

2
baberlicious

Pour ce faire, il vous suffit de sauvegarder le lien global lors de la création:

ui_tabs = $( "#tabs" ).tabs();

Après tout, on peut l'utiliser avec une charge d'API

Par exemple: transformer tous les liens dans les sections de page des onglets

$('#tabs .paging a').click(function(e){
    var selected = ui_tabs.tabs('option', 'selected');
    ui_tabs.tabs('url', selected, e.target.href);
    ui_tabs.tabs('load', selected);
    return false;
})
1
emapple

Ok pour mettre les choses ensemble, j'ai ceci pour l'événement click des onglets jquery, la div environnante a un identifiant d'onglets, comme ceci:

<div id="tabs">

Les éléments suivants sont exécutés dans la fonction de préparation de document:

 $('#tabs > ul > li > a').each(function (index, element) {
    $(element).click(function () {         
        $('#tabs').tabs('load', index); 
    });

Il enregistre pour chaque onglet l'événement click, avec l'index de l'onglet grâce à Scott Pier

J'ai aussi cela dans mon document prêt à empêcher la mise en cache

 $("#tabs").tabs({
    ajaxOptions: {
        cache: false,
        error: function (xhr, status, index, anchor) {
            $(anchor.hash).html(
      "Couldn't load this tab. We'll try to fix this as soon as possible. " +
      "If this wouldn't be a demo.");
        }
    }
});
1
Jamee

J'ai eu le même problème avec du contenu ajax dans un onglet jQuery.

L'onglet charge un graphe de flot, mais cela ne fonctionne que s'il s'agit de l'onglet que vous avez chargé en premier.

J'ai corrigé cela avec une sorte de travail au fromage, mais c'était efficace.

J'ai pris tout mon code Flot JS et l'ai vidé dans un fichier .js séparé et mis dans une fonction 

function doFlotGraph(data){
    $.plot({plotcode});
};

J'ai ensuite fait ce qui suit dans l'onglet

$.getScript('url/doFlotGraph.js',function(){
    doFlotGraph(data);
});

Cela permettait à Flot de faire son travail puisque le document prêt dans l'onglet était déjà terminé au moment où le ajax $ .getScript était activé.

Vous pouvez ensuite mettre le ajax dans un .click pour cet onglet.

1
Calocher

Étant donné que cette question a reçu de nombreuses réponses au cours d’une longue période, il n’est pas inutile de publier une mise à jour pour les versions plus récentes de jQuery. J'utilise jQuery-ui 1.10.3 et les hypothèses faites par Trevor Conn semblent ne plus être valides . Cependant, son approche m'a aidé avec quelques modifications. Disons que l'onglet que je souhaite actualiser s'appelle "tab_1" (id de l'élément de la liste)

<div id="tabs" class="tabs">
    <ul>
        <li id="tab_1">
            <a href="my_link">tab one</a>
        </li>
        ...(other tabs)...
    </ul>
</div>

Dans ma méthode javascript pour actualiser le contenu de l'onglet, j'écris (en utilisant jquery):

var tab = $('#tab_1');
var id = tab.attr('aria-controls');
var url = $('a',tab).attr('href');
$("#"+id).load(url);

L'attribut "aria-controls" contient l'identifiant de la div contenant le contenu de l'onglet. "area-controls" aurait pu être un nom plus logique, mais en tant qu'enthousiaste de l'opéra, je ne me plains pas. :-)

0
Kristiaan

Sur le "succès" de l'appel jQuery, vous pouvez remplacer le code HTML par le nouveau code HTML.

Vous n’avez pas posté de code, vous le faites peut-être déjà mais;

success: function(msg) {
    $('.TabOne').html(msg);
}

ce qui précède fonctionne si vous retournez du code HTML. Si vous retournez un objet, vous devrez peut-être effectuer un travail supplémentaire, mais dans l’ensemble, ce qui précède devrait fonctionner.

Edit Je devrais également mentionner que .TabOne est un nom de classe. Ainsi, le détenteur du contenu de votre onglet doit avoir une classe de TabOne pour que le code ci-dessus fonctionne.

N'oubliez pas que le nom de la classe ne doit pas nécessairement exister en tant que style pour que cela fonctionne.

Modifier 2

Hmmm, je vois ce que vous essayez de faire maintenant et je suis un peu perdue. Fera des tests et pourrait être en mesure de vous contacter.

Pardon.

0
griegs

Je sais que ce lien est ancien, mais je me suis retrouvé dans la même situation. J'ai essayé de comprendre et d'incorporer tout ce qui était dit ici, mais cela ne fonctionnait toujours pas, sinon cela gâcherait tout ce que j'avais. 

J'ai un dialogue modal avec 4 onglets, les valeurs d'index 0,1,2,3 et je voulais ouvrir sur l'onglet 1 afin que dans mon code il y ait la ligne suivante:

    $("#tabs").tabs('select',1);

et l’onglet 1 contiendrait toujours les données d’affichage précédentes (contenu HTML ajax) jusqu’à ce que je clique sur un onglet différent (par exemple, l’onglet 2), puis reviendrais (à l’onglet 1) ... alors j’ai fait ce qui suit:

    // this forces tab content update
    $("#tabs").tabs('select',1);
    $("#tabs").tabs('select',2);
    $("#tabs").tabs('select',1);

et ça a marché :)

0
Terry

J'ai trouvé un travail autour de ce problème. Après avoir essayé toutes ces méthodes, aucune d’entre elles n’a fonctionné pour moi. Donc, pour des raisons de simplicité, j'ai proposé cette solution. Même si ce n'est pas la manière la plus élégante, elle fait toujours le travail.

Définissez d'abord le focus sur un autre onglet, puis redéfinissez le focus sur l'onglet que vous souhaitez actualiser. 

$("#myTabs").tabs("option", "active", 0);  
$("#myTabs").tabs("option", "active", 1);
0
C.Perez