edit 2 -
To recreate - (I hope)
Create an empty asp.net project, add a default.aspx, and an about.aspx
use this code for the default.aspx file:
http://pastebin.com/4Ri1BufM
and this for about.aspx
http://pastebin.com/Ni9dZL7c
Build, and run sieve against it. Click the button, then the link. Sieve should now list 1 memory leak.
This simple layout puts a server button inside a panel. If you click it, and then the "Leave" link, sIEve reports 1 memory leak:
http://localhost:2605/Default.aspx (1 reference)
<INPUT value="partial postback" type=submit name=ctl01 >
Aspx source:
<%# Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="LeakTestProject._Default" %>
<html>
<head>
<title></title>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button Text="partial postback" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
<a href="SomeOtherPage.aspx" >leave</a>
</body>
</html>
I've think I've tracked down a memory leak in my application to this source.
Would anyone be able to explain why this is happening, and what to do to fix it?
(Note - there is no server side code running)
edit-
Here is the generated html:
<html>
<head>
<title></title>
</head>
<body>
<form method="post" action="Default.aspx" id="Form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUzNzM3OTMxMmRk27mKixZYS2MtHiuw7SZF6+1A/CkWRnnarcN2a05yCJs=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['Form1'];
if (!theForm) {
theForm = document.Form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=_lxNoU5aYdEC_WWnUhGTN0VgFQnwFJ1fkZBkPhUGNITY1Tt87f4CGSPd9dhq2TD9I8lv5ljTGi956KpbHSLq3ebld0t7nKLON7Hc04CCAwA1&t=634525784292792916" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=0VE3fsyoY2cTFnat6m0YjE4OCCjVV0jmjSC6wigMBEOHyKW8kewBrhtJnBFIn73VSWcGW45QXwelC5m-1iZoornC8qWpZ-kXP-Y38e49qW1TbssOgo419ZWtVHSVmIpSg9CvXOQzUBClAjuHORyX5Q2&t=ffffffffbd2983fc" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=DBlWOXkmp0ycsSicGEZhACmLuhW1VF8BppK-Uj8ijyjhFxx7MTG8NW0gLl3IJ6TyEo2rAMfLCQ9rO_bk2wDCcpyT3Df6CN-TLMAA575gUNAjTSzC6U1koagV2FYRmu4TNsAgoEjhkN6fJX3lENf7Bw2&t=ffffffffbd2983fc" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLZvOXNBgKiwImNCx8fSMXEwq+V+5yrnoaTcidPwoJw3ebm6DJQ1D3fVVAL" />
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'Form1', ['tUpdatePanel1','UpdatePanel1'], [], [], 90, '');
//]]>
</script>
<div id="UpdatePanel1">
<input type="submit" name="ctl01" value="partial postback" />
</div>
</form>
<a href="About.aspx" >leave</a>
</body>
</html>
According to http://www.codeproject.com/KB/ajax/jqmemleak.aspx there is a memory leak that sounds a lot like what you are experiencing.
See "Iteration 2 - Memory Leak"
Using a tool called 'SIEve' he states 'You can see that every time I click refresh, it creates a new set of input elements without destroying the previous ones. '
His fix was a JQuery plugin that calls into the Update panel cleanup hooks. You could potentially try this?
(function($) {
$.fn.Disposable = function(cln) {
return this.each(function() {
var el = this;
if (!el.dispose) {
el.dispose = cleanup; // will be called by
// Microsoft for cleanup
$(window).bind("unload", cleanup);
}
function cleanup() {
if (!el)
return;
$(el).unbind();
$(window).unbind("unload", cleanup);
el.dispose = null;
el = null;
};
});
};
})(jQuery);
function add() {
$get('res').value =
parseInt($get('i1').value) + parseInt($get('i2').value);
}
Sys.Application.add_load(function() {
$('.num').change(add).Disposable();
});
could you please try this change:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script>
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(my_init);
function my_init() {
document.getElementById("UpdatePanel1").innerHTML = "";
}
</script>
Related
I have a page where i am rendering GridView. In GridView i have a CheckBox and once you check, uncheck, Jquery Dialog appears and i need a postback event on that dialog. so i am adding a manual postback on that page. everything is fine till gridview has only 1 page. as soon as gridview has more records, it add a _doPostBack method on page. so i now have a 2 _doPostBack method on page and nothing works because of this.
How can i define in my page that i do not want to add any _doPostBack method by any controls because i have already defined it manually?
Here is my HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Store Management</title>
<script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui.min-1.10.1.js" type="text/javascript"></script>
<link href="/assets/styles/StorePortal/style-22012013.css" rel="stylesheet"
type="text/css" />
<link href="/assets/styles/StorePortal/jquery-ui.css" rel="stylesheet"
type="text/css" />
<link href="../App_Themes/AbleCommerce/ComponentArt.css" rel="stylesheet"
type="text/css" />
<link href="../App_Themes/AbleCommerce/print.css" rel="stylesheet" type=
"text/css" />
<link href="../App_Themes/AbleCommerce/style.css" rel="stylesheet" type=
"text/css" />
<link href="../App_Themes/AbleCommerce/webparts.css" rel="stylesheet" type=
"text/css" />
</head>
<body>
<form action=
"portal.aspx?q=bbaae796d951c95311f5ec3e599784079c6093ee&q1=COV" id=
"form1" method="post" name="form1">
<div>
<input id="__EVENTTARGET" name="__EVENTTARGET" type="hidden" value=
"" /> <input id="__EVENTARGUMENT" name="__EVENTARGUMENT" type=
"hidden" value="" />
</div><script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div>
<input id="__VIEWSTATEENCRYPTED" name="__VIEWSTATEENCRYPTED" type=
"hidden" value="" />
</div>
<script type="text/javascript"> --> this one is added by me manually
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div>
<input id="__EVENTTARGET" name="__EVENTTARGET" type="hidden" value=
"" /> <input id="__EVENTARGUMENT" name="__EVENTARGUMENT" type=
"hidden" value="" /> /// sOME CODE HERE
</div>
--> this one is added by me manually
</form>
</body>
</html>
Now, if i remove the _doPostBack added by me, gridview paging works. BUT when i have only 1 page in gridview, my event in jquery dialog does not work because it cant find _doPostBack.
ANSWER:
I have removed the _doPostBack() added by me and instead added this on my Page_Load() which adds a _doPostBack() even if there are no asp.net controls which requires this method.
ClientScript.GetPostBackEventReference(this, string.Empty);
BIG THANKS TO #Tim Schmelter for pointing to that LINK
I've had a similar problem, when trying to popup a dialog confirming a record deletion. This is the code I've used (jQuery UI dialog) and it works perfectly.
Don't add a new doPostBack. Instead, try to follow this idea. You can adapt it to fit your requirements:
// When the user tries to delete a record, show a confirmation.
$(".confirmationButton").click(function(e) {
// Stop the PostBack
e.preventDefault();
$(".confirmationDialog").dialog("open");
});
$(".confirmationDialog").dialog({
buttons: {
"No": function() {
$(this).dialog("close");
},
"Yes": function() {
$(this).dialog("close");
// User confirmed deletion, so carry on with the PostBack.
eval($("#ctl00_MainContentPlaceHolder_hdnBtnPostBack").val());
}
}
});
Somewhere on your code (when checking the page source), you'll find something like this:
<input id="ctl00_MainContentPlaceHolder_hdnBtnPostBack" type="hidden" value="__doPostBack('ctl00$MainContentPlaceHolder$btnDelete','')" name="ctl00$MainContentPlaceHolder$hdnBtnPostBack">
That's the object you will be using with eval().
For some reason, the value returned by the Modal Dialog box is always "undefined".
My Main page (aspx):
<%# Page Title="Home Page" Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<html>
<head></head>
<body>
<script type="text/javascript">
function openWindows () {
var getval;
getval = window.showModalDialog('../WebSite/popups/uploader.htm');
document.getElementById("Input").value = getval;
}
</script>
<input id="Input" runat="server" />
<input type="button" id="Button1" runat="server" onclick="openWindows()" value="Choose Image"/>
</form>
</body>
</html>
So in this case, the value of getval is always "undefined"
My Dialog Box (HTML) Code:
<html>
<head>
<script type="text/javascript">
function ReturnValues() {
var objfile = document.getElementById("fileup").value
document.getElementById("TxtInput").value = objfile
var vReturnValue = document.getElementById("TxtInput").value;
window.ReturnValue = vReturnValue;
window.close();
}
</script>
</head>
<body>
<form id="Formuploader" method="post" runat="server">
<input id="TxtInput" type="hidden" runat="server" /><br />
<button id="btnSaveImage" runat="server" onclick="ReturnValues()">Save Image</button>
</form>
</body>
</html>
Here, ReturnValue does have the required value. But as soon as the ModalDialog closes, the getval variable in the main window becomes undefined.
Any help is greatly appreciated.
Thanks!
when you return value, do it this way:
window.returnValue = vReturnValue;
use lowercase returnValue, not ReturnValue.
also, your modal dialog is not closing. to fix that, change your button to a link.
<a href="#" id="btnSaveImage" runat="server" target="_self" onclick="ReturnValue()">
Save Image</a>
Try this:
window.opener.document.getElementById("Input").value = getval;
I am trying to implement a word count feature on some of my text areas that have been converted to wswgs' using ckeditor tutorial found here: http://www.n7studios.co.uk/2010/03/01/ckeditor-word-count-plugin/. This tutorial uses a custom plugin to count words for ckeditor. I get the correct word count but I am not able to see the color change to red when I surpass the maximum number of words allowed. I have used firebug to see how my text area looks like after it has been transformed into a wswg using ckeditor but I don't see anything strange. Here is my code:
<asp:Content ID="Content3" ContentPlaceHolderID="JSContent" runat="server">
<script src="<%: Url.Content("~/Scripts/jquery-1.7.min.js") %>" type="text/javascript"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.combobox.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/ckeditor.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/adapters/jquery.js") %>"></script> <%-- Must be linked last --%>
<script type="text/javascript">
$(document).ready(function () {
$(".cke_editor").ckeditor({
toolbar: 'custom'
});
});
<div class="form-row form-row-inline">
<%: Html.TextAreaFor(model => model.AssignmentText, new { #name = "table", #class = "cke_editor", #style = "display:none", #onchange = "setDirty(true)" })%>
<input name="tableWordCount" type="hidden" value="10" />
</div>
Here is the screen:
Any help greatly appreciated.
I finally figured it out. Html.TextAreaFor() asp.net mvc helper method takes, as a parameter, an object of html attributes as shown on the question code above. I originally had used the "name" property for the textarea so that it matches the "name property" on the ckeditor word count plugin. I had to instead use the "id" property.
ckeditor sample:
<html>
<head>
<title>CKEditor Word Count Demonstration</title>
<script type="text/javascript" src="jquery/jquery.1.4.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form action="#" method="POST">
<p>
<label for="content">Content with 250 word limit</label>
<textarea name="content" class="ckeditor">Lorem Ipsum.</textarea>
<input type="hidden" name="contentWordCount" value="250" />
</p>
</form>
</body>
</html>
my new fixed code:
<asp:Content ID="Content3" ContentPlaceHolderID="JSContent" runat="server">
<script src="<%: Url.Content("~/Scripts/jquery-1.7.min.js") %>" type="text/javascript"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.combobox.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/ckeditor.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/adapters/jquery.js") %>"></script> <%-- Must be linked last --%>
<script type="text/javascript">
$(document).ready(function () {
$(".cke_editor").ckeditor({
toolbar: 'custom'
});
});
<div class="form-row form-row-inline">
<%: Html.TextAreaFor(model => model.AssignmentText, new { #id = "taxta", #class = "cke_editor", #style = "display:none", #onchange = "setDirty(true)" })%>
<input name="taxtaWordCount" type="hidden" value="10" />
</div>
So, the only thing I had to change is the "id" property. I hope this helps others. Again, Firebug was very helpful in delving through the html DOM and looking at how everything is rendered on the browser.
I have a asynchronous file upload inside the update panel and it uploads the file once the file is selected. When the file is uploading I am showing a update progress. Here I have a Image saying processing. Once the upload is complete the image disappears. Instead of showing a image how can I show percentage uploaded.
<asp:UpdateProgress ID="UpdateProgress2" runat="server">
<ProgressTemplate>
<div>
<b>Please Wait...</b>
<img runat="server" id="ajaxLoader" style="background-color: White; width: 338px;"
src="styles/images/loadImage.gif" alt="loading" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
yo can try:
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$(document).ready(function(){
var options = {
beforeSend: function () {
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function (event, position, total, percentComplete) {
$("#bar").width(percentComplete + '%');
$("#percent").html(percentComplete + '%');
},
success: function () {
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function (response) {
$("#message").html("<font color='green'>" + response.responseText + "</font>");
},
error: function () {
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#form1").ajaxForm(options);
});
</script>
<body>
<form id="form1" action="AjaxUploadFile.aspx" method="post" enctype="multipart/form-data" runat="server">
<div>
<input type="file" size="60" name="myfile" />
<input type="submit" value="Ajax File Upload" />
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
<br/>
<div id="message"></div>
</div>
</form>
code behind:
protected void Page_Load(object sender, EventArgs e)
{
HttpPostedFile file =null;
if (Request.Files.Count>0)
{
file = Request.Files[0];
file.SaveAs(Server.MapPath("~/UploadedFiles/")+file.FileName);
}
}
Not possible here instead you may display animated image or you may try jQuery plug-ins or uplodify.
i have a strange situation may its a easy fix or something i may be missing but here is the question.
i have a asp.net form with master page and my validation works great without any problem but the problems starts when i try to hook my click event to the server side,
here is what i meant:
i have a form with few fields on it and if the form is empty than it should STOP submitting, otherwise allow me to execute the server side script
but its not happening, even my form is in invalid state (i do get error message saying i have to enter the required fileds) but still executing my server side script.
i would like to execute my server side script only if the form is in valid state.
here is my code:
my master page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>jQuery Validation in ASP.NET Master Page</title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
my content page:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
$(document).ready(function() {
$("#aspnetForm").validate({
rules: {
<%=txtName.UniqueID %>: {
minlength: 2,
required: true
},
<%=txtEmail.UniqueID %>: {
required: true,
email:true
}
}, messages: {
<%=txtName.UniqueID %>:{
required: "* Required Field *",
minlength: "* Please enter atleast 2 characters *"
}
}
});
});
</script>
Name: <asp:TextBox ID="txtName" MaxLength="30" runat="server" /><br />
Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
<asp:Button ID="btnSubmit" runat="server" onclick="SubmitTheForm();" Text="Submit" />
</asp:Content>
function SubmitTheForm() {
SaveTheForm();
}
function SaveTheForm() {
debugger;
var request = buildNewContactRequest();
ContactServiceProxy.invoke({ serviceMethod: "PostNewContact",
data: { request: request },
callback: function(response) {
processCompletedContactStore(response);
},
error: function(xhr, errorMsg, thrown) {
postErrorAndUnBlockUI(xhr, errorMsg, thrown);
}
});
return false;
}
i have tried both ways
1)
$(document).ready(function() {
$("#btnSubmit").click(function(event) {
event.preventDefault();
SaveTheForm();
});
});
2)
<asp:Button ID="btnSubmit" runat="server" onclick="SubmitTheForm();
function SubmitTheForm() {
SaveTheForm();
}
you're posting your data without checking if the form is valid or not
I think you have to use something like this
function SubmitTheForm() {
if ($("#aspnetForm").valid()) SaveTheForm();
}
Sorry, I'm giving you bad advice. Forget my previous entry. What is the SubmitTheForm() method? You're using the jQuery validation plug in, so you should just need to attach the validation stuff to the form and all should be right with the world.
I think your button onclick needs to be
return SaveTheForm();
As in:
<asp:Button ID="btnSubmit" runat="server" onclick="return SubmitTheForm();" Text="Submit" />
Do you try to put the jQuery code script in the Head ContentPlaceHolder