Le contenu de Tab1 est chargé par Ajax de l'URL distante. Lorsque TAB1 est sélectionné, je dois passer à Tab2 puis sur Tab1 pour rafraîchir le contenu chargé.
Comment créer du contenu chargé de rafraîchir le tab1 lorsque vous cliquez sur son onglet?
12 Réponses :
sur le "succès" de l'appel JQuery, vous pouvez remplacer le code HTML avec le nouveau HTML.
Vous n'avez posté aucun code pour que vous puissiez déjà le faire, mais; p>
success: function(msg) {
$('.TabOne').html(msg);
}
Où mettre ce code? Je n'ai pas de classe Tabone. Veuillez vous reporter au code HTML ajouté ci-dessus.
J'ai eu le même problème avec un contenu AJAX dans une onglet JQuery.
L'onglet charge un graphique à flot, mais cela ne fonctionnerait que lorsqu'il s'agissait de l'onglet que vous avez chargé.
J'ai corrigé cette Avec une sorte de travail ringard autour, mais il était efficace.
J'ai pris tout mon code JS FLOT et je l'ai largué dans un fichier distinct et mis dans une fonction i puis j'ai ensuite fait ce qui suit dans l'onglet Ceci a permis à FLOT de faire sa chose puisque le document prêt dans l'onglet avait déjà terminé à l'époque. L'AJAX $ .GETScript a été activé. Vous pouvez ensuite mettre l'AJAX dans un fichier .Click pour cet onglet.
1) Lorsque vous définissez vos onglets qui chargent le contenu AJAX, assurez-vous d'utiliser un attribut de titre, ce qui met cette valeur dans l'ID de DIV chargé. Dans mon cas, le titre était "Alert-Tab". Sinon, la jQuery générée DIV a un identifiant arcanique: 2) utilisez-le maintenant à l'intérieur de tout événement que vous souhaitez recharger l'onglet: p> var href = "/alert/index/";
$("#alert-tab").load(href);
Les identifiants des panneaux d'onglets créés automatiquement sont déterminés par la valeur de l'attribut Aria-contrôles sur le
Pour ce droit, vous devez simplement enregistrer Global Link lors de la création:
$('#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;
})
Un autre moyen simple d'actualiser un onglet dans JQuery est d'utiliser la méthode de chargement: La valeur numérique est l'index à base de zéro de l'onglet que vous souhaitez rafraîchir.
Voici comment je l'ai fait. Une chose à noter est que j'ai trouvé les identifiants attribués aux divs rendant le contenu de chaque onglet à nommer de manière assez prévisible et de correspondre toujours à la HREF de l'ancre dans l'onglet sélectionné. Cette solution dépend de celle-ci, elle pourrait donc être critiquée comme "trop fragile" que je suppose. La forme que 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 faire le.
lutté avec ce problème parce que les onglets semblent tuer des événements click ... Donc je viens d'utiliser MouseDown. Cette question a été postée il y a quelque temps, mais j'espère que cela aide quelqu'un.
Vous pouvez utiliser .on () au lieu de .Delegate () à partir de v1.7
OK Mettez les choses ensemble Je dispose de cela pour l'événement de clic des onglets JQuery, le DIV environnant a un identifiant d'onglets, comme celui-ci: Les suivants sont exécutés dans le document prêt Fonction: p> $("#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.");
}
}
});
Je sais que ce lien est vieux, mais j'ai rencontré la même situation. J'ai essayé de comprendre et d'intégrer tout ce qui a été indiqué ici, mais cela ne fonctionnait toujours pas ou cela meck up ce que j'ai.
J'ai une boîte de dialogue modale avec 4 onglets, les valeurs d'index 0,1,2,3 et je voulais ouvrir l'onglet 1, donc dans mon code, il existe la ligne suivante: P>
// this forces tab content update
$("#tabs").tabs('select',1);
$("#tabs").tabs('select',2);
$("#tabs").tabs('select',1);
Vous pouvez simplement supprimer le contenu de l'onglet qui a été cliqué et le recharger avec le même contenu (ou tout ce que vous voulez). Par exemple: Dans ce cas, par exemple, si le deuxième onglet est cliqué, le panneau est vidé et rechargé avec content2.php
Étant donné que cette question a été répondue à plusieurs reprises sur une longue période, il ne pouvait pas nuire à poster une mise à jour pour des versions plus récentes de JQuery. J'utilise JQuery-UI 1.10.3 et les estimations Trevor Connaires de Connaires ne semblent plus être valables.
Cependant, son approche m'a aidé à modifier. Disons que l'onglet que je souhaite actualiser s'appelle "tab_1" (ID de l'élément de la liste) dans ma méthode javascript pour rafraîchir la teneur en onglet, j'écris (en utilisant jQuery): P> var tab = $('#tab_1');
var id = tab.attr('aria-controls');
var url = $('a',tab).attr('href');
$("#"+id).load(url);
J'ai trouvé un travail autour de cette question. Après avoir essayé toutes ces méthodes, aucune d'entre elles n'a travaillé pour moi. Donc, pour la simplicité, j'ai proposé cette solution et, bien que ce n'est pas le moyen le plus élégant, cela fait toujours le travail.
Définissez d'abord la mise au point sur une autre onglet, puis ramenez la mise au point sur l'onglet que vous souhaitez actualiser.
Ce serait génial si l'une des réponses avait été marquée comme celle qui a fonctionné.