Onglets Javascript: appel d'événement onclick

Question

J'ai du code à changer. il est construit par d'autres, et pas très soigné ...

Il y a un tabcontrol javascript, contenant 4 onglets, qui contient des gridviews. Tous les 4 gridviews sont construits pendant le chargement de la page, mais je veux qu'ils se chargent, lorsque vous activez les onglets (comme il est possible de regarder le côté, alors que vous n'avez pas besoin des grilles spécifiques)

Donc, ma question est: comment appeler un événement (qui charge le gridview) à partir d'un onglet javascript?

comment les onglets sont générés: (code généré, je sais, horrible)

 
var obj = 0; 
var oid = 0; 
var otb = 0; 
var myTabs = new Array(); 
var myTabitems = new Array(); 
var myTabitem = new Array(); 
var myTabContent = new Array(); 
var myLists = new Array();
 

function showTabContent(tab) 
{ 
    tb = tab.obj; 
    id = tab.nr; 
    if (myTabs[tb].oid != -1) 
    { 
     myTabs[tb].myTabContent[myTabs[tb].oid].style.display = 'none'; 
     myTabs[tb].myTabitem[myTabs[tb].oid].className -= " active"; 
    } 
    myTabs[tb].myTabContent[id].style.display = 'block'; 
    myTabs[tb].myTabitem[id].className += " active"; 
    myTabs[tb].oid = id; 
}
 

function boTabs() 
{ 
    var myBlocks = new Array(); 
    myBlocks = document.getElementsByTagName("div"); 
    var stopit = myBlocks.length; 
    for (var g = 0; g < stopit; g++) 
    { 
     if (myBlocks[g].className == "tabs") 
     { 
      myTabs.push(myBlocks[g]); 
     } 
    } 
    var stopit2 = myTabs.length; 
    for (var i = 0; i < stopit2; i++) 
    { 
     myTabs[i].myLists = myTabs[i].getElementsByTagName("ul"); 
     if (myTabs[i].myLists[0].className == "tabs") 
     { 
      myTabs[i].myTabitems = myTabs[i].myLists[0].getElementsByTagName("li"); 
     } 
     var stopit3 = myTabs[i].myTabitems.length; 
     myTabs[i].obj = i; 
     myTabs[i].myTabitem = new Array(); 
     myTabs[i].myTabContent = new Array(); 
     for (var j = 0; j < stopit3; j++) 
     { 
      myTabs[i].myTabitem.push(myTabs[i].myTabitems[j]); 
      myTabs[i].myTabitem[j].nr = j; myTabs[i].myTabitem[j].obj = i; 
      myTabs[i].myTabitem[j].onclick = function() { showTabContent(this); }; 
     } 
     var myTabDivs = myTabs[i].getElementsByTagName("div"); 
     for (var j = 0; j < myTabDivs.length; j++) 
     { 
      if (myTabDivs[j].className == "tabcontent") 
      { 
       myTabs[i].myTabContent.push(myTabDivs[j]);
 

 } 
    } 
    myTabs[i].myTabitem[0].className += " active"; 
    myTabs[i].myTabContent[0].style.display = 'block'; 
    myTabs[i].oid = 0; 
    myTabDivs = null; 
} 
myBlocks = null; 

} onload = boTabs;

Answer 1

Je changerais complètement d'utiliser JQuery Tabs et JQuery AJAX pour charger les grilles

Answer 2

Si vous voulez une solution JS, vous devez construire la table gridview vous en utilisant le code JS ... Si vous voulez que le serveur faites le travail, vous avez besoin d'un UpdatePanel, et utilisez la méthode _doPostBack du client. Si vous aimez cette approche, le conteneur d'onglets Ajax Control Toolkit peut être configuré pour publier sur le serveur chaque fois que l'onglet change. Vous pouvez envelopper ce contrôle avec un panneau de mise à jour, et tout semble être fait avec du code JS. Alternativement, vous pouvez également utiliser un service Web qui lie un gridview et renvoie le HTML aussi ... pas encore essayé, mais vu le faire. HTH, si vous me faites savoir quelle option vous préférez, je pourrais mettre à jour en conséquence.

Answer 3

J'ai maintenant le tabcontrol fait par JQuery et CSS. à ce moment, les 4 gridviews sont liées à Page_Load, mais, comme il faut du temps pour exécuter le sproc derrière le gridview, cela prend quelques secondes. Par conséquent, je veux les charger sur tabclick ... Le UpdatePanel semble la meilleure façon ...

JQuery:

$(document).ready(function() 
{ 

    //When page loads... 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() 
    { 

     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 
});