jquery dialog not centering - c#

EDIT: rewrote this to be html only
In the following code, why is the jquery dialog that's displayed not centered? The dialog is opened by clicking the "test" button on the page.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.dialog.js"></script>
<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<script>
function showDialog() {
$("#dialog-modal").dialog({
resizable: true,
height: 140,
modal: true,
position: 'center',
buttons: {
'Yes': function () {
$(this).dialog("close");
return true;
},
'No': function () {
$(this).dialog("close");
return false;
}
}
});
}
</script>
</head>
<body>
<div style="width:800px; height:800px; border:solid 1px red;">
<div id="dialog-modal" title="Basic dialog"></div>
<input type="button" value="test" onclick="showDialog();"></input>
</div><!-- End demo -->
</body>
</html>


I have recreated your scenario at http://jsfiddle.net/zjRga/1/. I have tested it a few times and I cannot reproduce what you state. Can you double check it? Can you confirm us that you are not using any extra CSS?
Note: I have made some minor (non-crucial) changes to make it works.
Hope it helps.


I solved it by adding these includes:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"
type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.1.js"
type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/i18n/jquery-ui-i18n.min.js"
type="text/javascript"></script>

Related

Show image in tooltip when mouse hover on interactive map (canada svg)

im trying to show an image in tooltip when mouse hover in states
My code(index.cshtml
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a target="_blank" id="state002" href="" title="">
<path id="state002"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
d="m 547.96,1140.93 c 0,31.31 25.38,56.69 56.69,56.69 31.31,0 56.69,-25.38 56.69,-56.69 0,-31.31 -25.38,-56.7 -56.69,-56.7 -31.31,0 -56.69,25.39 -56.69,56.7 z" />
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
$("path").filter('[id="state002"]').css("fill", "#ffa500");
$("a").filter('[id="state002"]').hover(
function() {
$("state002").tooltip({ content: '<img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png" />' });
}
);
});
</script>
nothing happen when the mouse hover
Ps: am working with asp.net core , and i used this link :
How to show an image in tooltip?

You missed to add the # before state002 in js:
$("#state002").tooltip({ content: '<img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png" />' });
And you should add jquery-ui.min.js too:
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
You can add shake like this:
<div id="toggle">
<a id="state002" href="" title="">move to me</a>
</div>
#section Scripts
{
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
$(document).click(function () {
$("#toggle").effect("shake");
});
$("#state002").tooltip({ content: '<img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png" />' });
});
</script>
}

Why is Jquery UI open/close not working in ASP.Net MVC program

I am using the ASP.Net template in visual studio and I am trying to get a Modal popup on the Index page to work, I wrote some code in java only and it works just fine. If I set autoOpen true I see what I expect to see and I am able to close the popup with the X button but the close function does not work when you select the OK button or the cancel button. If I set autoOpen to false and I can click on the open button nothing happens, it does not open. I have tried many thing and I have searched the internet for answers.
The only file that is important is the Index.cshtml file everything else is the same as when you start a new ASP.Net MVC project:
Index.cshtml:
#{
ViewBag.Title = "Index Page";
}
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div id="message" title="Chuck Norris">
<p> Is the only one to stop this virus</p>
</div>
<button id="opener"> Open Window </button>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$('#message').css('background', 'red');
$('#message').css('color', 'white');
$('#message').dialog({
autoOpen: true,
modal: true,
buttons: {
ok: function () {
$("#message").dialog('close');
},
cancel: function () {
$('message').dialog('close');
}
},
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
$('#opener').on('click', function () {
$('#message').dialog("open");
});
</script>

I am unable to replicate the issue as you described it. I used the following test.
$('#message').css('background', 'red');
$('#message').css('color', 'white');
$('#message').dialog({
autoOpen: true,
modal: true,
buttons: {
ok: function() {
$("#message").dialog('close');
},
cancel: function() {
$('#message').dialog('close');
}
},
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
$('#opener').on('click', function() {
$('#message').dialog("open");
});
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div id="message" title="Chuck Norris">
<p> Is the only one to stop this virus</p>
</div>
<button id="opener"> Open Window </button>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>

In case someone else is looking to solve this problem:
in the Index.cshtml file:
#{
ViewBag.Title = "Home Page";
}
#Styles.Render("~/Content/css")
<link href="~/Content/1.11.2/jquery-ui.css" rel="stylesheet" />
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/jquery-ui.min.js"></script>
#Scripts.Render("~/bundles/modernizr")
<h2>To Stop the virus open the modal</h2>
<p></p>
<button id="modal-opener">Open Dialog</button>
<div id="message" title="Chuck Norris">
<p>This is the only way to stop the virus</p>
</div>
<script>
$(function () {
$("#message").css('background', 'red');
$('#message').css('color', 'white');
$("#message").dialog({
autoOpen: false,
width: 400,
height: 280,
show: {
effect: "shake",
duration: 100
},
hide: {
effect: "explode",
duration: 1000
},
buttons: {
"OK": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
//$('#message').dialog('open');
$("#modal-opener").click(function () {
$('#message').dialog('open');
});
});
</script>
In the _layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
#Styles.Render("~/Content/css")
<link href="~/Content/1.11.2/jquery-ui.css" rel="stylesheet" />
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/jquery-ui.min.js"></script>
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year -ASP.NET Testing Application</p>
</footer>
</div>
#RenderSection("scripts", required: false)
</body>
</html>
IN the home controller:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}

ChromeDriver hangs but when I run same tests on FireFox it works

Hi I have a problem I hope you can help me with. I use ChromeDriver via NUgent in Visual Studio 2013.
This is my code for my Driver-class:
public static void Initialize()
{
Instance = new ChromeDriver()
Instance.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(30));
}
This is my test:
public void Editor_Can_CreateContent()
{
Assert.IsTrue(ContentPage.CreateContent);
}
This is my code for class
public static bool CreateContent
{
get
{
Driver.Instance.FindElement(By.LinkText("CMS")).Click();
return true; //This is now for debug
}
When Chrome enters property CreateContent it hangs and it doesn't click my CMS-link. I've tried various stuff like XPath and partialLink but, nada..... In FireFox it works super fine..... What am I doing wrong here?
This is the HTML:
<!DOCTYPE html>
<html>
<head><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>
EPiServer - Dashboard
</title><link rel="stylesheet" type="text/css" href="/EPiServer/Shell/7.8.2.0/ClientResources/epi/themes/legacy/ShellCore.css" />
<link rel="stylesheet" type="text/css" href="/EPiServer/Shell/7.8.2.0/ClientResources/epi/themes/legacy/DojoDashboardCompatibility.css" />
</head>
<body class="Sleek">
<div data-dojo-type="dijit/layout/BorderContainer" id="rootContainer" gutters="false" style="padding: 0;height: 100%; width: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" class="epi-navigationContainer" region="top" style="border:0; overflow:visible; z-index:900">
<div class="epi-navigation-container-root"><div class="epi-navigation epi-navigation-global"><div class="epi-navigation-container1"><ul><li class="epi-navigation-selected">Dashboard</li><li class="epi-navigation-util"><span class="epi-navigation-menuIcon"><span class="epi-navigation-menuArrow"><span class="epi-navigation-menuText">EPiServer</span></span></span></li><li class="epi-navigation-standard ">CMS<ul id="global_cms_sub"><li>Redigera</li><li>Admin</li><li>Rapporter</li><li>Besökargrupper</li></ul></li><li class="epi-navigation-util"><span class="epi-navigation-menuIcon"><span class="epi-navigation-menuArrow"><span class="epi-navigation-menuText">Regeringskansliet</span></span></span></li><li class="epi-navigation-standard ">Find<ul id="global_find_sub"><li>Index</li><li>Statistik</li><li>Optimeringar</li></ul></li><li class="epi-navigation-util epi-navigation-dropdown"><span class="epi-navigation-menuIcon"><span class="epi-navigation-menuArrow"><span class="epi-navigation-menuText">Hjälp</span></span></span><ul id="global_help_sub"><li>CMS</li><li>EPiServer.Labs.LanguageManager</li><li>EPiServer.OfficePublish</li><li>Licensavtal</li><li>Om EPiServer</li></ul></li><li class="epi-navigation-util epi-navigation-dropdown"><span class="epi-navigation-menuIcon"><span class="epi-navigation-menuArrow"><span class="epi-navigation-menuText">deho</span></span></span><ul id="global_user_sub"><li>Mina inställningar</li><li>Logga ut</li></ul></li><li class=" epi-navigation-dropdown"><span class="epi-navigation-menuIcon"><span class="epi-navigation-menuArrow"><span class="epi-navigation-menuText">Mer...</span></span></span></li><li class="epi-navigation-util"><span class="epi-navigation-menuIcon"><span class="epi-navigation-menuArrow"><span class="epi-navigation-menuText">Sök</span></span></span></li><li>Add-ons</li></ul></div><div class="epi-navigation-container2"></div><div class="epi-navigation-container-utils"></div></div></div><div class="epi-navigation-delimiter"></div>
</div>
<div data-dojo-type="epi/shell/widget/LicenseInformation" region="top"></div>
<div id="applicationContainer" class="epi-applicationContainer" data-dojo-type="epi/shell/widget/Application" region="center"></div>
</div>
<script type="text/javascript">var dojoConfig = {"isDebug":false,"locale":"sv-se","parseOnLoad":false,"async":true,"paths":{"epi-languagemanager":"/EPiServer/EPiServer.Labs.LanguageManager/1.1.0.75/ClientResources/Scripts","tinymce":"/EPiServer/CMS/7.8.2.0/ClientResources/Editor/tiny_mce","epi/cms":"/EPiServer/CMS/7.8.2.0/ClientResources/epi-cms"},"aliases":[["dijit/focus","epi/patch/dijit/focus"],["dojo/window","epi/patch/dojo/window"],["dojo/store/Observable","epi/patch/dojo/store/Observable"],["epi/cms/form/SearchTextBox","epi-cms/form/SearchTextBox"],["epi/cms/contentediting/editors/SelectionEditor","epi-cms/contentediting/editors/SelectionEditor"],["epi/cms/form/PageInfoPicker","epi-cms/form/PageInfoPicker"]],"packages":[{"name":"epi-find","location":"/EPiServerFindEmbeddedResources"},{"name":"epi","location":"/EPiServer/Shell/7.8.2.0/ClientResources/EPi"},{"name":"epi-cms","location":"/EPiServer/CMS/7.8.2.0/ClientResources/epi-cms"},{"name":"epi-packaging","location":"/EPiServer/EPiServer.Packaging.UI/3.1.4.0/ClientResources/epi-packaging"}],"deferredInstrumentation":false,"useDeferredInstrumentation":"","serverTime":"2014-05-22T07:33:18.2277145Z","ioPublish":true};</script>
<script type="text/javascript" src="/EPiServer/Shell/7.8.2.0/ClientResources/dojo/dojo.js"></script>
<script type="text/javascript" src="/EPiServer/Shell/7.8.2.0/ClientResources/epi/epi.js"></script>
<script type="text/javascript" src="/EPiServer/Shell/7.8.2.0/ClientResources/DojoDashboardCompatibility.js"></script>
<script type="text/javascript" src="/EPiServer/CMS/7.8.2.0/ClientResources/ReportCenter/ReportCenter.js"></script>
<script id="_episerver_shell_7_8_2_0_clientresources_epi_shell_resourcebundle_js" src="/EPiServer/Shell/7.8.2.0/ClientResources/epi/shell/ResourceBundle.js" type="text/javascript"></script><script id="_episerver_shell_7_8_2_0_clientresources_epi_shell_widgets_js" src="/EPiServer/Shell/7.8.2.0/ClientResources/epi/shell/widgets.js" type="text/javascript"></script>
<script type="text/javascript">
require(["epi/shell/Bootstrapper"], function(Bootstrapper) {
var settings = [{"name":"App","initializer":null,"moduleDependencies":null,"cssResources":[],"scriptResources":[],"routes":[{"routeBasePath":"/modules/{moduleArea}/{controller}/{action}/{id}","routeDefaults":{"action":"index","id":"","moduleArea":"App"}}],"helpPath":null},{"name":"Shell","initializer":"epi.shell.ShellModule","moduleDependencies":[],"cssResources":["/EPiServer/Shell/7.8.2.0/ClientResources/epi/themes/sleek/document.css","/EPiServer/Shell/7.8.2.0/ClientResources/epi/themes/sleek/sleek.css"],"scriptResources":["/EPiServer/Shell/7.8.2.0/ClientResources/epi/shell/ResourceBundle.js","/EPiServer/Shell/7.8.2.0/ClientResources/epi/shell/widgets.js"],"routes":[{"routeBasePath":"/EPiServer/{moduleArea}/{controller}/{action}/{id}","routeDefaults":{"moduleArea":"Shell","controller":"Dashboard","action":"Index","id":""}}],"helpPath":null},{"name":"EPiServer.OfficePublish","initializer":null,"moduleDependencies":null,"cssResources":[],"scriptResources":[],"routes":[{"routeBasePath":"/modules/{moduleArea}/{controller}/{action}/{id}","routeDefaults":{"action":"index","id":"","moduleArea":"EPiServer.OfficePublish"}}],"helpPath":"http://webhelp.episerver.com/addons/publishoffice/1.0/EN"},{"name":"Find","initializer":null,"moduleDependencies":[{"moduleName":"CMS","dependencyType":1}],"cssResources":[],"scriptResources":[],"routes":[{"routeBasePath":"/EPiServer/{moduleArea}/{controller}/{action}/{id}","routeDefaults":{"action":"index","id":"","moduleArea":"Find"}}],"helpPath":null},{"applicationVirtualPath":"/","startPage":7,"rootPage":1,"wastebasketPage":2,"siteAssetsFolder":3,"globalAssetsFolder":3,"contentAssetsFolder":4,"rootCategory":1,"frames":[{"id":1,"name":"_blank","description":"Open the link in a new window","localizedDescription":"Öppna länken i nytt fönster","isSystemFrame":true,"localizationService":{"providers":[{"availableLanguages":["en"],"name":"EPiServerShellModulesResources","description":"EPiServerShellModulesResources"},{"availableLanguages":["en","sv","da","fi","nb","nl","de","es","fr","ja","no","pt","zh-CN"],"name":"EPiServerShellProductModulesResources","description":"EPiServerShellProductModulesResources"}],"availableLocalizations":["en","sv","da","fi","nb","nl","de","es","fr","ja","no","pt","zh-CN"],"fallbackBehavior":5,"fallbackCulture":"en"}},{"id":2,"name":"_top","description":"Open the link in the whole window","localizedDescription":"Öppna länken i hela fönstret","isSystemFrame":true,"localizationService":{"providers":[{"availableLanguages":["en"],"name":"EPiServerShellModulesResources","description":"EPiServerShellModulesResources"},{"availableLanguages":["en","sv","da","fi","nb","nl","de","es","fr","ja","no","pt","zh-CN"],"name":"EPiServerShellProductModulesResources","description":"EPiServerShellProductModulesResources"}],"availableLocalizations":["en","sv","da","fi","nb","nl","de","es","fr","ja","no","pt","zh-CN"],"fallbackBehavior":5,"fallbackCulture":"en"}}],"userName":"deho","useLegacyEditMode":false,"displayResolutions":[],"currentContentLanguage":"sv","contentRepositoryDescriptors":{"pages":{"key":"pages","name":"Sidor","roots":["1"],"searchArea":"cms/pages","customNavigationWidget":"epi-cms/component/PageNavigationTree","containedTypes":["episerver.core.pagedata"],"linkableTypes":["episerver.core.pagedata"],"preventDeletionFor":["7","1","2"],"preventCopyingFor":["1","2"],"mainViews":["/episerver/cms/home"],"sortOrder":100,"customSelectTitle":"Sida","creatableTypes":["episerver.core.pagedata"],"mainNavigationTypes":null,"preventContextualContentFor":["1","2"]},"blocks":{"key":"blocks","name":"Block","roots":["3"],"searchArea":"CMS/blocks","containedTypes":["episerver.core.contentfolder","episerver.core.blockdata"],"creatableTypes":["episerver.core.blockdata"],"mainNavigationTypes":["episerver.core.contentfolder"],"sortOrder":200,"mainViews":["/episerver/cms/home"],"customSelectTitle":"Block","changeContextOnItemSelection":true,"customNavigationWidget":null,"preventContextualContentFor":["1","2"],"preventDeletionFor":null,"preventCopyingFor":null,"linkableTypes":null},"media":{"key":"media","name":"Media","roots":["3"],"searchArea":"CMS/files","creatableTypes":[],"containedTypes":["episerver.core.contentfolder","episerver.core.icontentmedia"],"mainNavigationTypes":["episerver.core.contentfolder"],"linkableTypes":["episerver.core.icontentmedia","episerver.core.icontentimage","episerver.core.icontentvideo"],"sortOrder":300,"mainViews":["/episerver/cms/media"],"changeContextOnItemSelection":true,"customNavigationWidget":null,"preventContextualContentFor":["1","2"],"preventDeletionFor":null,"preventCopyingFor":null,"customSelectTitle":null}},"expirationNotificationPeriod":5184000,"imageEditorEnabled":true,"disableVersionDeletion":false,"name":"CMS","initializer":"epi-cms.CMSModule","moduleDependencies":[{"moduleName":"Shell","dependencyType":1}],"cssResources":["/static/css/Episerver/UIExtensions.css","/EPiServer/CMS/7.8.2.0/ClientResources/epi-cms/epi.css"],"scriptResources":["/EPiServer/CMS/7.8.2.0/ClientResources/epi-cms/ResourceBundle.js","/EPiServer/CMS/7.8.2.0/ClientResources/epi-cms/widgets.js","/EPiServer/CMS/7.8.2.0/ClientResources/ReportCenter/ReportCenter.js","/util/javascript/episerverscriptmanager.js","/EPiServer/CMS/javascript/system.js","/EPiServer/CMS/javascript/dialog.js","/EPiServer/CMS/javascript/system.aspx"],"routes":[{"routeBasePath":"/EPiServer/{moduleArea}/{controller}/{action}/{id}","routeDefaults":{"controller":"Home","action":"Index","id":"","moduleArea":"CMS"}},{"routeBasePath":"/EPiServer/CMS/{path}","routeDefaults":{"moduleArea":"LegacyCMS"}},{"routeBasePath":"/util/{path}","routeDefaults":{"moduleArea":"Util"}}],"helpPath":"http://webhelp.episerver.com/cms/7.5/sv/Default_csh.htm"},{"name":"EPiServer.Packaging.UI","initializer":null,"moduleDependencies":[{"moduleName":"Shell","dependencyType":1}],"cssResources":[],"scriptResources":["/EPiServer/EPiServer.Packaging.UI/3.1.4.0/ClientResources/epi-packaging/ResourceBundle.js","/EPiServer/EPiServer.Packaging.UI/3.1.4.0/ClientResources/epi-packaging/packaging.js"],"routes":[{"routeBasePath":"/EPiServer/AddOns/{controller}/{action}","routeDefaults":{"moduleArea":"EPiServer.Packaging.UI","controller":"AddOns","action":"Index"}}],"helpPath":null},{"name":"EPiServer.Labs.LanguageManager","initializer":"epi-languagemanager.LanguageManagerModule","moduleDependencies":[{"moduleName":"Shell","dependencyType":1},{"moduleName":"CMS","dependencyType":1}],"cssResources":["/EPiServer/EPiServer.Labs.LanguageManager/1.1.0.75/ClientResources/EPiServer.Labs.LanguageManager.css"],"scriptResources":[],"routes":[{"routeBasePath":"/EPiServer/{moduleArea}/{controller}/{action}/","routeDefaults":{"moduleArea":"EPiServer.Labs.LanguageManager","controller":"","action":"Index"}}],"helpPath":"http://webhelp.episerver.com/addons/languagemanager/7.0/EN/Default.htm"}],
viewSettings = {"defaultContext":null,"componentCategories":["dashboard"]},
bootStrapper = new Bootstrapper(settings);
bootStrapper.initializeApplication("/episerver/dashboard", "Shell", viewSettings).then(function() {
require([
"dojo/_base/connect",
"dojo/parser",
"dijit/registry",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"epi/shell/widget/GlobalMenu",
"epi/shell/widget/Application",
"epi/shell/widget/LicenseInformation",
"epi/shell/widget/ApplicationContentPane",
"dojo/domReady!"],
function (connect, parser, registry) {
parser.parse();
// Trigger layout when the global navigation changes its layout.
connect.subscribe("/epi/shell/globalnavigation/layoutchange", null, function() {
registry.byId("rootContainer").layout();
});
});
});
});
</script>
</body>
</html>

Jquery Dialog not open in my simple code

What is wrong for the Jquery Dialog not opening when i click in the button?
Below you can see a simple code of the problem.
Code:
#model IEnumerable<TPTMVC.Models.User>
#using TPTMVC.Models;
#{ViewBag.Title = "Index";}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready
(
function ()
{
$("#opener").click(function () {
$("#dialog100").dialog("open");<--Not opening
});
$("#dialog100").dialog({ autoOpen: false });
}
);
</script>
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<button id="opener">open the dialog</button>
<div id="dialog100" title="Dialog Title">I'm a dialog</div>
Result:
I'm using entity-framework with C#.
Update
$(document).ready(function () {
$('#opener').click(function () {
alert("Click");//It's show
$('#dialog100').dialog('open');
return false;
});
$('#dialog100').dialog({ autoOpen: false });//After
});
In this case the alert work
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });//Before
$('#opener').click(function () {
alert("Click");//it's not show
$('#dialog100').dialog('open');
return false;
});
});
In this not.
The solution:
#section Scripts {
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });
$('#opener').click(function () {
alert("Bum");
$('#dialog100').dialog('open');
return false;
});
});
</script>
}
It was missing #section Scripts
Thanks for any help!

try $('#dialog100').dialog('open');
or...
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });
$('#opener').click(function () {
$('#dialog100').dialog('open');
return false;
});
});
EDIT: based on comments
Use Chrome, hit F12, and check resources to make sure you're loading them...
Your screen should look like this, only the button displayed...
The click event should then show the dialog...
Is this view wrapped in the _layout? if so, you are missing a section. Usually, the _layout file will have a scripts section, and you will need to have your JS code in this scripts section in your view...
Layout.cshtml
#RenderSection("scripts", required: false)
view.cshtml
#section Scripts { ..jquery scripts..}

It appears that your set up of the dialogue happens within the click event, so it doesn't get set up properly. It needs to happen outside of the click event.
Here's a working example...
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Animation</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>

JQWidgets not working in MVC 4

I am trying to use the sample off of jqWidgets for the ListBox. I have copied the code directly into my index.cshtml file. I am not seeing the desired results, which would be what the sample looks like. All it is showing me is the button.
Here is a link to the page. I have reduced the content and allowed for anyone to look at it: https://drive.azurewebsites.net/Question
Here is the sample's website: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxlistbox/jquery-listbox-getting-started.htm
I'm not sure how to troubleshoot this or where to look to see what is really going wrong. I am using Chrome and pulled up Inspect Element. The scripts are being retrieved.
Here is my code:
<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxcore.js"></script><script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait",
"Caffé Corretto",
"Café Crema",
"Caffé Latte",
];
// Create a jqxListBox
$("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '200px' });
// disable the sixth item.
$("#jqxlistbox").jqxListBox('disableAt', 5);
// bind to 'select' event.
$('#jqxlistbox').bind('select', function (event) {
var args = event.args;
var item = $('#jqxlistbox').jqxListBox('getItem', args.index);
$("#eventlog").html('Selected: ' + item.label);
});
$("#button").jqxButton();
$("#button").click(function () {
var item = $('#jqxlistbox').jqxListBox('getSelectedItem');
if (item != null) {
alert(item.label);
}
});
});
</script>
<div id='jqxlistbox'>
</div>
<div style="margin-top: 10px;">
<input id="button" type="button" value="Get Selected Item" />
<div id="eventlog"></div>
</div>
</div>
</body>

Your Scripts are not referenced correctly. In MVC4, the process of referencing Scripts is different - http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-binding-to-sql-database-mvc4.htm

Categories

Resources