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.
Related
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?
I have a dialog setup as follow
$("#myDialog").dialog({
autoOpen: true,
close: function(event, ui) {
$("#myDialog-content").html("");
$(this).dialog("destroy");
}
});
$("#myDialog").css("min-height","");
$("#myDialog-content").html("Loading...");
$.ajax({
...
success: function(response) {
$("#myDialog-content").html(response);
}
});
This working fine I load and close dialog in same page but not able to make it work properly where I move between pages.
Here is a my page flow
From source page(say PageA) I make AJAX call to load the page containing dialog div(say PageB).
Link on this page call above method to display dialog. (For first time it runs OK).
When I click close button. Dialog close and with firebug I can still see dialog div at the end with UI classes but in hidden state.
If I go back to source page (Page A) and reload the PageB.In firebug I can see two div - one originally from JSP and second one from step 3.
Now if I click button to load dialog box - It used hidden to populate new data and never use new div created by jquery. So I just have blank dialog box.
I am not sure if this is jquery Dialog issue or my page flow. One possible solution I though of is use remove in close function to remove dialog div completely but it puts burden to create this div everytime page PageB is loaded. Is there any other way or any thing I am doing wrong in this scenario?
If i understood correctly the situation, You have 2 options:
If you somehow cleaning the content of "Page B", remove the modal
then.
If you do not have the cleaning mechanism like that, just
.remove() content of modal on close
Sidenote: i would advise not to use jquery for .css and .html('Loading...'). Also, it is good to cache jquery elements in variables e.g var dialog = $("#myDialog");
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
}
Imagine a simple list of users with "edit" links. Clicking "Edit" opens up a dialog box with details for the selected user. The "Details" popup is a partial view.
I have an issue with Partial Views being cached when opening them in JQuery dialog windows.
My partial view( Notice the OutputCache attribute as one of the things I tried to solve the caching issue):
[HttpGet]
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public PartialViewResult EditUser(int id)
{
var userList = userRepository.GetByRole(id);
return PartialView("EditUser",userList);
}
The PartialView above is requested and loaded from the following Javascript function:
function editUserOpen(id) {
$.ajaxSetup({ ///// Another thing I tried to solve caching
cache: false
});
var url = "/User/PartialViewResult/" + id;
$('#user-wrap').empty().load(url, function () {
$("#dialog-edit-user").dialog({
title: "Edit User",
autoOpen: false,
height: 300,
width: 500,
modal: true
});
$('#dialog-edit-user').dialog("open");
});
}
As shown above "dialog-edit-user" ( along with "dialog-add-user" and "dialog-delete-user" ) are located inside of the "user-wrap" Div in the DOM.
Functionally everything works but when I open a dialog, cancel and then try opening dialogs for other users, until the page is refreshed the dialogs will always contain info from the initially displayed dialog.
I figured its a caching issue but I ran out of ways to solve it.
I would like to stay away from $.ajax({ cache:false; }).html(content) if possible. It seems to me that it's a lot slower than .load().
Here is what I discovered.
Everytime JQuery dialog is initialized with .dialog() as shown above the div that becomes a pop up is being taken out of the DOM and moved the the bottom of the page. Dialog Div cannot be a child of another Div. In my example it was:
<div id="user-wrap">
<div id="dialog-edit-user"> /// <--- Jquery dialog div
</div>
</div>
Dialog cannot be wrapped in other divs.
After the first click, when the dialog is displayed JQuery simply starts accumulating duplicate Divs at the bottom of the page. $("#").dialog('open') opens the very top DIV of accumulated duplicated every time making the programmer/user think it's a caching issue.
So the solution is to either remove the div created by JQuery from the bottom of the page on .dialog({close: } event or to move it back up to the parent wrapper DIV with JQuery .append() / .appendTo() functions.
Hope this helps to a next programmer who runs into similar issue.
Add some random hash to the URL to keep it unique:
...
var url = "/User/PartialViewResult/" + id + "?t=" + new Date().getTime();
...
This will always load new content.
I'm having some trouble with IE6 and jQuery UI. I have a popup dialog (modal, if it matters), that displays a "yes/no" dialog to the user with some information. In order to facilitate this, I build the dialog with autoOpen = false, and then I call $('#popup').show() later on as needed, in response to various different events. Now, in IE6 (and only IE6, as far as I can tell), the .dialog method will occasionally fail but STILL return the jQuery object. So, rather than show a popup, the .show() method just display a div container in the html page.
What could be causing this, and how I can fix this behavior?
Thanks.
$('#myDialog').dialog({
autoOpen: false,
buttons: {
"No": function()
{
$(this).dialog('close');
//do stuff
},
"Yes": function()
{
$(this).dialog('close');
//do stuff
}
},
draggable: false,
modal: true,
resizable: false,
title: "Confirmation",
width: "500px",
zIndex: 2000
});
and later
$('#myDialog').dialog('open').show();
Pretty standard.
New information
I'm loading the page that makes the dialog with ajax inside of another dialog, which can be repeatedly created and destroyed. Now, each time my page gets loaded with ajax, .dialog(opts) should re-instantiate the dialog div, correct? I've found that this is the scenario.
1.) An outer dialog uses ajax to replace its content with my content.
2.) My content launches a dialog that was previously created and set to not autoopen.
3.) The outer dialog is destroyed as the inner dialog is closed.
4.) The outer dialog is reopened. The inner dialog no longer is able to appear as a dialog in ie6. This ONLY happens in ie6.
You should open your dialog using
$('#myDialog').dialog('open');
instead of
$('#myDialog').show();
The first method displays actual dialog box, while the one you are using just causes the #myDialog item to be displayed (with no UI Dialog magic). show() method is the part of the core jQuery library and shoudn't be used to invoke a dialog.
I had a similar situation and was never able to reuse the dialog. I had to destroy and recreate both dialogs each time.
I use the bgiframe: true and I never got any problem with them with I6, FFox, etc.
More info: http://docs.jquery.com/UI/Dialog#option-bgiframe
Regards.
By the way, when you are hiding your modal before you open it, are you using style="display:none" as your hiding attribute, or a CSS class, or jquery?
The reason I ask, is that if you use simply style="display:none" I never have problems with the modal showing the modal perfectly all the time using dialog("open") but if I use either css or jquery, I always have problems.
You may want to test it.
Marcus