Boîte de dialogue modale jQuery non centrée dans SharePoint 2007

Question

Sur la page AllItems d'une liste, j'ai ajouté un composant WebPart Éditeur de contenu au-dessus de la partie Web qui affiche la liste. Cette partie Web contient uniquement un bouton HTML. Lorsque l'utilisateur clique sur le bouton, tous les éléments de la liste seront traités par plusieurs fonctions JavaScript/jQuery/AJAX. Mais la liste contient plus de 1000 éléments et il n'est pas facile de les informer que le code traite les éléments. D'abord, à des fins de développement, j'ai utilisé des alertes entre les méthodes pour montrer une sorte d'interactivité et fournir des informations à l'utilisateur. Mais maintenant j'utilise la boîte de dialogue jQuery Modal pour montrer à l'utilisateur de manière agréable que le code traite les éléments.

La boîte de dialogue est affichée mais elle n'est pas centrée sur l'écran, la barre de titre n'est pas affichée sur toute la largeur de la boîte de dialogue et la superposition gris transparent n'est pas visible. J'ai testé exactement le même code dans une application Web ASP.NET vide et dans ce contexte tout fonctionne bien. J'utilise jQuery 1.8.2 et jQuery UI 1.10.1. est en tout cas voici ce que j'ai:

function showProcessDialog() { 
    showDialog("Please wait while processing all items...", null); 
} 

function showDialog(message, dialogButtons) { 
    $("#messageContainer").text(message); 
    $('#dialog-message').parent().appendTo($('form:first')); 
    $("#dialog-message").dialog({ 
     draggable: false, 
     height: "auto", 
     modal: true, 
     open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }, 
     position: { my: "center", at: "center", of: window }, 
     resizable: false, 
     width: 400, 
     buttons: dialogButtons 
    }); 
} 

Notez cette ligne:

$('#dialog-message').parent().appendTo($('form:first')); 

je lis que lorsqu'une page est chargée dans SharePoint 2007, jQuery manipule les DOM et que le div élément qui servira le dialogue est placé à l'extérieur du corps. Le plus gros problème avec ceci est qu'aucun contrôle côté serveur dans la boîte de dialogue ne fonctionnera plus et cette ligne replace la div dans le formulaire. Je l'ai laissé là-bas parce que vous ne savez jamais ...

Ceci est le résultat de l'application Web ASP.NET:

Et c'est le même code dans SharePoint 2007:

Est-ce que quelqu'un sait comment je peux résoudre cela pour que le résultat soit le même que celui qui fonctionne? Merci d'avance!

Answer 1

J'ai eu exactement le même problème dans une application que je tentais de passer à la dernière versions de jQuery et jQuery UI. Je courais IE 8 (en mode 7).

Je peux vous dire que ce qui fonctionnait avant la mise à niveau était jQuery 1.6.2 et jQuery UI 1.8.16. En fin de compte, je suis revenu à ces versions parce que le client était en train de passer au SP 2010 de toute façon, et ça ne valait pas la peine de le résoudre.

$('#search-modal').dialog({ autoOpen: false, bgiframe: true, modal: true, width: 400, height: 550, resizable: false }); 
    $('#search-modal').dialog('open'); 
    $('#search-modal').parent().appendTo($("form:first")); 

Bonne chance!

Answer 2

J'ai créé une version très simplifiée ici que vous pouvez tester. Il semble également que certains éléments de jquery-ui ne se chargent pas correctement, avez-vous regardé dans la section "réseau" du débogueur/firebug de chrome pour voir s'il y a des éléments qui ne sont pas chargés?

function showDialog(message, dialogButtons) { 
    var dialog1 = $('<div id="main_content" class="ui-widget" title="Documents"></div>'); 
    $(dialog1).html(message); 
    $(dialog1).dialog({ width: 200, height: 200, position: "center" ,modal:true}); 
} 

Avez-vous essayé de modifier manuellement l'élément DOM Dialog à centrer avec css, comme ceci:

.center 
{ 
    margin-left:auto; 
    margin-right:auto; 
    width:70%; 
} 

Answer 3

Le problème est en mode document IE.Par défaut, les pages SP2007 s'affichent dans Compatibility mode car, comme indiqué dans le commentaire ci-dessus, IE passe en mode quirks. C'est pourquoi il diffère de la solution ASP.
Si vous passez en mode document IE7 +, jQuery fonctionne, mais vous pouvez rencontrer de nouveaux problèmes liés au rendu des pages de partage.

Je préfère utiliser custom js dans de tels cas, car il est plus flexible. Pour centrer la div vous devez modifier le comportement onclick du bouton Afficher pour ce qui suit:

pos = get_scroll(); 
$("#dialog").css({ 
    'top': pos.y, 
    'left': pos.x + window.screen.availWidth/2, 
    'margin-left': 50} 
).show(); 

Comme vous pouvez le voir aussi déjà problème de bouton de fermeture ici, et rencontrerez problème de débordement plus tard si div de contenu devient plus grand que dialogue div .