We Keep Coding

JQuery UI dialog modal caching old values

I'm having a big problem using using Jquery dialog. The dialog is displayed when the user clicks on a link. The first time the form is opened, it works fine; the form is submitted to the server,
and the part of the page is updated.However, subsequent attempts to use the form are where the problems start. When i click on the hyperlink for the second time,
(with closing dialog or without closing dialog), it is showing the old values. This happens even if I navigate to a different screen in the application and then return.
The content of the page which is re-rendered after each submission includes the form which makes up the dialog,
so the 'old' values which are being submitted no longer even exist in the page markup.
They are being somehow 'remembered' by JQuery UI.
$(document).on("click", "#hyperLink", function () {
$("#divSection").dialog({
title: "User Details",
resizable: false,
autoOpen: false,
height: 'auto',
width: 300,
appendTo: "form"
});
});
I don't know how to work around this behaviour, can anyone please help me how to resolve this?

Position jQuery dialog centered vertically with dynamic height contents

I'm using a jQuery dialog whose contents are variable in size. I populate the contents dynamically with the create method. When the dialog renders, the top-left corner of the dialog is positioned in the center of the screen, but since the dialog is quite tall, the bottom goes well off the page. I'd like for it to be perfectly-centered regardless of the size of the dialog. Here's the jQuery:
var dialogOptions = {
title: "",
modal: true,
width: 'auto',
autoOpen: false,
create: function () {
$(this).load("/Management/RenderPartialCreateSubject");
}
};
$("#dialog-message").dialog(dialogOptions);
$("#dialog-message").dialog("open");
The only thing I can figure is that the content isn't being loaded before the dialog is positioned. Any way to get it to load content beforehand?
I've also tried loading the partial view straight into the div and then opening the dialog like so:
$.get("/Management/RenderPartialCreateSubject", null, function (data) {
$("#dialog-message").html(data);
});
//open add new subject dialog
var dialogOptions = {
title: "",
modal: true,
width: 'auto',
autoOpen: false
};
$("#dialog-message").dialog(dialogOptions);
$("#dialog-message").dialog("open");
Which renders incorrectly the first time, but it works the second time (after the content has been loaded).

I'll wait to see if someone has a better answer, but I was able to solve it by replacing the $.get with $.ajax and setting async: false, which allows the content to load before displaying the dialog.

Stop multiple Dialog windows being opened

I'm trying to make a ajax call for the partialview of my webpage, then pull title and data from it before putting it in a Dialog window. However when I create the dialog, it opens once correctly and 6 more times as an empty Dialog - just the title bar.
In chrome I can see the partialView contains the HTMLDivElement, and 7 HTMLScriptElements so that accounts for the multiple opens - however if I open the Dialog for just that div element it will not load the scripts (and thus lookups and tabs do not work).
$.ajax(url)
.success(function (partialViewHtml) {
// get page data
$(partialViewHtml).dialog({
title: title,
modal: true,
resizable: true,
draggable: true,
height: sheight,
width: swidth
});
Any help would be greatly appreciated. I've been banging my head on a wall for a while. Thanks.

As you seem to have understood, this is normal because of the 7 elements in the jQuery collection on which you open the dialog.
You should add the script elements separately to the page, using for example
$('body').append(scriptElementHTML);
And then open your dialog on just the div :
$(divHtml).dialog({

Not sure whthere jQuery ui has a method to close all dialogs, but we can do it like this
function createDailog () {
$(".ui-dialog-content").dialog("close"); // close all dialogs
$("<div>fdfdsfdsfdsfds<div>").dialog({
title: "title",
modal: true,
resizable: true,
draggable: true,
height: 200,
width: 200
});
}
or you can put a condition like this
if(!$(".ui-dialog-content:visible").length){
// show dialog
}

Show Modal Dialog implementation using JQuery

I need to open a page as a Modal Dialog using Jquery .For Example: I have 2 pages say, Parent.aspx & Child.aspx, I need to open child.aspx in a modal dialog using JQuery when i click on a button/link in the parent.aspx. Also Postback can happen in the parent and child pages.

function test(){
openShadowBox("http://www.google.com", 400, 600, 'my google');
}
function openShadowBox(url, height, width, title){
width = parseInt(width)+60;
var horizontalPadding = 30;
var verticalPadding = 30;
$('<iframe id="cdt_shadowbox" src="' + url + '" frameBorder="0"/>').dialog({
title: (title) ? title : 'CDT Shadowbox',
autoOpen: true,
width: width,
height: height,
modal: true,
resizable: true,
autoResize: false,
closeOnEscape: true,
//position: 'top',
overlay: {
opacity: 0.5,
background: "black"
}
}).width(width - horizontalPadding).height(height - verticalPadding);
$('html, body').scrollTop(0);
}

I think the most easiest way is to use iframe in you dialog pointing to Child.aspx.

JQuery has a number of options for creating a Modal "popup" with a page, but as I read your question I think you want to open a page in a separate browser window with a modal relationship to the original page. Javascript (Jquery) allows for Window.Open. This opens your second page in a new window,however, it does not create a modal relationship, nor (I believe) can it.

There are a number of jquery plugins to work with modal dialogs, for instance:
http://plugins.jquery.com/project/modaldialog
Depending on the user experience you're looking for, you'll probably either want an iframe in the modal dialog or perhaps an ajax call to fetch the content and load it into the dialog.

You can either use an iFrame or an UpdatePanel.
A modal dialog is really no different than any other page element. What makes it appear to be "modal" is simply CSS and nothing more.
The one difficulty you make have with ASP.NET and jQuery, though, is that ASP.NET needs everything to be inside it's single form tag. Since jQuery isn't designed specifically for ASP.NET it (and its plugins) may or may not know (or care) about this.
For example if you use simplemodal it has an option to specify where on the form the dialog is appended, you can use this to ensure it's inside #aspnetform and everything it it should work just like any other page element.

refresh parent page from jquery dialog

I want to refresh the parent page when I close my jQuery dialog.
this is the code I use for my dialog. I tried top.opener.location but it did not do nothing but put me on top of the page.
$("#dialog").dialog({
height: 700,
width: 600,
closeOnEscape: true,
title: 'View',
close: function(event, ui){
top.opener.location.reload(true);
}
}).dialog("open");

The jQuery dialog opens on the same page, not in a new window. So simple refresh the current page:
location.reload(true);