Problème avec argument invalide lors du passage des onglets à base jQueryUI

Question

Here's a page with the issue

Pour reproduire l'erreur, en utilisant IE - cliquez sur l'onglet directions, puis tous les autres.

Ce que je suis en train de faire est la suivante:

Sur chargement de la page, ne rien faire vraiment. Cependant, lorsque l'onglet directions se charge, configurez la carte. Comme si:

$('#tabs').bind('tabsshow', function(event, ui) { 
    if (ui.panel.id == "tabs-5") { 

     // get map for directions 
     var dirMap = new GMap2($("div#dirMap").get(0)); 
     dirMap.setCenter(new GLatLng(35.79648921414565,139.40663874149323), 12); 
     dirMap.enableScrollWheelZoom(); 
     dirMap.addControl(new PanoMapTypeControl()); 
     geocoder = new GClientGeocoder(); 

     $("#dirMap").resizable({ 
      stop: function() { dirMap.checkResize(); } 
     }); 
     // clear dirText 
     $("div#dirMapText").html(""); 
     dirMap.clearOverlays(); 

     var polygon = new GPolygon([new GLatLng(35.724496338474104,139.3444061279297),new GLatLng(35.74748750802863,139.3363380432129),new GLatLng(35.75765724051559,139.34303283691406),new GLatLng(35.76545779822543,139.3418312072754),new GLatLng(35.767547103447725,139.3476676940918),new GLatLng(35.75835374997911,139.34955596923828),new GLatLng(35.755149755962755,139.3567657470703),new GLatLng(35.74679090345495,139.35796737670898),new GLatLng(35.74762682821177,139.36294555664062),new GLatLng(35.744422402303826,139.36346054077148),new GLatLng(35.74860206266584,139.36946868896484),new GLatLng(35.735644401200986,139.36843872070312),new GLatLng(35.73843117306677,139.36174392700195),new GLatLng(35.73592308277646,139.3531608581543),new GLatLng(35.72686543236113,139.35298919677734),new GLatLng(35.724496338474104,139.3444061279297)], "#f33f00", 5, 1, "#ff0000", 0.2);dirMap.addOverlay(polygon); 

     // load directions 
     directions = new GDirections(dirMap, $("div#dirMapText").get(0)); 
     directions.load("from: Yokota@35.74005964772476,139.37083393335342 to: Ruby International@35.79648921414565,139.40663874149323"); 

    } 
}); 

Que diable est à l'origine de l'erreur? Le débogueur javascript IE prétend que l'erreur réside dans main.js, ligne 139 caractère 28. (le fichier google maps api). Quelle est cette ligne:

function zf(a,b){a=a.style;a.width=b.getWidthString();a.height=b.getHeightString()} 

Des idées? Merci d'avance!

Answer 1

Le problème semble être un problème connu avec jQuery onglets et IE, voir: Why does my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?

La solution proposée consiste à remplacer les onglets jQuery CSS en utilisant:

.ui-tabs .ui-tabs-hide { 
    position: absolute; 
    left: -10000px; 
} 

Cependant, cela ne veut pas immédiatement résoudre votre problème parce que si vous recherchez le CSS, vous verrez que votre définition des onglets de .ui-cacher contient:

.ui-tabs .ui-tabs-hide { display: none !important; } 

Ce CSS fait le suggèrent ed fixe inefficace. Donc, pour résoudre le problème, vous devez modifier le correctif proposé afin qu'il lit comme suit:

.ui-tabs .ui-tabs-hide { 
    display: block !important; 
    position: absolute; 
    left: -10000px; 
} 

Cela devrait se débarrasser du problème. HTH.