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.
Related
I'm using the .load() function to load an .aspx page into my jQuery UI Dialog, which works fine. The issue is that the page being loaded is in a different directory than what the dialog open call is coming from and when i try to hit my 'submit' button from that newly loaded page it can't find the 'search.aspx' path because it's looking in the original path.
Basically:
ucEasyFill.ascx contains the div declaration, and the link to open the modal popup. this is located in the forms/UserControls/ folder;
<div id="modalSearchWindow" style="display:none;" class="MODAL_SEARCH_WINDOW"></div>
<img id="imgClearClient" src="images\clear.png" class="efIMG" />Clear </a><img id="imgSearchMag" src="/applications/images/search_mag.gif" class="efIMG" />Find
ucEasyFill.js contains the dialog declaration within the document.ready function in forms/scripts/ folder;
MODAL_SEARCH_WINDOW = $("#modalSearchWindow").load('EasyFill/Search.aspx').dialog({
position: "center",
autoOpen: false,
resizable: false,
autoResize: true,
draggable: true,
modal: true,
width: 580,
height: 450,
dialogClass: "MODAL_SEARCH_WINDOW",
closeOnEscape: true,
open: function (event, ui) {
$('.MODAL_SEARCH_WINDOW .ui-dialog-titlebar').each(function () {
$(this).css("display", "none");
});
}
});
When 'Search' is clicked on forms/EasyFill/Search.aspx page i receive the 404 error of;
POST http://localhost/applications/forms/Search.aspx 404 (Not Found)
which makes sense to me since the dialog is being loaded from the /forms/ directory and not from the forms/easyfill/ directory. Really my question is how do i get around this? I am only trying to do this because of the new deprecation of showModalDialog() in Chrome 37
Since you're loading the file from forms/UserControls/ucEasyFill.ascx, you need to go up a level to get into forms/EasyFill. So it should be:
MODAL_SEARCH_WINDOW = $("#modalSearchWindow").load('../EasyFill/Search.aspx').dialog({
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 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.
i m having a problem with popup, there is an iframe in my mainpage, which is containing some other page. i want to show popup from that containing page and make background dim. i m changing my mainpage styles like making it opacity .40 but thing is its getting applied to my popup too,,, my popup is also getting dim. what to do?
i want to show popup clearly so that people gets attracted to popup
You can create dialog on parent and then fire it as:
(Assuming you have control on both frames and you have jquery-ui loaded on parent.)
parent.$dialog = jQuery("<div></div>");
parent.$dialog.html("YOUR MESSAGE GOES HERE!!!");
parent.$dialog.dialog({
title : "YOUR MESSAGE TITLE!",
bgiframe: true,
width: 400,
zIndex: 2501,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Yes': function() {
jQuery(this).dialog('close');
},
'No': function() {
jQuery(this).dialog('close');
return false;
}
},
close: function() {
jQuery(this).dialog('destroy');
}
}).show(400);
Hope this helps,
Sinan.
The parent frame is the only one that can put the dimmer layer over itself, but that would also dim the dialog you want to show. You can put that dialog in the parent frame and call it from the child frame, if you control both.
And interframe communication is not trivial:
Are they on the same domain? (If not, there is hope but it is more difficult)
Do you control both pages?