0

I am having a problem where my jQueryUI dialogs do not have and "x' icon in the upper right hand corner. This stackO post

jQuery UI Dialog - missing close icon

suggested that the jQueryUi.js reference go before Bootstrap's

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>

This is what I started with:

    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*",
                        "~/Scripts/jquery.unobtrusive-ajax.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/jquery-ui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));            
        }
}
    

HTML cross section:

    </body>         
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jquery-ui")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/bootstrap")
        
        @RenderSection("scripts", required: false)
    
    </body>  

      

I modified the HTML as follows,

</body>         
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jquery-ui")
    @Scripts.Render("~/bundles/jqueryval")
        
    @RenderSection("scripts", required: false)

</body>      

Although the X's were added to the dialog, the text "Close" also appeared spanning across the top right button and not remaining inside of it. The 2 Buttons on the Dialog, OK and Cancel, also had no padding.

I was displaying it as shown:

function ConfirmDelete(vendorId) {

    var $myDialog = $('<div></div>')
        .html('Are you sure that you want to delete State Assessment "' + vendorId + '?"')
        .dialog({
            modal: true,
            autoOpen: false,
            title: 'Delete Confirmation',
            position: {
                my: "center center",
                at: "center center",
                of: window
            },
            buttons: {
                "Cancel": function () {
                    $(this).dialog("close");
                    return false;
                },
                "OK": function () {
                    $(this).dialog("close");
                    var form = $("#Form_" + vendorId);
                    form.submit();
                    return true;
                }
            }
        }).dialog();


    $myDialog.dialog('open');
}

My packages.config, if it matters, is as follows.

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Antlr" version="3.5.0.2" targetFramework="net461" />
  <package id="bootstrap" version="3.3.7" targetFramework="net461" />
  <package id="bootstrap.TypeScript.DefinitelyTyped" version="0.9.2" targetFramework="net461" />
  <package id="Cigna.Enterprise.Services.Data.DirectoryHelper" version="3.2.0.0" targetFramework="net451" />
  <package id="elmah.corelibrary" version="1.2.2" targetFramework="net461" />
  <package id="Elmah.Mvc" version="2.1.2" targetFramework="net461" />
  <package id="EntityFramework" version="6.1.3" targetFramework="net461" />
  <package id="jQuery" version="3.1.0" targetFramework="net461" />
  <package id="jQuery.Easing" version="1.3.0.1" targetFramework="net461" />
  <package id="jquery.TypeScript.DefinitelyTyped" version="3.1.0" targetFramework="net461" />
  <package id="jQuery.UI.Combined" version="1.12.0" targetFramework="net461" />
  <package id="jQuery.Validation" version="1.15.1" targetFramework="net461" />
  <package id="jqueryui.TypeScript.DefinitelyTyped" version="1.5.1" targetFramework="net461" />
  <package id="Microsoft.AspNet.Identity.Core" version="2.2.1" targetFramework="net451" />
  <package id="Microsoft.AspNet.Identity.EntityFramework" version="2.2.1" targetFramework="net451" />
  <package id="Microsoft.AspNet.Mvc" version="5.2.3" targetFramework="net461" />
  <package id="Microsoft.AspNet.Razor" version="3.2.3" targetFramework="net461" />
  <package id="Microsoft.AspNet.Web.Optimization" version="1.1.3" targetFramework="net451" />
  <package id="Microsoft.AspNet.WebPages" version="3.2.3" targetFramework="net461" />
  <package id="Microsoft.jQuery.Unobtrusive.Ajax" version="3.2.3" targetFramework="net461" />
  <package id="Microsoft.jQuery.Unobtrusive.Validation" version="3.2.3" targetFramework="net461" />
  <package id="Microsoft.Web.Infrastructure" version="1.0.0.0" targetFramework="net451" />
  <package id="Modernizr" version="2.8.3" targetFramework="net461" />
  <package id="Newtonsoft.Json" version="9.0.1" targetFramework="net461" />
  <package id="NUnit" version="3.4.1" targetFramework="net461" />
  <package id="Respond" version="1.4.2" targetFramework="net461" />
  <package id="WebGrease" version="1.6.0" targetFramework="net461" />
</packages>

I would welcome any insight into how to resolve this specific issue as well as better order or modify dependencies.

halfer
  • 19,824
  • 17
  • 99
  • 186
Chad
  • 23,658
  • 51
  • 191
  • 321

0 Answers0