I have a fairly complex asp.net page based on UpdatePanels and jQuery UI. Unfortunately, when the panels update, the jQuery UI widgets leak memory like crazy in ie7, even if I manually 'destroy' them. Does anyone know a technique/patch to prevent these leaks? I've created a simple example page with a slider inside an UpdatePanel. Just click the 'Leak' button and refresh the page to see the leak in sieve.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Leak2.aspx.cs" Inherits="Leak2" %>
<%# Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Leak</title>
<link type="text/css" href="/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function initializeSlider() {
$(".slider").slider({
min: 0,
max: 100,
value: 100,
step: 5
});
}
$(document).ready(function() {
initializeSlider();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
initializeSlider();
});
});
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="width: 300px;">
<div class="slider"></div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Leak" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
After some more research it looks like the proper way to do this would be to use $.ajax to send/receive only the data I need to build the page and do all of the page interaction client-side. However, that will require pretty extensive changes to the page. Does anyone know of a patch to jquery-ui or a generic method for recovering memory leaked by these widgets that I can use in the meantime?
Related
I created a content page that references a master page. In the content page I have a form and some form controls with a submit button. When I hit submit though the parameters are not detected on page load in the content page. On top of that the name of the parameters are all messed up.
What is the correct way of adding form controls to the content page and then using Request.QueryString[ID]?
I just realized that Microsoft throws all kinds of extra crap at you when you use master pages. It is absolutely ridiculous, is there a way for me not to go down this route of using all kinds of silly casting and inefficient overhead:
http://www.asp.net/web-forms/tutorials/master-pages/control-id-naming-in-content-pages-cs
My code (MASTER PAGE):
<%# Master Language="C#" AutoEventWireup="true" ClientIDMode="Static" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="Head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</body>
</html>
My code (Content Page):
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<label for="iSiteId">Site Id(s)</label>
<asp:TextBox ID="iSiteId" runat="server"></asp:TextBox>
<label for="iVersion">Version(s)</label>
<asp:TextBox ID="iVersion" runat="server"></asp:TextBox>
</asp:Content>
My Code (Content Page but the Code behind)
_siteId = Request.QueryString["iSiteId"];
_categoryId = Request.QueryString["iCategoryId"];
_version = Request.QueryString["iVersion"];
Try these instead:
siteId = iSiteId.Text;
_categoryId = iCategoryId.Text;
_version = iVersion.Text;
I add an onfocus event to a web user control (.ascx) expection it to raise event when it gets focus but it doesn't. Is it not intended to work this way and how can I get it to raise the event? Here is sample below, but it doesn't work.
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="WebUserControl1.ascx.vb"
Inherits="RaiseEventUserControl.WebUserControl1" %>
<div style="padding: 5px; background-color: #C0C0C0">
TB1:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
TB2:
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
<%# Register Src="WebUserControl1.ascx" TagName="WebUserControl1" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function RaiseEvent(obj) {
alert("Event was raised for: " + obj.id)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl1 ID="WebUserControl11" runat="server" onfocus="RaiseEvent(this)" />
<br />
<uc1:WebUserControl1 ID="WebUserControl12" runat="server" onfocus="RaiseEvent(this)" />
</div>
</form>
</body>
</html>
This can be achieved using jquery. In your head element, add the following:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name^="WebUserControl"]').focusin(function () {
$(this).val("i have focus");
});
});
</script>
What this does is, grabs the input elements whose name starts with "WebUserControl" and adds a "got focus" event. The handler for that event places "i have focus" as the value for that input element.
The way that this would be rendered to the page is that a "onFocus" attribute would be added to the div that represents the control. This is not something that supports focus. You might add the "onFocus" item to say your first text field in the control or something similar to be able to raise the event if needed.
Here's what I have so far but thing aren't really working. (I dragged the jQuery.js file from the Solution Explorer to the area of my html.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SignUpFormTest._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//fade in the context of whatever is inside the div tag.
$('#name').fadeIn("slow");
});
</script>
</head>
<body bgcolor="#FFFFFF">
<p>
Note that this form doesn't actually do anything
except illustrate the Required Field Validator.
</p>
<form id="frmValidator" action="required.aspx" method="post" runat="server">
Enter Your Name:
<asp:TextBox id="txtName" runat="server" />
<div id="name"><asp:RequiredFieldValidator id="valTxtName" ControlToValidate="txtName" ErrorMessage='<img src="../Images/no.png">' runat="server" /></div>
<br />
<asp:button id="btnSubmit" text="Submit" runat="server" />
</form>
<p>
Hint: Try submitting it before you enter something.
</p>
</body>
</html>
When validating the icon just pops up.
No fade in or anything. Also, I know my current solution is hacky, so I'd really like someone to tell me what I should do instead of a creating a DIV tag just for the purpose of one animation.
Make sure the reference to JQuery is valid and use this code:
$(document).ready(function() {
$('#name').hide().fadeIn("slow");
});
If I'm not mistaken, since the div is already visible in your case, jQuery will not fade it in. The hide() method ensures that the div is initially not visible and then fades in slowly.
$(document).ready(function() {
document.getElementById('valTxtName').onpropertychange = function(){
$('#name').fadeIn("slow");
}
});
I have a parent page with two data controls. I want to be able to open a child window, do something on it, and when it closes I want to rebind only one of the two data controls on the parent page. I have the control I want to update within an UpdatePanel so would like to call rebind it and call UpdatePanel.Update().
From a child window, you can't actually "call" a server side function for the parent page, however you can use some javascript to invoke client side functions on that page.
On the parent page:
<script language="Javascript" type="text/javascript">
function CallAlert()
{
alert("This is parent window's alert function.");
}
</script>
On the child page:
<script language="Javascript" type="text/javascript">
function CallParentWindowAlert()
{
window.opener.CallAlert();
return false;
}
</script>
In the example you provided, in particular where you have an UpdatePanel, you've actually left yourself a few options here. If the UpdatePanel is set with some form of trigger to force it to update, be it all children or just specified ones, in your parent function you can force a postback on one of those controls. Ultimately, the parent pages javascript function should have some form of a __doPostBack() call, referencing the id of a control and some (empty) parameter, however you'd probably be better off generating that javascript with codebehind via:
Page.ClientScript.GetPostBackEventReference(control, null);
Once you put that together, it's all a matter of tying the actual invocation to whatever client side event you want on your child page, be it onUnLoad() or in some custom function you call.
Try this out all you got to do is call __doPostBack on the parent page targeting the update panel or something in the update panel.
Parent Code:
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Parent Window</h1>
Time:
<%= DateTime.Now.ToString() %>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Update Panel Time<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1" Text="Submit" runat="server" />
Click To Open Child Window
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Child Code:
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function UnloadMe() {
if (opener) {
opener.__doPostBack("UpdatePanel1", "");
}
}
</script>
</head>
<body onunload="UnloadMe()">
<form id="form1" runat="server">
<div>
<h1>Child Window</h1>
</div>
</form>
</body>
</html>
I have that works fine without Script manager. but if I add script manager that getting an error: sys undefined.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Block-ui-pageload.aspx.cs" Inherits="Block_ui_pageload" %>
<%# Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="divConfirmBox1">
<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Category Name">
<ItemTemplate>
<asp:Label ID="lblCategoryName" runat="server" Text='<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<input type="button" value="Delete" onclick="showDeleteConfirmation('<%# Eval(" CategoryId")=CategoryId") %=% />')" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="divConfirmBox" style="display:none">
Are you sure you want to delete this record?
<input type="button" value="No" />
</div>
</div>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
$(function () {
$('#divConfirmBox1').block({ message: $('#divConfirmBox') });
});
$(function () {
$('#divConfirmBox').click(function (event) {
$('#divConfirmBox1').unblock();
});
});
</script>
initially during the page load . I am blocking the screen(PAge). once the user clicks the button the page is unblocked.
is there anything wrong in the Syntax whiling working with Ajax script manager
You should move the jQuery code into $(document).ready. I suspect you're preventing certain scripts from loading appropriately by running the code inline rather than in .ready. I'm running the same version of jQuery (but not UI block) with ScriptManager in 3.5 right now, no prob.
AJAX is not a thing - its a bunch of technologies put together to achieve asynchronous communication. Yes, you have some JavaScript coding in there, but none of them actually do anything 'ajaxian' - a good example of something really AJAX-style would be an validation of a (registration) form or something like that. You'd set some oberservers for some fields and validate them whilst the user is still making inputs on other fields...
I think what you're looking for is noConflict. It's been a while since I've used asp.net ajax but if I'm not mistaken, there is a $ function defined.
In the web.config we need to add the follwing code within tag.
then the problem was solved
every thing was working fine