Discussion :

[Alexdezark]

Bonjour à tous,

Soucieux de mettre à jour des sites vers les nouvelles versions de jQuery et jQuery UI je me suis lancé dans une sacrée galère...

Je pensai bêtement que jQuery garantissait une certaine compatibilité ascendante vers les nouvelles versions et c'est en rentrant un peu dans les détails que je me suis apperçu qu'il n'en est rien...

Je me trouve donc devant pas mal de problèmes, certains que j'ai pu régler, et certains absolument pas.

Après beaucoup de recherches j'ai pu trouver ceci : http://jqueryui.com/upgrade-guide/1.10/
(j'indique ce lien car je pense qu'il peut bien aider)

Mais c'est franchement un peu léger pour s'en sortir, avant quand on arrivait sur l'API UI tabs, on trouvait certaines explications genre "comment récupérer l'index du tab courant" etc...
Il ne semble y avoir maintenant plus rien de tout ça.

Voilà donc ce que j'ai réussi à résoudre (je rappelle que je parle des TABS) :

l’événement "select:function(event, ui)" devient "beforeActivate:function(event, ui)".

Et là ou l'on utilisait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
select:function(event, ui){
myIndex = ui.index;
}

il faut maintenant utiliser :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
beforeActivate:function(event, ui){
myIndex = ui.newTab.index();
}

En revanche ce que je n'arrive absolument pas à adapter c'est ceci (tel que c'était dans ma version précédente) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
select:function(event, ui){
 
var tabUrl=$.data(ui.tab, 'load.tabs').split("&");
url=tabUrl[0];
 
$(this).tabs("url", ui.index, url+"&profil="+$("#profil").val());
 
}

Dans ce code je récupérais l'url du tab sélectionné et je modifiais la variable GET avant de recharger le panel.

Aujourd'hui, je suis complètement bloqué à ce stade :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
beforeActivate:function(event, ui){
 
myIndex = ui.newTab.index();
 
var tab = $(this).data('uiTabs', 'loadTabs');
 
var txt = "";
for(i in tab) txt += i+"=>"+tab[i]+"\n";
 
alert(txt);
 
}

Comme vous le voyez, j'essaye de récupérer des renseignements me permettant d'avancer, mais je n'arrive à rien.

Quelqu'un peut-il m'aider à débloquer cette situation ?
C'est à dire : récupérer l'url du tab puis indiquer une nouvelle url pour ce tab.

Merci d'avance

[vrd-74]

Bonjour,

Tout d'abord je partage ton désarroi face à ces nouvelles versions. A moins d'avoir réellement le besoin d'une fonctionnalité inédite aux nouvelles versions, il n'est pas utile de mettre à jour ses versions de jQuery/jQuery UI, à moins d'aimer les migraines carabinées.

Pour répondre à ta question, il me semble qu'il suffit de renseigner l'attribut href du lien de ton tab.

[Alexdezark]

Bonjour vrd-74 et merci de ta réponse,

J'aime les migraines carabinées

Non sans rire, j'ai voulu mettre à jour ma version de jQuery et jQuery UI vers la dernière version car c'est une opération que je fais régulièrement dans le cadre de la maintenance annuelle des sites de mes clients.

Parce que un beau jour on veut ajouter une fonctionnalité, utiliser une propriété ou un widget qui n'existait pas dans la version que l'on utilise et on se retrouve avec des incompatibilités dans tous le code...
Même pas forcement quelque chose qui n'existait pas à l'époque mais par exemple on pensais ne jamais avoir besoin des sliders, on ne l'inclus pas dans le paquet téléchargé et on est dans la mouise pour télécharger une version identique incluant les sliders le jour ou le client VEUT un slider.

Pour en revenir au sujet, j'ai résolu le problème (pour le moment) comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
beforeActivate:function(event, ui){
myIndex = ui.newTab.index() + 1;
 
myTab = $(this).find('ul li a[id="ui-id-'+myIndex+'"]').attr("href").split("&");
myTab[1] = "profil="+$("#profil").val();
href = myTab.join("&");
$(this).find('ul li a[id="ui-id-'+myIndex+'"]').attr("href", href);
},

J'avais commencé à chercher dans cette direction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
beforeActivate:function(event, ui){
myIndex = ui.newTab.index();
 
var tab = $(this).data('uiTabs').tabs[myIndex];
myTab = tab.outerHTML.split("href=");
tabHref = myTab[1].split('"');
tabVarGet = tabHref[1].split("&");
tabVarGet[1] = "profil="+$("#profil").val();
tabHref[1] = tabVarGet.join("&");
myTab[1] = tabHref.join('"');
outer = myTab.join("href=");
 
tab.outerHTML = outer;
},

mais premièrement ça plante à la fin et ensuite je suis pas sûr que ce soit beaucoup plus efficace...

Je laisse encore ce Post un petit peu en "non résolu", car je voudrais bien quelques avis.

Bonne journée à tous

[danielhagnoul]

Bonsoir

Pour du contenu AJAX, il y a une démonstration qui ne vous aidera pas, par contre dans l'API il y a l'événement beforeLoad en plus de beforeActivate.

[Alexdezark]

Merci Daniel !

Vous avez toujours le petit truc qui va bien

En effet avec ce code cela fonctionne parfaitement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
beforeLoad:function(event, ui){
myUrl = ui.ajaxSettings.url;
ui.ajaxSettings.url = myUrl+"&profil="+$("#profil").val();
}

C'est beaucoup plus propre et qui plus est j'avais des bugs lors de rechargement comme celui-ci par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var selectedIndex=$tabs.tabs("option", "active");
$tabs.tabs( "option", "collapsible", true);
$tabs.tabs("option", "active", false);
$tabs.tabs("option", "active", selectedIndex);
$tabs.tabs( "option", "collapsible", false);

Merci encore et bonne journée.