Boîte de dialogue jQuery UI - icône de fermeture manquante

188

J'utilise un thème jQuery 1.10.3 personnalisé. J'ai téléchargé chaque directement à partir du rouleau de thème et je n'ai intentionnellement rien changé.

Je crée une boîte de dialogue et j'obtiens un carré gris vide où l'icône de fermeture devrait être: Capture d'écran d'une icône de fermeture manquante

J'ai comparé le code généré sur ma page:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <spanid="ui-id-2" class="ui-dialog-title">Title</span>
    <button class="ui-dialog-titlebar-close"></button>
</div>

au code généré sur la page Dialog Demo :

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
        <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
        <span class="ui-button-text">close</span>
    </button>
</div>

EDIT: Les différentes parties du code sont générées par jQueryUI, pas moi, donc je ne peux pas simplement ajouter les balises span sans modifier le fichier jqueryui js, ce qui semble être un choix mauvais / inutile pour atteindre les fonctionnalités normales.

Voici le javascript utilisé qui génère cette partie du code:

this.element.dialog({
    appendTo: "#summary_container",
    title: this.title(),
    closeText: "Close",
    width: this.width,
    position: {
        my: "center top",
        at: ("center top+"+(window.innerHeight*.1)),
        collision: "none"
    },
    modal: false,
    resizable: false,
    draggable: false,
    show: "fold",
    hide: "fold",
    close: function(){
        if(KOVM.areaSummary.isVisible()){
            KOVM.areaSummary.isVisible(false);
        }
    }
});

Je suis perdu et j'ai besoin d'aide. Merci d'avance.

Xion sombre
la source
1
Avez-vous vérifié si le fichier image de l'icône existe dans votre système de fichiers?
Tiquelou
Oui, la feuille d'image de l'icône existe et se trouve au bon emplacement.
Xion Dark

Réponses:

443

Je suis en retard pour celui-ci d'un moment, mais je vais vous épater, prêt?

La raison pour laquelle cela se produit, c'est que vous appelez bootstrap in, après avoir appelé jquery-ui in.

Littéralement, échangez les deux pour qu'au lieu de:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

il devient

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

:)

Edit - 26/06/2015 - cela continue de susciter l'intérêt des mois plus tard, alors j'ai pensé que cela valait la peine d'être modifié. En fait, j'aime beaucoup la solution noConflict proposée dans le commentaire sous cette réponse et clarifiée par l'utilisateur Pretty Cool en tant que réponse séparée. Comme certains ont signalé des problèmes avec l'info-bulle d'amorçage lorsque les scripts sont échangés. Cependant, je n'ai pas rencontré ce problème parce que j'ai téléchargé l'interface utilisateur jquery sans l'info-bulle, car je n'en avais pas besoin car bootstrap. Donc, ce problème ne s'est jamais posé pour moi.

Edit - 22/07/2015 - Ne pas confondre jquery-uiavec jquery! Bien que JavaScript de Bootstrap nécessite que jQuery soit chargé avant, il ne repose pas sur jQuery-UI. Ainsi jquery-ui.jspeut être chargé après bootstrap.min.js, alors qu'il jquery.jsdoit toujours être chargé avant Bootstrap.

David G
la source
7
Cela a résolu mon problème. J'ai inclus les ressources dans cet ordre: 1) JQuery core 2) bootstrap 3) JQueryUI. Merci de votre aide; Mieux vaut tard que jamais! PS - vous m'avez époustouflé.
Xion Dark du
6
Encore plus tard ... Pouvez-vous expliquer POURQUOI la commande bootstrap a quelque chose à voir avec cela?
AndyC
4
Si vous permutez la commande Bootstrap avant l'interface utilisateur Jquery, les info-bulles Bootstrap ne fonctionneront pas.
vee
4
Bien que ce ne soit pas réellement une bonne solution, je l'ai voté pour parce que cela donne un moyen rapide de vérifier que c'est bien le problème. J'utiliserai personnellement la solution de Raul Riveros à la fin parce que le simple échange des deux scripts cause beaucoup d'autres problèmes plus importants. BTW, j'étais un peu époustouflé quand je l'ai vu.
krowe le
18
Si vous ne voulez pas changer l'ordre de Bootstrap et de l'interface utilisateur jQuery, vous pouvez également corriger le bouton: $.fn.bootstrapBtn = $.fn.button.noConflict(); stackoverflow.com/a/23428433/402517
l.poellabauer
45

Ceci est un commentaire sur la réponse principale, mais j'ai senti que cela valait sa propre réponse car cela m'a aidé à répondre au problème.

Si vous voulez garder Bootstrap déclaré après JQuery UI (je l'ai fait parce que je voulais utiliser l'info-bulle Bootstrap), déclarer ce qui suit (je l'ai déclaré après $(document).ready) permettra au bouton de réapparaître (réponse de https://stackoverflow.com/ a / 23428433/4660870 )

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
Plutôt cool
la source
C'est une façon assez astucieuse de faire les choses sans trop déranger les appels. +1 pour le même.
Aalok Mishra
interférer avec les classes Button
Stefano Mtangoo
1
Le problème avec cette solution est que cela cassera le code là où vous souhaitez utiliser la fonctionnalité de bouton d'amorçage, comme button ('loading'). Afin de vous assurer que la fonctionnalité de bouton d'amorçage existante fonctionne toujours, remplacez toutes les références des appels de fonction d'amorçage "button ()" par "bootstrapBtn ()". (Oui, je sais que les commentaires du code l'impliquent, mais je pensais que cela valait la peine de le dire explicitement.)
Kornél Regius
Votre éditeur ne se plaint-il pas des points-virgules manquants?
R. Schreurs
22

Cela semble être un bogue dans la façon dont jQuery est livré. Vous pouvez le réparer manuellement avec une manipulation dom sur l' Dialog Openévénement:

$("#selector").dialog({
    open: function() {
        $(this).closest(".ui-dialog")
        .find(".ui-dialog-titlebar-close")
        .removeClass("ui-dialog-titlebar-close")
        .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
    }
});
KyleMit
la source
8
Pour info aux futurs lecteurs, vous pouvez étendre ui.dialog (lien) pour ne pas avoir à dupliquer cette fonctionnalité ouverte à chaque appel.
John MacIntyre
2
Cela a plutôt bien fonctionné. Le X était un peu plus à gauche que la normale ... je ne sais pas exactement pourquoi.
ashlar64
Excellente solution! Cependant, dans mon cas, removeClass (...) était inutile et provoquait le bouton X égaré à gauche de la fenêtre de dialogue. Le simple fait de chaîner la méthode html () à la méthode find () a fait l'affaire. Je vous remercie.
Aamir
16

Ceci est signalé comme cassé dans 1.10

http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/

phillip le 29 janvier 2013 à 7h36 a déclaré: Dans les versions CDN, le bouton de fermeture de la boîte de dialogue est manquant. Il n'y a que la balise button, l'icône span ui est manquante.

J'ai téléchargé la version précédente et le X pour le bouton de fermeture s'affiche de nouveau.

Robert
la source
J'utilise 1.10.3 mais au moins je me sens moins fou maintenant. J'ai choisi de l'ignorer pour l'instant. Merci.
Xion Dark
Je peux confirmer que c'est toujours un problème dans 1.10.3
Frug
Toujours pareil en 1.10.4
Dbloch
Même problème dans 1.12.1
TetraDev
15

J'ai trouvé trois correctifs:

  1. Vous pouvez simplement charger bootsrap en premier. Et ils chargent jquery-ui. Mais ce n'est pas une bonne idée. Parce que vous verrez des erreurs dans la console.
  2. Ce:

    var bootstrapButton = $.fn.button.noConflict();
    $.fn.bootstrapBtn = bootstrapButton;

    aide. Mais les autres boutons semblent terribles. Et maintenant, nous n'avons pas de boutons d'amorçage.

  3. Je veux juste utiliser des styles bootsrap et aussi je veux avoir un bouton de fermeture avec une icône. J'ai fait ce qui suit:

    À quoi ressemble le bouton de fermeture après le correctif

    .ui-dialog-titlebar-close {
        padding:0 !important;
    }
    
    .ui-dialog-titlebar-close:after {
        content: '';
        width: 20px;
        height: 20px;
        display: inline-block;
        /* Change path to image*/
        background-image: url(themes/base/images/ui-icons_777777_256x240.png);
        background-position: -96px -128px;
        background-repeat: no-repeat;
    }
Yauheni Charniauski
la source
Excellent! Si vous n'avez pas le fichier image ou un thème spécifique installé, vous pouvez l'obtenir ici: jqueryui.com/themeroller . Téléchargez le thème et sélectionnez les composants dont vous avez besoin (dans ce cas, boîte de dialogue). Ensuite, téléchargez, extrayez, ouvrez le thème ou le dossier image et copiez le fichier image qui correspond à votre thème dans votre projet. Puis changez la référence dans le css fourni par Yauheni dans sa réponse.
Exel Gamboa
Votre point 3 a résolu le problème pour moi. Je dois juste faire un ajustement mineur de la largeur, de la hauteur et de la position de l'arrière-plan pour que le bouton ressemble à ce que je voulais. Je vous remercie.
Vimalan Jaya Ganesh
9

J'ai eu exactement le même problème, peut-être que vous avez déjà vérifié cela, mais que vous l'avez résolu simplement en plaçant le dossier "images" au même emplacement que le jquery-ui.css

Juan Hernández
la source
3
En fait, c'est la réponse qui a résolu le problème pour moi, ou du moins l'a clarifié. J'avais une page de test qui faisait référence à la copie en ligne (c'est-à-dire code.jquery.com / ... ) de jquery-ui.css et dans ce cas, le "X" est apparu. Cependant, dans ma page de projet actuelle, qui avait le fichier .css dans un dossier css local, le "X" ne s'affichait pas. La copie du dossier "images" dans mon dossier css local, avec mon fichier .css, a résolu le problème.
Dave Marley
5

Je suis resté coincé avec le même problème et après avoir lu et essayé toutes les suggestions ci-dessus, j'ai juste essayé de remplacer manuellement cette image (que vous pouvez trouver ici ) dans le CSS après l'avoir téléchargée et enregistrée dans le dossier images sur mon application et voilá, problème résolu!

voici le CSS:

.ui-state-default .ui-icon {
        background-image: url("../img/ui-icons_888888_256x240.png");
}
Raul Rivero
la source
3

J'utilise jQuery UI 1.8.17 et j'ai eu le même problème, en plus des feuilles de style css supplémentaires étaient appliquées aux éléments de la page, y compris la couleur de la barre de titre. Donc, pour éviter tout autre problème, j'ai ciblé les éléments exacts de l'interface utilisateur en utilisant le code ci-dessous:

$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();    
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();

Ensuite, j'ai ajouté un bouton de fermeture dans les propriétés de la boîte de dialogue elle-même: ...

modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

Pour une raison quelconque, j'ai dû cibler les deux éléments, mais cela fonctionne!

James Drinkard
la source
3

Je sais que cette question est ancienne mais je viens d'avoir ce problème avec jquery-ui v1.12.0.

Réponse courte Assurez-vous que vous avez un dossier appelé Imagesau même endroit que vous jquery-ui.min.css. Le dossier images doit contenir les images trouvées avec un nouveau téléchargement de jquery-ui

Longue réponse

Mon problème est que j'utilise gulp pour fusionner tous mes fichiers css en un seul fichier. Lorsque je fais cela, je change l'emplacement du fichier jquery-ui.min.css. Le code css de la boîte de dialogue attend un dossier appelé Imagesdans le même répertoire et à l'intérieur de ce dossier, il attend des icônes par défaut. puisque gulp ne copiait pas les images dans la nouvelle destination, il n'affichait pas l'icône x.

Junior
la source
1

À titre de référence, voici comment j'ai étendu la méthode ouverte selon la suggestion de @ john-macintyre:

$.widget( "ui.dialog", $.ui.dialog, {
	open: function() {
		$(this.uiDialogTitlebarClose)
			.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
		// Invoke the parent widget's open().
		return this._super();
	}
});

deansimcox
la source
1
  just add in css
 .ui-icon-closethick{
 margin-top: -8px!important;
margin-left: -8px!important;

}

Shashidhar
la source
1

Si vous appelez la boîte de dialogue () dans la fonction js, vous pouvez utiliser les codes de conflit du bouton d'amorçage ci-dessous

 <div class="row">
   <div class="col-md-12">
       <input type="button" onclick="ShowDialog()"  value="Open Dialog" id="btnDialog"/>
   </div>
</div>

<div style="display:none;" id="divMessage">
    <table class="table table-bordered">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Giri</td>
            <td>Prasad</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bala</td>
            <td>Kumar</td>
            <td>24</td>
        </tr>
    </table> 
</div>



<script type="text/javascript">
    function ShowDialog()
    {
        if (typeof $.fn.bootstrapBtn =='undefined') {
            $.fn.bootstrapBtn = $.fn.button.noConflict();
        }

        $('#divMessage').dialog({
            title:'Employee Info',
            modal:true
        });
    }
    </script>
giri-webdev
la source
1

Un homme sage m'a aidé une fois.

Dans le dossier où jquery-ui.cssse trouve, créez un dossier nommé «images» et copiez-y les fichiers ci-dessous:

ui-icons_444444_256x240.png

ui-icons_555555_256x240.png

ui-icons_777620_256x240.png

ui-icons_777777_256x240.png

ui-icons_cc0000_256x240.png

ui-icons_ffffff_256x240.png

et l'icône de fermeture apparaît.

Boris Prashchurovich
la source
0

Ajoutez simplement les éléments manquants:

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
Lee abondant
la source
3
Je ne peux pas. Je ne crée pas cette partie du html, jquery le fait. J'ai ajouté plus d'informations à ma question pour clarifier ce point.
Xion Dark
0

J'ai aussi ce problème. Voici le code qui est inséré pour le bouton de fermeture:

De Web Developer montrant le code créé par jquery

Lorsque je désactive le style = "display: none:" sur le bouton, le bouton de fermeture apparaît. Donc, pour une raison quelconque, cet affichage: aucun; se prépare, et je ne vois pas comment contrôler cela. Une autre façon de résoudre ce problème pourrait être de simplement remplacer l'affichage: aucun. Je ne vois pas comment faire ça.

Je note que la réponse publiée par KyleMit fonctionne, mais crée un bouton X différent.

Je note également que ce problème n'affecte pas toutes les boîtes de dialogue de mes pages, mais seulement certaines d'entre elles. Certains dialogues fonctionnent comme prévu; les autres n'ont pas de titre (c'est-à-dire que la plage contenant le titre est vide) tant que le bouton de fermeture est présent.

Je pense que quelque chose ne va vraiment pas et que ce n'est peut-être pas le moment pour 1.10.x.

Mais après d'autres travaux, j'ai découvert que dans certains cas, les titres n'étaient pas correctement définis et, après avoir corrigé cela, le bouton de fermeture X est réapparu comme il se doit.

J'avais l'habitude de définir les titres comme ceci:

('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);

Cet identifiant n'existe pas dans mon code, mais est créé apparemment par jquery à partir de ac-popup et ui-dialog-title. Une sorte de kludge. Mais comme je l'ai dit, cela ne fonctionne plus, et je dois utiliser ce qui suit à la place:

$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);

Après cela, le problème des boutons manquants semble être meilleur, même si je ne suis pas sûr qu'ils soient définitivement liés.

Jeffrey Simon
la source
0

Même en chargeant bootstrap après jquery-ui, j'ai pu résoudre en utilisant ceci:

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}
idiglove
la source