JQWidgets not working in MVC 4 - c#

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

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 do `JQuery` tabs lose styling after a button click

I am using JQuery tabs in my Asp.Net/C# app.
I am modelling my approach after this article. The JQuery is outside of my
<asp:UpdatePanel ID="UpdatePanel1"...></asp:UpdatePanel>
wrapper while the html components are inside.
Whenever I click a button, my tabs completely lose their CSS styling and I see all of the tab contents, rather than just the
<div id="current-tab">
for that tab.
Why is this happening and how do I fix it?
My guess is that its related to post-back or the update panel somehow, but I am not sure why the added C# code under page_load doesn't keep the selected tab current on post-back when the button is fired.
ASPX
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var tabs = $("#tabs").tabs({
activate: function (e, i) {
selected_tab = i.index;
}
});
selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
tabs.tabs('select', selected_tab);
$("form").submit(function () {
$("[id$=selected_tab]").val(selected_tab);
});
...
</script>
....
<table>
<tr>
<td style="padding: 5px;">
<div id="tabs">
<ul>
<li>Tier 1</li>
<li>Tier 2</li>
<li>Tier 3</li>
<li>Tier 4</li>
</ul>
<div class="tab-content">
<div id="tab-1">
...
</div>
<div id="tab-2">
...
</div>
<div id="tab-3">
...
</div>
<div id="tab-4">
...
</div>
</div>
</div>
<asp:HiddenField ID="selected_tab" runat="server" />
</td>
</tr>
</table>
C#
protected void Page_Load(object sender, EventArgs e)
{
...
selected_tab.Value = Request.Form[selected_tab.UniqueID];
...
}

You are right, it has something to do with a Partial PostBack. So in order for jquery functions to work again you need to rebind it after the Partial PostBack is done.
<script type="text/javascript">
$(document).ready(function () {
buildTabs();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
buildTabs();
});
function buildTabs() {
var tabs = $("#tabs").tabs({
activate: function (e, i) {
selected_tab = i.index;
}
});
selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
tabs.tabs('select', selected_tab);
$("form").submit(function () {
$("[id$=selected_tab]").val(selected_tab);
});
}
</script>
But the selected tab is a different story. You also need to store the active tab somewhere and re-apply it after the partial PostBack is done. See this answer for details.
But basically you need to store the active tab ID in SessionStorage, cookie or Hiddden input and re-apply it in prm.add_endRequest(function () {

How to redirect to another page and specific div on button click in mvc

I have one page called Page1 which have a button.
<button onclick="redirecttodivofotherpage(); "></button>
The other Page2 have 3 Div
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
I want to redirect to div3 on button click of Page1 button.
How to do it with controller or jquery.

You could try something like this:
<button class="js-btn"></button>
$(function(){
$(".js-btn").on("click",function(){
window.location = "..../#div3";
});
})
The string "..../#div3" represent the relative url of your page and at the end has a #div3. This way, using window.location, you would be redirected to the page you want and using #div3 to the section you want.

This can be done with cookies. Setting a cookie with id you want to scroll, and then, when the new page is loaded, read the cookie and scroll to defined id. I used the very popular plugin jquery-cookie.
Check this sample solution Note: Click on Events to nav to the other page.
**http://plnkr.co/edit/hBJj69nP6kvrEuoCVw3k?p=preview**

try this working demo, that will work
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button class="click">Click Me</button>
<div id="mydiv" style="border:2px solid black;width:800px;height:900px; background-color:orange; position:absolute;top:1000px;margin:20px;">
hello anuradh
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".click").on('click',function(){
window.location = "#mydiv";
});
});
</script>
</body>
</html>
or else you can scroll it nicely like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button class="click">Click Me</button>
<div id="mydiv" style="border:2px solid black;width:800px;height:900px; background-color:orange; position:absolute;top:1000px;margin:20px;">
hello anuradh
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".click").on('click',function(){
//window.location = "#mydiv";
$('html, body').animate({
scrollTop: $("#mydiv").offset().top
}, 2000);
});
});
</script>
</body>
</html>

Use a window.location.hash to scroll to the element with the id
<button class="js-btn"></button>
$(function(){
$(".js-btn").on("click",function(){
window.location.hash = "#div3";
});
});

Try this, it works for me:
<a class="className">link</a>
$(".className").on("click", function () {
window.location = "yourPage.html#divId";
});

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 centering

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>

Categories

Resources