We Keep Coding

Asp.net: Nested update panels causing PageRequestManagerServerErrorException

I'm developing an asp.net website. I use nested updatePanels in my code.
Piece of code causing the problem:
<asp:UpdatePanel runat="server" ID="UpdatePanel15" >
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1"/>
</Triggers>
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel10" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn_search_" />
</Triggers>
<ContentTemplate>
<asp:DropDownList ID="txtId" runat="server" CssClass="form-control">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:TextBox ID="Txt_search_" runat="server" ClientIDMode="Static" CssClass="form-control"></asp:TextBox>
<asp:Button ID="btn_search_" runat="server" Text="بحث" CssClass="btn btn-primary" OnClick="search_list" />
<asp:DropDownList ID="DropDowntypes" runat="server" AutoPostBack="false" CssClass="form-control">
<asp:ListItem Enabled="true" Text="" Value=""></asp:ListItem>
</asp:DropDownList>
<asp:FileUpload ID="FUpload" AllowMultiple="true" runat="server" CssClass="form-control" />
<asp:Button ID="Button1" runat="server" Text="إضافة" CssClass="btn btn-primary" OnClick="btnAddDoc_Click" OnClientClick="ShowLoading();" />
</ContentTemplate>
</asp:UpdatePanel>
When i click on btn_search_ button every thing goes well, but when i click on Button1 i got this error :Uncaught Sys.WebForms.PageRequestManagerServerErrorException: Sys.WebForms.PageRequestManagerServerErrorException: Object reference not set to an instance of an object.
which i handled by this script: <script type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function EndRequestHandler(sender, args) { if (args.get_error() != undefined) { args.set_errorHandled(true); } } </script>
On the server's event viewer i found this error:
What is causing this exception? How to Solve this issue?
Note: Every this is working on localhost the problem appears on the server.

How to change Formview mode with javascript

I have a formview on my web page and I want to change formview mode. But I want to change this with javascript.
Is this possible?
i have a repeater which has buttons. And i have a button outside of repeater. when i click the button where is outside, it shows formview in popup. this formview has to be insert mode. And when i click the button where is on repeater, it shows formview in popup. this formview has to be edit mode. But i cant do this c#. may be if i do this with javascript, it will works
<asp:ToolkitScriptManager ID="toolkitmanager1" runat="server"></asp:ToolkitScriptManager>
<asp:LinkButton runat="server" ID="lnkFake" />
<asp:ImageButton ID="img1" runat="server" PostBackUrl="javascript:$find('popUpBehavior').show();"/>
<asp:ModalPopupExtender BackgroundCssClass="modalBackground" ID="popUpCompanyEmployee"
runat="server" PopupControlID="panel1"
TargetControlID="lnkFake" BehaviorID="popUpBehavior" CancelControlID="btnKapat">
</asp:ModalPopupExtender>
<asp:Panel ID="panel1" runat="server" CssClass="modalPopup">
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<asp:FormView ID="fv1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="ID" DefaultMode="Insert">
<InsertItemTemplate>
<asp:Label ID="lblProductName" runat="server" Text="ProductName"></asp:Label>
<asp:TextBox ID="txtProductName" runat="server" Text='<%# Eval("ProductName") %>'></asp:TextBox>
<asp:Label ID="lblQuantity" runat="server" Text="Quantity"></asp:Label>
<asp:TextBox ID="txtQuantity" runat="server" Text='<%# Eval("Quantity") %>'></asp:TextBox>
<asp:Label ID="lblUnitPrice" runat="server" Text="UnitPrice"></asp:Label>
<asp:TextBox ID="txtUnitPrice" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:TextBox>
</InsertItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblProductName" runat="server" Text="ProductName"></asp:Label>
<asp:TextBox ID="txtProductName" runat="server" Text='<%# Eval("ProductName") %>'></asp:TextBox>
<asp:Label ID="lblQuantity" runat="server" Text="Quantity"></asp:Label>
<asp:TextBox ID="txtQuantity" runat="server" Text='<%# Eval("Quantity") %>'></asp:TextBox>
<asp:Label ID="lblUnitPrice" runat="server" Text="UnitPrice"></asp:Label>
<asp:TextBox ID="txtUnitPrice" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:TextBox>
</EditItemTemplate>
</asp:FormView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnKapat"/>
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnkapat" runat="server" Text="kapat"/>
</asp:Panel>
<asp:Repeater ID="rpr1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<asp:Label ID="lblID" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
<asp:Label ID="lblProductName" runat="server" Text='<%#Eval("ProductName") %>'></asp:Label>
<asp:Label ID="lblQuantity" runat="server" Text='<%#Eval("Quantity") %>'></asp:Label>
<asp:Label ID="lblUnitPrice" runat="server" Text='<%#Eval("UnitPrice") %>'></asp:Label>
<asp:ImageButton ID="imgPopup" runat="server" PostBackUrl="javascript:$find('popUpCBehavior').show();" />
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:NET2ConnectionString %>' SelectCommand="SELECT * FROM [ProductsRA]"></asp:SqlDataSource>

Basically, changing the mode of a FormView reflects what controls (html) are rendered to the page.
So it could not happen purely on client-side. You could use an update panel , so only an asyn post backis done and only the form view html is refreshed.
Have a look for reference Formview
Documentation for reference here
Hope it clears your doubt a bit

call jquery function inside gridview

call jquery function inside gridview .what i want to happen when i click on the link button open the div . i have problem here with this case didn't work .
JavaScript
function toggleDiv(divId) {
$("#shoow").toggle('slow');
}
HTML Markup
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False"
CellPadding="4"
ForeColor="#333333"
GridLines="None"
Width="507px"
Height="294px">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'></asp:Label>
<br />
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="toggleDiv('Shoow'); return false;">
LinkButton</asp:LinkButton>
<div id="Shoow" style="background-color: blue; width: 150px; height: 150px; display: none;">
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Description")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>

Make these changes
Markup
Pass the clicked element as itself like toggleDiv(this)
Remove the id of the div
Sample Code
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'>
</asp:Label>
<br />
<asp:LinkButton ID="LinkButton1" runat="server"
OnClientClick="javascript:toggleDiv(this);return false;">
LinkButton</asp:LinkButton>
<div style="background-color: blue; width: 150px; height: 150px; display: none;">
</div>
</ItemTemplate>
JavaScript (Toggle the visibility of the element next to the element that's clicked)
function toggleDiv(elm) {
$(elm).next().toggle('slow');
}

Whenever I need to execute JS from a Gridview I try to avoid using asp controls like LinkButton as they tend to cause a postback which you then need to prevent, which can be done, but I find it far easier to just embed a basic html button or img tag with an onclick set for your JS. No postback and no extra code to prevent a postback.
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'></asp:Label>
<br />
<button ID="LinkButton1" runat="server">Button Text</button>
<div id="Shoow" runat=server style="background-color: blue; width: 150px; height: 150px; display: none;">
</div>
</ItemTemplate>
</asp:TemplateField>
Then in the OnRowDatabound event you do the following because runat="server" has been set:
dim btn as HtmlButton = e.Row.FindControl("LinkButton1")
dim div as HtmlContainer = e.Row.FindControl("Shoow")
dim js as String = String.Format("toggleDiv('#{0}')", div.UniqueID)
btn.Attributes.Add("onclick", js)
and the JS:
function toggleDiv(divId) {
$(divId).toggle('slow');
}

jquery ui datepicker not displaying on Chrome and Firefox

I am using the jquery ui datepicker in my asp.net website.The datepicker works fine when I run it from Visual Studio on my machine.However,when I host it on IIS on the Test server,the datepicker does not display.My aspx page looks like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$(".txtDatepicker").datepicker({
minDate:0,
showOn: 'button',
buttonImageOnly: true,
buttonText: "Calendar",
buttonImage: 'calendar.gif'
});
});
I am trying to display the datepicker inside a gridview:
<asp:GridView ID="grdUnitsData" runat="server" AutoGenerateColumns="false" DataKeyNames="Id" OnRowDataBound="grdUnitsData_RowDataBound" AllowPaging="false" RowStyle-BackColor="White" AlternatingRowStyle-BackColor="LightBlue" BorderStyle="Solid">
<RowStyle Height="5px" />
<AlternatingRowStyle Height="5px" />
<Columns>
<asp:BoundField DataField="Id" HeaderText="Identity" Visible="false"/>
<asp:BoundField DataField="Code" HeaderText="Unit Code" />
<asp:BoundField DataField="Name" HeaderText="Unit Name" />
<asp:TemplateField>
<HeaderTemplate>Start Date</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="txtStartDate" runat="server" ClientIDMode="AutoID" style="min-width: 25px;" class="txtDatepicker" Text='<%#Eval("StartDate")%>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>End Date</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="txtEndDate" runat="server" ClientIDMode="AutoID" style="min-width: 25px;" class="txtDatepicker" Text='<%#Eval("EndDate")%>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Things I have tried:
Using showOn:'both' instead of showOn:'button'

Maintian Scrollbar Of GridView Under <div> Asp.netnot working?

i have content page in which i am selecting value from drop down on which gridview populate i am here showing my aspx page,
<div>
<table>
<tr>
<td>
<asp:DropDownList ID="ddlConsultant" runat="server"
AutoPostBack="True"
onselectedindexchanged="ddlConsultant_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td>
</td>
<td>
<asp:TextBox ID="txtActivatedOn" runat="server">
</asp:TextBox>
<a href="javascript:show_calendar('<%=txtActivatedOn.ClientID%>','<%=txtActivatedOn.Text%>');">
<img border="0" src="./Images/calendar.gif" alt="calendar" /></a>
</td>
<td>
</td>
<td>
<asp:Button ID="btnUpdateActivated" runat="server" Text="Update Date"
class="button" />
</td>
</tr>
</table>
<div id="grdWithScroll" style="OVERFLOW: auto" onscroll="SetDivPosition()">
<asp:GridView ID="gvProjects" runat="server" AutoGenerateColumns="False" Height="150px"
Width="225px" CellPadding="4" ForeColor="#333333" GridLines="None" OnRowDeleting="gvProjects_RowDeleting"
DataKeyNames="ID" ViewStateMode="Inherit">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chk_All" runat="server" AutoPostBack="true" OnCheckedChanged="chk_All_CheckedChanged"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chk_selector" runat="server" AutoPostBack="true" OnCheckedChanged="chk_selector_CheckedChanged" Checked='<%#bool.Parse(Eval("Proj_Flag").ToString() == "True" ? "True": "False") %>'/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="lbl_ID" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ProjectID" Visible="true">
<ItemTemplate>
<asp:Label ID="lblProjectID" runat="server" Text='<%# Bind("ProjectID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<%--<asp:TemplateField HeaderText="Order #">
<ItemTemplate>
<!-- <asp:Label ID="lblOrderNumber" runat="server" Text=''></asp:Label>-->
</ItemTemplate>
</asp:TemplateField>--%>
<asp:TemplateField HeaderText="Title">
<ItemTemplate>
<a href="javascript:openPopup('DsProjectDetail.aspx?mode=1&cid=<%# Eval("ID") %>&prj=<%#Eval("Title")%>' )">
<%--<%#Eval("Title")%>--%>
<asp:Label ID="lblTitle" runat="server" Text='<%# Bind("Title") %>'></asp:Label></a>
</ItemTemplate>
<ControlStyle Width="400px" />
</asp:TemplateField>
<%-- <asp:TemplateField HeaderText="CompletionDate">
<ItemTemplate>
<asp:Label ID="lblCompletionDate" runat="server" Text='<%# Bind("CompletionDate") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>--%>
<asp:TemplateField HeaderText="ConsultantID" Visible="false">
<ItemTemplate>
<asp:Label ID="lblConsultantID" runat="server" Text='<%# Bind("CompanyID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField DeleteImageUrl="~/Images/Delete.gif" ButtonType="Image" ShowDeleteButton="True" />
</Columns>
</asp:GridView>
</div>
<input type="hidden" id="XPos" runat="server" />
<input type="hidden" id="YPos" runat="server" />
<table>
<tr>
<td>
<asp:Button ID="btnAddProject" runat="server" CssClass="button" Text="New Project"
onclick="btnAddProject_Click" />
</td>
</tr>
</table>
</div>
Javascript i am using are,
<script type="text/javascript">
window.onload = function(){
var strCook = document.cookie;
if(strCook.indexOf("!~")!=0){
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS+2,intE);
document.getElementById("grdWithScroll").scrollTop = strPos;
}
}
function SetDivPosition(){
var intY = document.getElementById("grdWithScroll").scrollTop;
document.title = intY;
document.cookie = "yPos=!~" + intY + "~!";
}
</script>
<script type="text/javascript">
window.scrollBy(100, 100);
function foo() {
alert("ddd");
if (grdWithScroll != null) alert(grdWithScroll.scrollTop);
}
</script>
and at the end of the page load event i am using,
Page.ClientScript.RegisterStartupScript(GetType(), "MyKey", "SetDivPosition();", true);
i have added this line in
<%# Page Language="C#" MaintainScrollPositionOnPostback="true" ...
and also added in webconfig,
<system.web>
<pages maintainScrollPositionOnPostBack="true" >
</pages>
</system.web>
getting help from this link,
http://stackoverflow.com/questions/12092150/maintain-scroll-bar-position-of-a-div-within-a-gridview-after-a-postback
One think i wanna mention that "onscroll="SetDivPosition()" in div tag showing me warning that on scroll is not valid attribute for div tag
But after doing all this its not working for me firstly i populate gridview with dropdown when grid populate it shows check box column too in all rows that on checked save check box value in database and post back occurs if i am at bottom of grid it scroll to the top after post back
Hopes for your suggestion
Thanks