CODEWITHSUNDEEP
jqueryasp.net-mvcjquery-ui
James123
James123

Reputation: 11652

Jquery dialogbox 'X' image not showing? a

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

Upvotes: 1

Views: 7193

Answers (4)

DaRoGa
DaRoGa

Reputation: 2404

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.

Upvotes: 5

Vaibhav Garg
Vaibhav Garg

Reputation: 3716

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

Upvotes: 7

Stef
Stef

Reputation: 201

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.

Upvotes: 0

Scott Mermelstein
Scott Mermelstein

Reputation: 15397

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.

Upvotes: 0

Related Questions