Jquery dialogbox 'X' image not showing? a

Question

I am using JQuery 1.9.1 and JQuery UI 1.10.2 in asp.net MVC4 project. I have downloaded all these JS and Css from NuGet Tool. I am missing JQuery dialogbox 'X' image in the box. How to get that on the dialogbox?

enter image description here

Project folder structure like this.

Project
|
|-Content
|    |
|    |-Themes
|       |
|        |- Base
|            |
|            |-Images
|            |
|            JQuery.UI.* Files
|            ---
|            ----
|
|
|-Scripts
    |
   JQuery-1.9.1.JS All Files
   JQuery-UI-1.10.2.JS All Files

When I searched JQuery-UI-1.10.2.js, I found below code which inserting image.

this.uiDialogTitlebarClose = $("<button></button>")
            .button({
                label: this.options.closeText,
                icons: {
                    primary: "ui-icon-closethick" //This Image
                },
                text: false
            })
            .addClass("ui-dialog-titlebar-close")
            .appendTo( this.uiDialogTitlebar );
        this._on( this.uiDialogTitlebarClose, {
            click: function( event ) {
                event.preventDefault();
                this.close( event );
            }
        });

I don't know where is that image files. I have only below image files from JQuery UI.

enter image description here

Get firebug and see if its trying to reference an image... if it is then see what path its trying to go to etc... If you have an online example of this not working I'd be more than happy to take a look at it. It sounds like it could be a simple css issue. — Banning, Jul 17 '13 at 13:43
Check in CSS what is the image for class "ui-dialog-titlebar-close" and btw, chek for 404 error for image in network tab — A. Wolff, Jul 17 '13 at 13:46
@roasted I did, I found like this ` .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 21px; margin: -10px 0 0 0; padding: 1px; height: 20px; }` and No error in Networktab. — James123, Jul 17 '13 at 13:58
So no image is associated to this class. You have to check for all classes corresponding to your element — A. Wolff, Jul 17 '13 at 14:01
Within the button there should be a span which should have classes `ui-button-icon-primary ui-icon ui-icon-closethick`. (And a span with class `ui-button-text`, which doesn't directly pertain to the issue.) — Scott Mermelstein, Jul 17 '13 at 14:03
@ScottMermelstein I did not find that classes in entire page. — James123, Jul 17 '13 at 14:18
@James123 Well, since you found the `ui-dialog-titlebar-close`, it's clearly executing the code you listed above - including the code that makes the button. This still looks to me like it's not properly loading the jqueryui css file. Are you referring to it in your html? (Based on your screenshot, it would be `themes/base/jquery-ui.css`) — Scott Mermelstein, Jul 17 '13 at 14:44

score 7 · Answer 1 · edited May 23 '17 at 12:00

7

The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in.

Literally, swap the two so that instead of:

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

it becomes

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

source: https://stackoverflow.com/a/20457891/187025

edited May 23 '17 at 12:00

Community

1
1

answered Mar 19 '15 at 10:03

Vaibhav Garg

3,630
3
33
55

This helped me, but the close button image location is not exactly on close button. Why it shows this behavior? – M.Mahdipour Oct 18 '16 at 13:24

score 5 · Answer 2 · answered Mar 18 '16 at 10:05

I know this is an old post however, i was having this issue and none of the suggestions worked for me so i thought i would share my 2 cents.

When examining the DOM of the dialog close button, i realised that although the images were being downloaded correctly, the button itself looked like this:

<button class="ui-dialog-titlebar-close" type="button"></button>

Hence, it was missing the ui-icon and ui-icon-closethick classes after being generated by jquery. This is clearly a bug. However, my simple solution to this is just to insert the following code after dialog creation.

$('.ui-dialog-titlebar-close').addClass('ui-icon ui-icon-closethick');

This will cause the button tag to look like below and the icon to appear correctly.

<button class="ui-dialog-titlebar-close ui-icon ui-icon-closethick" type="button"></button>

I hope this helps somebody.

Scott Mermelstein · Answer 3 · 2013-07-17T14:40:22.063

Any time I've encountered a dialog box looking like the one you included, it's because the jqueryUI css file wasn't properly loaded. You have a line including it in your html, something like

<link rel="stylesheet" href="themes/base/jquery-ui.css"></link>

right?

ui-icon-closethick simply tells jqueryUI where to look on its ui-icons image, which is a single image that contains all 173 of the jqueryUI icons. (You can look at the image directly to get the idea, or look at it on the jqueryUI theme roller - that will actually show you the icon set that the dialog box wants to load.) Most of the icons typically come from the content color set, though they have icon sets for selected, active, etc as well. You can check your css file's ui-icon definitions to see exactly which image set is being referenced.

score 0 · Answer 4 · answered May 02 '14 at 12:58

0

Download the images folder from this path https://github.com/jquery/jquery-ui/tree/master/themes/base/images Place that images folder inside css folder. Make sure names are proper.

answered May 02 '14 at 12:58

Stef

201
1
9

Jquery dialogbox 'X' image not showing? a

4 Answers4