Jquery UI hang quelques navigateurs

Question

J'ai une page web avec rien de plus que du pur HTML, CSS et Javascript complet avec Jquery et quelques effets Jquery UI. Le problème est que dans certains endroits de la page Web et avec certaines animations, la page se bloque sur Chrome 13 et Explorer 8; dans Firefox 4/5/6 la page fonctionne juste parfaite. (Testé uniquement sur ces navigateurs)

Voici la page HTML principale:

<div id="contentwrapper"> 
    <div id="contentcolumn"> 
     <div id="upperContent"></div> 
     <div id="downContent" class="noDisplay"> 
      <div id="closeContent"> 
       <img src="@Url.Content("~/Content/images/icons/closebox.png")" alt="X" /> 
      </div> 
      <div id="pageContent"> 
       @*Here goes the content*@ 
      </div> 

     </div> 
     @*Main screen content*@ 
     <div id="downContent_Main"> 
      <div id="welcomeMessage_Main" class="gradient"><h3><span></span>Welcome</h3></div> 
      <div id="newsTitle_Main">News</div> 
      <div id="newsBlocks_Main"> 
       @*here goes the news divs*@ 
      </div> 
     </div> 
    </div> 
</div> 

Ce sont les styles:

#contentwrapper 
{ 
    float: left; 
    width: 100%; 
    height: 480px; 
} 

#contentcolumn 
{ 
    margin-left: 270px; /*Set left margin to LeftColumnWidth*/ 
    height: 480px; 
} 

/* Breadscrumb */ 
#upperContent 
{ 
    height: 20px; 
    padding-left: 3px; 
} 

/* Option content */ 
#downContent 
{ 
    height: 450px; 

    margin-top: 5px; 
    margin-left: 10px; 
    margin-right: 10px; 
} 

#pageContent 
{ 
    padding-left: 8px; 
    padding-right: 8px; 
    background: inherit; 
    height: 428px; 

    overflow: auto; 
} 

#closeContent 
{ 
    height: 18px; 
    padding-top: 2px; 
    padding-right: 3px; 
    text-align: right; 
} 

#closeContent img 
{ 
    width: 16px; 
    height: 16px; 
    cursor: pointer; 
} 

/* Main screen content */ 
#welcomeMessage_Main 
{ 
    margin: 10px 10px 0px 10px; 
    height: 30px; 
} 

#newsTitle_Main 
{ 
    margin: 5px 10px 0px 10px; 
    height: 25px; 
    border: 1px solid #000000; 
    border-bottom: 0px; 

    padding: 3px 2px 0 5px; 

    font-size: 12px; 
    font-weight: bold; 
    font-family: normal Arial, sans-serif; 
    color: #FFFFFF; 
} 

#newsBlocks_Main 
{ 
    margin: 0px 10px 5px 10px; 
    height: 360px; 
    border: 1px solid #000000; 

    overflow: auto; 
} 

La question est quand à l'exécution ajouter du nouveau contenu à certains les conteneurs utilisant jquery:

$.ajax({ 
     url: pathSite, 
     success: function (data) { 

      //parse string data to XML 
      var xmlData = $.parseXML(data); 

      var innerDivs = ''; 

      //read XML resultant 
      $(xmlData).find('news').each(function() { 
       var headText = $(this).find('header').text(); 
       var imageText = $(this).find('image').text(); 
       var contentText = $(this).find('content').text(); 

       //trim the text to the maximum allowed on the current container 
       if (contentText.length > 205) { 
        contentText = contentText.substring(0, 205); 
       } 

       //concatenate the resulting news divs 
       innerDivs += ('<div class="newsContainer"><div class="newsImage">' + '<img src="' + pathSite + 'Content/images/news/' + imageText + '" alt="NewsImage" />' + '</div><div class="newsContent"><b>' + headText + '</b><br/>' + contentText + '</div></div>'); 
      }); 

      //add the html content 
      $('#newsBlocks_Main').html(innerDivs); 

      //hide loading animation 
      $('#newsBlocks_Main').hideLoading(); 

//Make the parent div sortable <- HERE IS THE ISSUE, NO MATTER WHERE I INITIALIZE THE SORTABLE PROPERTY: HERE OR AT DOCUMENT.READY 
      $('#newsBlocks_Main').sortable(); 
     }, 
     async: true 
    }); 

Comme vous pouvez le voir à la fin du bloc de code précédent, je suis essayer de rendre ce nouveau contenu SORTABLE avec Jquery UI, en assignant la propriété à la div containter parent. Le contenu est bien construit sur le navigateur mais quand je tente de faire glisser l'un des nouveaux divs ajoutés, le navigateur se bloque (Explorer, Chrome) mais dans Firefox, il fonctionne magnifiquement.

Même cas lorsque, par exemple, j'essaie de faire de ce divs dynamiquement ajouté un contrôle ACCORDION (en affectant la propriété accordéon à la div parente); dans ce cas, le navigateur (Explorer, Chrome) ne construit même pas l'interface utilisateur, se bloque simplement ne montrant aucun contenu.

S'il vous plaît quelqu'un peut-il me donner une idée de ce qui se passe ici? Je n'ai jamais eu de problèmes comme ceux-ci avec Jquery.

Merci.

PD: J'utilise les dernières versions de JQuery et JQuery UI:

• Jquery: 1.6.2
• JQuery UI: 1.8.14

Answer 1

J'ai trouvé la raison de ce comportement, j'ai oublié de mentionner que j'utilisais jsTree pour construire un menu du côté gauche de l'écran, et en quelque sorte jsTree est en conflit avec la bibliothèque JQuery UI provoquant des plantages de ce navigateur. En guise de conseil, je recommande d'utiliser soigneusement jsTree; dans mon cas particulier j'ai utilisé DynaTree qui ne cause pas ce conflit. J'espère que cela pourrait aider quelqu'un d'autre.