Onglet JQuery et Postback

On considère l'utilisation de JQuery UI et de sa fonctionnalité TABS permettant de générer les onglets.

 

L'objectif est de faire en sorte de persister l'onglet sélectionné avant un postback.

 

Solution toute trouvée... Un HIDDENFIELD pour persister le nom du dernier onglet sélectionné...

 

Page ASPX :

[dans le head]
<script type="text/javascript" src="/js/jquery-ui-1.8.2.min.js"></script>
<link type="text/css" rel="Stylesheet" href="../js/css/ui-lightness/jquery-ui-1.8.2.custom.css" />

[...]

<div id="tabs">
    <ul>
        <li><a href="#Fiche1" >Fiche Generale</a></li>
        <li><a href="#Fiche2" >Fiche Info</a></li>
        <li><a href="#Fiche3" >Fiche Photo</a></li>
    </ul>

    <div id="Fiche1">
    [....]
    </div>

    <div id="Fiche2">
    [....]
    </div>

    <div id="Fiche3">
    [....]
    </div>

</div>

<!-- génération automatique de nos onglets grâce à JQuery UI -->
<script type="text/javascript">
$(function() {
   $("#tabs").tabs();   
});

</script>

[...]

 

Dans l'exemple ci-dessus, tout est beau :-)

Ca donnera quelque chose comme ça :

 

 

Le problème maintenant, c'est que se passe-t-il dans la FicheInfo j'ai un bouton permettant de Sauvegarder ou autre action qui provoque un Post ? Réponse : le page sera réinitialisée à l'onglet 1 (Fiche Generale) à chaque fois... Rapidement frustrant pour l'utilisateur...

 

La solution que j'ai finalement sélectionnée consiste à utiliser le ViewState pour conserver l'élément sélectionné et donc utiliser un HIDDENFIELD que ASP.NET va automatiquement persister entre 2 PostBack...

Il suffit de faire en sorte que pour chacun de nos liens <a> dans nos éléments de listes <li> de notre définition d'onglets #tabs, on communique dans le HiddenField la valeur du lien (href) sélectionné...

1) Ajouter en bas de notre page ASPX, avant le javascript appelant TABS, un HiddenField.
Exemple :

<asp:HiddenField ID="HiddenFieldLastTab" runat="server" Value="Fiche1" />  <!-- on l'initialise à Fiche 1, notre premier onglet par défaut ! -->

2) Ajouter simplement les événement onclick à chaque lien HREF contenu dans nos LI. :

    <script type="text/javascript">
        $(document).ready(function() {
            $("#tabs li a").each(                  // Pour chaque lien href de chaque li de notre div dont l'id est "tabs"
                function() {

                    $(this).click(function() {
                              $('#<%=HiddenFieldLastTab.ClientID%>').val($(this).attr('href'));   // Ajouter au lien href trouvé, un événement sur le onclick provoquant la transmission de la valeur href du lien dans notre champ caché.
                      });   
                }
             )     
         });
    </script>

3) Modifier l'appel d'initialisation de nos onglets pour qu'il vérifie si la valeur de HiddenField est communiquée et si oui, qu'il modifie l'onglet sélectionné.

<script type="text/javascript">
$(function() {
   var $ tabs = $("#tabs").tabs();   
  
   if ($('#<%=HiddenFieldLastTab.ClientID %>').val().length > 0) {
        $tabs.tabs('select', '<%=HiddenFieldLastTab.Value %>');
        $('<%=HiddenFieldLastTab.Value %>').click();
    }
});

 

C'est ok ! Ca marche nickel :-)

 

Voici le code final :

[dans le head]
<script type="text/javascript" src="/js/jquery-ui-1.8.2.min.js"></script>
<link type="text/css" rel="Stylesheet" href="../js/css/ui-lightness/jquery-ui-1.8.2.custom.css" />

<script type="text/javascript">
        $(document).ready(function() {
            $("#tabs li a").each(                  // Pour chaque lien href de chaque li de notre div dont l'id est "tabs"
                function() {

                    $(this).click(function() {
                              $('#<%=HiddenFieldLastTab.ClientID%>').val($(this).attr('href'));   // Ajouter au lien href trouvé, un événement sur le onclick provoquant la transmission de la valeur href du lien dans notre champ caché.
                      });   
                }
             )     
         });
</script>

 

[...]

<div id="tabs">
    <ul>
        <li><a href="#Fiche1" >Fiche Generale</a></li>
        <li><a href="#Fiche2" >Fiche Info</a></li>
        <li><a href="#Fiche3" >Fiche Photo</a></li>
    </ul>

    <div id="Fiche1">
    [....]
    </div>

    <div id="Fiche2">
    [....]
    </div>

    <div id="Fiche3">
    [....]
    </div>

</div>

<asp:HiddenField ID="HiddenFieldLastTab" runat="server" Value="Fiche1" />  <!-- on l'initialise à Fiche 1, notre premier onglet par défaut ! -->

<!-- génération automatique de nos onglets grâce à JQuery UI -->

<script type="text/javascript">
$(function() {
   var $ tabs = $("#tabs").tabs();   
  
   if ($('#<%=HiddenFieldLastTab.ClientID %>').val().length > 0) {
        $tabs.tabs('select', '<%=HiddenFieldLastTab.Value %>');
        $('<%=HiddenFieldLastTab.Value %>').click();
    }
});

[...]

A propos de l'auteur

 

Développeur depuis plus de 10 ans, j'ai commencé la programmation dès l'âge de 9 ans sur un PC 8088 !!

GW-Basic, Pascal, Turbo Pascal, Delphi ont fait mes bases... Puis Java , bien plus tard... Pour enfin avoir découvert le C#... Quel plaisir de développer avec ce langage des solutions ASP.NET... Le développement Web comme jamais je ne pouvais l'imaginer possible :)

Aujourd'hui titulaire du MCSD VS 6.0, MCAD .NET, et MCT ...

Sur ce blog, je souhaite partager des choses simples mais efficaces... Des problèmes de tous les jours que l'on peut rencontrer et qu'il est simple de régler :)

Mes certifications

Month List