jQuery dialog box not capture control - IE 9.0

Question

Nella mia pagina ho un menu laterale per i sucker CSS. Quando l'utente fa clic su un elemento nella pagina, visualizzo una finestra di dialogo dell'interfaccia utente jQuery e all'interno di un div nella pagina Sto caricando una pagina HTML tramite jQuery AJAX.

In Chrome, lo stato attivo si sposta dal menu e nella finestra di dialogo dell'interfaccia utente jQuery ogni volta che faccio clic su un elemento del menu.

Ma in IE e Opera la messa a fuoco rimane sul menu anche dopo aver fatto clic sull'elemento. La finestra di dialogo dell'interfaccia utente jQuery non è in grado di spostare l'attenzione dal menu, quindi rimane aperta e impedisce la visualizzazione dell'utente.

Si prega di dare un'occhiata all'immagine allegata.

Come potete vedere ho anche aggiunto una casella di testo e ha afferrato l'attenzione lì, ma anche così non c'è nessun cambiamento.

Come richiesto, here is a link to the website.

Esempio: Quando si apre il sito in IE 9, e si fa clic su diciamo Technologies> MySQL o Technologies> MSSQL, il menu non si chiude, ma dovrebbe perché sto aprendo una finestra di dialogo modale durante il caricamento della pagina dietro nel div Ma se apri la pagina in chrome e provi la stessa cosa, il menu si chiude, come dovrebbe. Collegamento frammenti di codice in materia: -

/********************************************** 
Function to load an html page inside a div 
**********************************************/ 
function loadPageInDiv(containerDiv, pageToLoad, divToLoadIn, loadingDialog, callBackFunction) { 
    var parentDiv = $("#" + containerDiv); 
    var loadDiv = $("#" + divToLoadIn); 
    var dialogBox = $("#" + loadingDialog); 
    // Show dialog box first, then fadeOut, then load, then fadeIn,the close. 
    $(dialogBox).data('loadDiv', loadDiv).dialog("open"); 
    $(loadDiv).load(pageToLoad, function (response, status, xhr) { 
     if (response == "error") { 
      $(dialogBox).dialog('close'); 
     } 
     else { 
      if (callBackFunction != null) { 
       callBackFunction(); 
      }    
      checkAndDisplay(loadingDialog, divToLoadIn); 
     } 
    }); 
} 

funzione per inizializzare la finestra di dialogo jquery-ui.

/************************************** 
Function to initialize the dialog box 
*****************************************/ 
function initializePleaseWaitDialog() { 
    $("#osmPleaseWait").dialog({ 
     autoOpen: false, 
     modal: true, 
     dialogClass: 'noTitleDialog', 
     draggable: false, 
     resizable: false 
    }); 
} 

funzione per alternare visualizzazione DIV

/*************************************** 
Function to toggle div display 
****************************************/ 
function checkAndDisplay(dialogToHide, divToShow) { 
    $("#" + divToShow).css('display', 'block'); 
    $("#" + dialogToHide).dialog("close"); 
} 

UPDATE # 3: Ho provato un altro modo, In caso click delle voci di menu, mi sto nascondendo tutti i div secondari.

 $(".osmMenuObject,.mainCatHeaderWithoutChild").click(function() { 
      // Currently Selected 
      $(".osmMenuObject,.mainCatHeaderWithoutChild").removeClass("osmServiceListSelected"); 
      $(this).addClass("osmServiceListSelected"); 
      // Hiding the div** 
      $(".secondaryMenuContainer").css('display', 'none'); 
      var pageToLoad = $(this).children("input[type='hidden']").val(); 
      loadPageInDiv("serviceLoadDivContainer", pageToLoad, "serviceLoadDiv", "osmPleaseWait"); 
      return false; 
     }); 

ho poi aggiornato il codice checkAndDisplay, per rimuovere l'attributo di visualizzazione ho aggiunto in precedenza, ma ancora non funziona.

function checkAndDisplay(dialogToHide, divToShow) { 
    $("#" + dialogToHide).dialog("close"); 
    $("#" + divToShow).css('display', 'block'); 
    $(".secondaryMenuContainer").css('display', ''); 
} 

Ecco l'markup per la pagina.

<div class="osmListContainerSpecial"> 
      <div class="osmListHeader" id="osmListHeaderServices"> 
       Our Services 
      </div> 
      <div class="mainCatHeader"> 
       Software Development 
      </div> 
      <%-- Technologies --%> 
      <div class="secondCatHeader"> 
       Technologies 
       <div class="secondaryMenuContainer" id="softwareDevTech"> 
        <div class="secondaryMenu" style="COLOR: #3e3e3e" id="techMenu"> 
         <div class="osmMenuObject"> 
          .NET/ C# 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techCSharp.html" /> 
          <div class="shortMenuDesc"> 
           Our primary area of expertise, with over 5 years of experience.</div> 
         </div> 
         <div class="osmMenuObject"> 
          MS-SQL 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMsSQL.html" /> 
          <div class="shortMenuDesc"> 
           We have been working with SQL for over 6 years now.</div> 
         </div> 
         <div class="osmMenuObject"> 
          MySQL 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMySQL.html" /> 
          <div class="shortMenuDesc"> 
           Open Source Database for faster, hassle-free deployment.</div> 
         </div> 
         <div class="osmMenuObject"> 
          Silverlight 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techSilverlight.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div class="osmMenuObject"> 
          MVC 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMVC.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div class="osmMenuObject"> 
          Azure 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techAzure.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <%-- Applications --%> 
      <div class="secondCatHeader"> 
       Applications 
       <div class="secondaryMenuContainer" id="softwareDevApp"> 
        <div class="secondaryMenu"> 
         <div id="appMsCRM" class="osmMenuObject"> 
          Microsoft CRM 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appMsCRM.html" /> 
          <div class="shortMenuDesc"> 
           Our primary area of expertise, with over 5 years of experience.</div> 
         </div> 
         <div id="appQb" class="osmMenuObject"> 
          QuickBooks 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appQb.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div id="appGP" class="osmMenuObject"> 
          Great Plains 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appGp.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div id="appSP" class="osmMenuObject"> 
          Sharepoint 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSp.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div id="appXero" class="osmMenuObject"> 
          Xero 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appXero.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div id="appFB" class="osmMenuObject"> 
          Freshbooks 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appFb.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div id="appSF" class="osmMenuObject"> 
          SalesForce 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSF.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div id="appNav" class="osmMenuObject"> 
          Navision 
          <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appNavision.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <%-- Independent Software Testing --%> 
      <div class="mainCatHeaderWithoutChild"> 
       Independent Software Testing 
       <input type="hidden" value="ServicesHTML/Testing.html" /> 
      </div> 
      <%-- Technnical Documentation --%> 
      <div class="mainCatHeaderWithoutChild"> 
       Technnical Documentation 
       <input type="hidden" value="ServicesHTML/Documentation.html" /> 
      </div> 
      <%-- Case Studies --%> 
      <div class="mainCatHeaderWithChild"> 
       Case Studies 
       <div class="secondaryMenuContainer"> 
        <div class="secondaryMenu" style="COLOR: #3e3e3e"> 
         <div class="osmMenuObject"> 
          Media - Astral 
          <input type="hidden" value="ServicesHTML/CaseStudies/csAstral.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div class="osmMenuObject"> 
          Waste Disposal - RGMRM 
          <input type="hidden" value="ServicesHTML/CaseStudies/csRGMRM.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div class="osmMenuObject"> 
          Insurance - IAAH 
          <input type="hidden" value="ServicesHTML/CaseStudies/csIAAH.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div class="osmMenuObject"> 
          Housing Providers - TalonPro 
          <input type="hidden" value="ServicesHTML/CaseStudies/csTalonPro.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div class="osmMenuObject"> 
          Education and Training - Met Film 
          <input type="hidden" value="ServicesHTML/CaseStudies/csMetFilm.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div class="osmMenuObject"> 
          Industry - Bates 
          <input type="hidden" value="ServicesHTML/CaseStudies/csBates.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
         <div class="osmMenuObject"> 
          Industry - Atdec 
          <input type="hidden" value="ServicesHTML/CaseStudies/csAtdec.html" /> 
          <div class="shortMenuDesc"> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

Per favore fatemi sapere se avete bisogno di un altro codice o avete altre domande.

Answer 1

Ok perché non è stata trovata una soluzione adeguata. Ecco cosa ho fatto per aggirare il problema. Alcuni potrebbero pensare che sia leggermente hackerato ma non sono riuscito a trovare alcuna altra soluzione.

Se controlli la mia 3 ° aggiornamento sto nascondendo il menu secondario,

 $(".osmMenuObject,.mainCatHeaderWithoutChild").click(function() { 
      // Currently Selected 
      $(".osmMenuObject,.mainCatHeaderWithoutChild").removeClass("osmServiceListSelected"); 
      $(this).addClass("osmServiceListSelected"); 
      // Hiding the div || THIS WAS NEW 
      $(".secondaryMenuContainer").css('display', 'none'); 
      var pageToLoad = $(this).children("input[type='hidden']").val(); 
      loadPageInDiv("serviceLoadDivContainer", pageToLoad, "serviceLoadDiv", "osmPleaseWait"); 
      return false; 
     }); 

Ora, nel caso document.ready() stesso, sto aggiungendo un altro evento.

 $(".secondCatHeader,.mainCatHeaderWithChild").hover(function() {  
      $(this).children(".secondaryMenuContainer").css('display', ''); 
     }) 

Ora che cosa farà è, ogni volta che il mouse sopra una delle voci di menu, ed ha per bambini con la classe .secondaryMenuContainer, sarà azzerare il display in linea da quella classe. Quindi lo display:none che avevo impostato in precedenza verrà cancellato. Ho provato questo con IE 9.0 e Opera, e sembra che funzioni correttamente.

Grazie a tutti.

Answer 2

Da quello che posso dire, si ha un conflitto CSS tra la riga 1101 e la riga 1109.Hai impostato .secondaryMenuContainer-DISPLAY: none; ma poi imposta su DISPLAY: block; su .secondCatHeader:hover;

la finestra di dialogo jQuery UI non significa nega la condizione hover, e così il vostro .secondaryMenuContainer mai ritorna alla DISPLAY: none;

$(".secondaryMenuContainer").css('display', ''); non ha funzionato perché imposta uno stile inline non valido, quindi il browser ripristina la visualizzazione di uno stile esterno valido, in questo caso DISPLAY: block; poiché l'utente hover non è ancora stato interrotto. Se vuoi che lo .secondaryMenuContainer ritorni semplicemente allo stato DISPLAY: none;, dovrai interrompere l'hover dell'utente.

Un metodo potrebbe essere quello di creare uno div vuoto quando viene caricata la finestra di dialogo; uno con uno z-index più alto del tuo .secondaryMenuContainer che occupa l'intera finestra. Dovresti quindi rimuovere quello div quando la finestra di dialogo si dissolve. Questo dovrebbe rompere hover dell'utente e consentire lo stile del div a cascata di nuovo a DISPLAY: none;

EDIT: Poiché si tratta di jQuery UI di dialogo modale che deve essere caricando un .ui-widget-overlay che fa esattamente quello che ho descritto. La funzione viene chiamata nello stack a e.widget._createOverlay @jquery-ui-1.10.1.custom.min.js:6 ma non interrompe l'interazione tra le pagine come previsto.

Answer 3

Sembra essere una condizione di competizione. Io non sono sicuro circa il "perché" parte, ma questo sembra superare il problema:

Sostituire la funzione checkAndDisplay con la seguente versione:

function checkAndDisplay(dialogToHide, divToShow) { 
    $("#" + divToShow).css('display', 'block'); 
    setTimeout(function(){ 
     $("#" + dialogToHide).dialog("close"); 
    },500); 
} 

Edit: sembra che ci sia un bug con Internet Explorer non aggiorna lo stato "hover", tranne che con il mouse. Ecco un esempio riproducibile. Prova a cliccare sull'area verde in diversi browser e NON muovi il mouse. http://jsfiddle.net/5LR8Z/

Non ho trovato alcuna soluzione per quel particolare bug. Come soluzione alternativa, proverei a chiudere manualmente il menu (impostare una variabile sul gestore di clic per sapere quale menu chiudere sulla funzione checkAndDisplay).