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.