I have a content page(Say.. invoice.aspx) in asp.net application with master pages.
The content page(invoice.aspx) is using a gridview, which displays records from database.
Currently i am navigating to this page using - Response.redirect("invoice.aspx") and this is working fine.
But i need to display this page as pop-up from calling page, so that this popup invoice can be seen on the top of other pages.
Please help me if this can be done using javascript or some other way.
Thanks in advance..
A page popup can be implemented using a div as a container with a different style (opacity, window position, size etc) and has a higher z-index than the rest of the page.
thus basically you need a structure like
<div class="overlayOuter">
<div class="overlayInner">
<!-- external content to be loaded here -->
</div>
</div>
and now using AJAX you load the invoice.aspx page to the inner container and show the container and reduce the opacity of the outer container.
There should be libraries out there that let you do this. you need to explore that on your own.
You can use modal popups for the above scenario:
one example can be found here: http://sandbox.scriptiny.com/tinybox2/
its easy and not much code you need to write and also can load popup as an iframe so postbacks can be handled without posting back parent page or you can use ajax
function OpenWindow(strChildPageUrl) {
var testwindow = window.open(strChildPageUrl, "Child", "width=700px,height=650px,top=0,left=0,scrollbars=1");
testwindow.moveTo(100, 0);
}
</script>
Related
I have a requirement to open up a Jquery modal dialogue but it's contents needs to be either a .aspx or .ascx, is this possible?
I know that the dialogues usually open a div from the same page but I need to be able to load them up from other places and need to be able to send data to and from the modal contents as well.
Any help is appreciated.
The easy way is to place the control on another page and then load it into the dialog with iframe. (how?)
You can use jQuery.load
$("#mydiv").load("pageToLoad.aspx #container");
pageToLoad.aspx:
<html>
<body>
<div id="container">
<!--stuff goes here -->
</div>
</body>
</html>
Probably it will work but haven't tried it.
You could do this using iframe.
http://www.w3schools.com/tags/tag_iframe.asp
1) create separate .aspx page with content you want to show in dialog;
2) in the page add div with iframe inside it;
My site is written in C# with ASP.NET, all pages being loaded are .aspx pages.
I'm using a button
<input type="button" onclick="FindBuilding()">
to trigger a javascript function
function FindBuilding() {
$('#BuildingPopup).load('./BuildingPopup.aspx?lid=xxx');
$('#BuildingPopup).dialog('open');
}
that opens a modal dialog I've created
$("#BuildingPopup").dialog({
modal: false,
autoOpen: false,
position: "center",
resizable: false,
height: 671,
width: 1042,
stack: true
});
The dialog is created inside $(document).ready function
The Problem:
After the dialog loads BuildingPopup.aspx the parent page then loads the same page -- this happens anytime I try to load any page in a modal dialog, regardless of content. BuildingPopup.aspx is just an example.
What I have tried to fix it:
I have tried creating the dialog first, then loading the page using the open button. I have also tried using an iframe which works but the pages never display well and it's a hassle/bad fix.
Some clues?
Some of the pages are calling a web service through AJAX during page load
The problem persists on pages with and without updatepanels
Some pages are evaluating code blocks during page load
UPDATE
I have discovered that the problem occurs when an updatepanel on the parent page updates.
<asp:UpdatePanel ID="updatepanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
This occurs when an <asp:Timer> executes an OnTick() method in the codebehind(to update the panel).
Hmmm I had the same problem as this, and I solved it by using update panels for any code that required a callback, not sure why that would not work...
Tuns out I just needed to phrase my question better -- I finally found someone else who was having the same problem as me.
Answer was found here: UpdatePanel within jQuery.load()-ed content breaks out of the page on postback
In a nutshell the problem was that using .load was pulling in extra tags from the loaded page that was breaking the HTML on the parent page. <head> <title> etc were being pulled into the parent page and causing the problems.
To fix the problem all that was needed was to specify what content I wanted to pull from the loaded page using .load(/loadedpage.aspx #content) instead of pulling the whole page.
I have a pretty simple web-form set up in .Net where I am leveraging jQuery for some of the functionality. I am using the DOMWindow portion for part of the presentation layer.
There is a login form in a div that is set to display:none. When a user clicks a button on the page, it displays the login form. However the .Net button for the login form will not fire it's event when display is set to none. If i take this out, it fires fine. I have also tried using the visibility attribute, but no luck.
the div code is:
<div id="Login" style="display:none;">
The launching code is:
click here to login.<br />
the jQuery code is:
function LaunchLoginWindow() {
$(document).append("#Login");
$.openDOMWindow({
loader: 1,
loaderImagePath: 'animationProcessing.gif',
loaderHeight: 7,
loaderWidth: 8,
windowSourceID: '#Login'
});
}
Any help or explanation that anyone can offer is appreciated.
I noticed i had some code in there defining a client-side function on the Login div. I removed this so as to eliminate it as a possible issue.
I can see in your code that you are appending the div #Login but not setting its style property back to normal like block so. Set it back to block and i am sure it will work
try adding somthing like:
$(document).append("#Login").show();
OK, after playing around with this using firebug, I found the issue: When the jQuery plug-in DOMWindow creates its display layer, it appends to the HTML node of the DOM, which places the control outside the asp.net form tag. Therefore the button and actions associated with it via the DOMWindow are not recognized by .Net. So i edited the DOMWindow source file to append to the DOM form node rather then the html node.
The drawback is that the source has now been customized and will have to be QA'd thoroughly, especially if any further changes are made. But I hope to manage this effectively via commenting in the file.
Hope this helps anyone else who hits this issue.
pbr
The Scenario: I have an asp.net website where I show a div popup on page load for taking a few user details. When a user inputs the details, or closes the popup, I set up a flag cookie so that the popup is not displayed again for the user. The div is in the MasterPage so that it is displayed no matter on which page a user lands first time. The div contains an UpdatePanel which has all the controls required for taking the details. This whole functionality is working fine.
The Problem: Now this div popup is not showing(by setting display:none) on subsequent postbacks(which I want), but the html markup is still loading with the page unnecessarily adding to the page size. What I would idealy want to do is: Check if flag cookie is set. If no, show the popup, else remove the popup's markup from the page.
Now since the div is not a server control, I cannot possibly remove it and the all the controls inside it. So, I thought of removing the UpdatePanel from the page:
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Cookies["flag"] != null)
{
if (Page.Controls.Contains(updpnl_contact))
{
Page.Controls.Remove(updpnl_contact);
updpnl_contact.Dispose();
}
}
}
But I guess this tends to work with dynamically added controls only, and since the control is added at Design Time, it is not being removed.
Is there any way I can achieve this?
If you add a runat="server" attribute to your <div> element, it will be available in the code-behind. You'll need an id on it as well. Then you can just toggle the Visible property. If this property is false, the control won't be rendered to the client (i.e. no HTML markup).
What you're trying to do is not at all the usual workflow. I tend to think that it will not work as it would mess up control tree, maybe even corrupt the viewstate and so on.
As a possible solution, you can put it's visibility to hidden in the code behind. This, in the contrary to the usual 'gut feeling', doesn't work like the css propery 'display:none' for example - instead the control will not even be rendered into the page when it's not visible. This may be the workaround for you.
Happy coding.
A more efficient approach would be to create the panel as a UserControl and load it dynamically in codebehind when it's needed, then add it to your page. E.g, in code:
MyPopupControl popup = (MyPopupControl)Page.LoadControl("/path/to/usercontrol.ascx");
PopupPanel.Controls.Add(popup);
Where PopupPanel is an empty <asp:Panel>. Then, not even the markup will need to be loaded/processed except when its needed.
There is no reason that all the code you use to display and process this panel couldn't also be in the usercontrol, isolating it from the master page.
Can you build the panel dynamically, based on the cookie setting?
I am using jQuery to simulate a popup, where the user will select a series of filters, which I hope to use to rebind a ListView in the original window.
The "popup" is opened via an ajax request and the content is actually a diferent aspx file (the rendered output is injected into a div that acts as the popup).
I have another ListView in this popup, and it has pagination.
My problem is that since the popup is in reality html content inside a div in the same page, when I try to paginate, the whole page postbacks and is replaced with the aspx that has the filters.
How can I fix this?
I tried using an update panel to contain the ListView but it didn't work.
$("div.yourthingie").hide();
Will hide the part you want to show :) Instead of generating the popup on the fly, leave a small part already made, and hide it in the begining, when you need to show, unhide and add the information you need to.
Hope it helps
Either get rid of the HTML "crust" and just produce the <div> with its contents, or use an IFRAME.
First, let's think through what is happening. When you submit the original page, you are taking a "normal" Request/Response trip to get the code. On the page is a JQuery AJAX bit that fires off what is essentially a modal dialog. The desired effect is the user plays with the new page until they have figured out their filters and submits back. The problem is this "modal page" loses information when someone paginates.
The solution to this is fairly simple, in theory. You have to store the "filters" in the popped up page so they can be resent, along with pagination information. OR you have to cache the result set while the user paginates.
What I would do to solve this is create a static page that has the "filters" in place and work out the AJAX kinks separate from having the page post back to a parent page. Once you have all of the AJAX bits working properly, I would then link it into the popup routine and make sure the pagination is still non-problematic. THe final problem is creating a JavaScript routine that sends back to the parent page and allows the parent page to send its JQuery bits back to the server.
I am not sure about the HTML DIV part of the equation and I think you can solve the problem without this solution. In fact, I believe you can make the "modal popup" page without invoking AJAX, if it is possible to either a) submit the filters to apply via the querystring or b) fake a form submit to the second page. The query string is an easier option, but it exposes some info. Faking a form submit is not that difficult, overall, but could be problematic with a popup.
I am just firing off some ideas, but I hope it spurs something for you.