We Keep Coding

Call javascript in aspx.cs with div<%# Eval("variable") %>' as parameter in aspx

I have a collapsible and expandable gridview. When i change the dropdown in my gridview the gridview collapses due to the autopostback that is caused. I need to do a autopostback since I want to populate a second dropdown based on the first dropdown. Is there a way I can expanded it after it is collapsed. I am thinking of calling the javascript but i dont now how to call it since I have little knowledge in javascript. Thank you for your help.
Here is my javascript.
function divexpandcollapse(divname) {
var div = document.getElementById(divname);
var img = document.getElementById('img' + divname);
if (div.style.display == "none") {
div.style.display = "inline";
img.src = "../images/minus.gif";
} else {
div.style.display = "none";
img.src = "../images/plus.gif";
}
}
Here is the code for my indexChanged how can I add the javascript to expand the grid.
protected void OnClosetIndexChanged(object sender, EventArgs e)
{
//Call javascript to reopen gridview
}
And here is my front end
<asp:TemplateField ItemStyle-Width="20px" >
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div<%# Eval("componente_id") %>');" >
<img id="imgdiv<%# Eval("componente_id") %>" width="9px" border="0" src="../images/plus.gif"
alt="" /></a>
<asp:ImageButton ImageUrl="~/images/select.png" runat="server" CommandName="Select" OnRowDataBound = "OnRowDataBound" Width="10px" Height="10px"/>
</ItemTemplate>
<ItemStyle Width="20px" VerticalAlign="Middle"></ItemStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="Purchase Order ID">
<ItemTemplate>
<asp:Label ID="lblPurchaseOrderID" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "componente_id") %>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%" style="background:#F5F5F5" >
<div id="div<%# Eval("componente_id") %>" style="overflow:auto; display:none; position: relative; left: 15px; overflow: auto">
<div class="header">
Cambiar la cantidad
</div>
<div class="body">
<asp:Label ID="lblType" runat="server" Text=""></asp:Label>
<br/>
<label for="validationOfTypeID">Armario:</label>
<asp:DropDownList ID="drCloset2" runat="server" Width="40%" Height="30px" AutoPostBack="True" OnSelectedIndexChanged = "OnClosetIndexChanged"></asp:DropDownList>
<br/>
<label for="validationOfTypeID">cajón:</label>
<asp:DropDownList ID = "drDrawer2" runat="server" Width="40%" Height="30px" >
</asp:DropDownList>
<br />
<asp:Label ID="lblQuantity" runat="server" Text=""></asp:Label>
<asp:DropDownList Height="30px" ID="drOperation" runat="server">
<asp:ListItem>+</asp:ListItem>
<asp:ListItem>-</asp:ListItem>
</asp:DropDownList>
<asp:TextBox width="50px" ID="txtChangeQuantity" runat="server" TextMode="Number" min="0" step="1" Value="0"></asp:TextBox>
<br/>
<asp:Button ID="btnChangeQuantity" runat="server" Text="Validar" OnClick="change_quantity_Click" />
<asp:Button ID="btnHide" runat="server" Text="Anular" AutoPostBack="True" />
</div>
<asp:DetailsView id="DetailsView1" DataKeyNames="componente_id" Runat="server" Width="300px" Font-Names="Calibri"/>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
Here is a image of what it looks like :

My javascript is not working with my page in asp.net

Recently I am working on asp.net application but my found that my script is not working and don't know why even I tested in the fiddle.
I want my list box to be filtered when user key in any keyword in the textbox.
My list box ID is "ItemList".
My textbox ID is "txtSearchItem".
here is my script for the page:
<%# Page Title="" Language="C#" MasterPageFile="~/Staff/Staff.Master" AutoEventWireup="true" CodeBehind="AddPackage.aspx.cs" Inherits="ExpressPrintingSystem.Staff.Owner.Package.AddPackage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
$(document.getElementById("<%=txtSearchItem.ClientID%>")).on("keyup", function () {
var search = this.value;
$("option", document.getElementById("<%= ItemList.ClientID %>")).show().filter(function () {
return $(this).text().toLowerCase().indexOf(search.toLowerCase()) < 0;
}).hide();
});
</script>
</asp:Content>
Here is the ListBox with is located in a table:
<td><asp:TextBox ID="txtSearchItem" TextMode="Search" Width="200px" runat="server" ClientIDMode="Static"/><br />
<asp:ListBox ID="ItemList" runat="server" Width="200px" DataSourceID="sdsItem" ClientIDMode="static" DataTextField="ItemName" DataValueField="ItemID"></asp:ListBox>
<asp:SqlDataSource ID="sdsItem" runat="server" ConnectionString="<%$ ConnectionStrings:printDBServer %>" SelectCommand="SELECT [ItemID], [ItemName] FROM [Item] WHERE ([ItemID] LIKE '%' + #keyword + '%') OR ([ItemName] LIKE '%' + #keyword + '%')">
<SelectParameters>
<asp:ControlParameter ControlID="txtSearchItem" DefaultValue="I" Name="keyword" PropertyName="Text" />
</SelectParameters>
</asp:SqlDataSource>
</td>
I not sure where is the error occur. I want the option tag to be hidden when the keywords in the text box is not match with the keywords user type in. The ListBox is linked with a datasource which will call all the record of the item out. Please help me.
Here is my whole complete code:
<%# Page Title="" Language="C#" MasterPageFile="~/Staff/Staff.Master" AutoEventWireup="true" CodeBehind="AddPackage.aspx.cs" Inherits="ExpressPrintingSystem.Staff.Owner.Package.AddPackage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
$(document.getElementById("<%=txtSearchItem.ClientID%>")).on("keyup", function () {
var search = this.value;
$("option", document.getElementById("<%= ItemList.ClientID %>")).show().filter(function () {
return $(this).text().toLowerCase().indexOf(search.toLowerCase()) < 0;
}).hide();
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphStaffContent" runat="server">
<h1>Add Package</h1>
<asp:Label ID="lblError" runat="server" ForeColor="Red" Text=""></asp:Label>
<table>
<tr>
<td><asp:Label ID="lblName" runat="server" Text="Name:"></asp:Label></td>
<td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
<td><asp:RequiredFieldValidator ID="rfvName" runat="server" ControlToValidate="txtName" ForeColor="Red" ErrorMessage="Please fill up the the Name field."></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td><asp:Label ID="lblSupport" runat="server" Text="Support Files:"></asp:Label></td>
<td><asp:CheckBoxList ID="cblSupport" runat="server"></asp:CheckBoxList></td>
</tr>
<tr>
<td><asp:Label ID="lblType" runat="server" Text="Type of Package:"></asp:Label></td>
<td><asp:DropDownList ID="ddlType" runat="server" Height="17px" Width="128px"></asp:DropDownList></td>
</tr>
<tr>
<td><asp:Label ID="lblItems" runat="server" Text="Package's Items:"></asp:Label></td>
<td><asp:Table ID="tblPackageItems" runat="server" Width="100%">
<asp:TableRow>
<asp:TableCell>Item</asp:TableCell>
<asp:TableCell>Quantity</asp:TableCell>
</asp:TableRow>
</asp:Table> </td>
<td><asp:TextBox ID="txtSearchItem" TextMode="Search" Width="200px" runat="server" ClientIDMode="Static"/><br />
<asp:ListBox ID="ItemList" runat="server" Width="200px" DataSourceID="sdsItem" ClientIDMode="static" DataTextField="ItemName" DataValueField="ItemID"></asp:ListBox>
<asp:SqlDataSource ID="sdsItem" runat="server" ConnectionString="<%$ ConnectionStrings:printDBServer %>" SelectCommand="SELECT [ItemID], [ItemName] FROM [Item] WHERE ([ItemID] LIKE '%' + #keyword + '%') OR ([ItemName] LIKE '%' + #keyword + '%')">
<SelectParameters>
<asp:ControlParameter ControlID="txtSearchItem" DefaultValue="I" Name="keyword" PropertyName="Text" />
</SelectParameters>
</asp:SqlDataSource>
</td>
</tr>
<tr>
<td><asp:Label ID="lblEstPrice" runat="server" Text="Estimated Price (RM):"></asp:Label></td>
<td><asp:Label ID="lblEstimatedPrice" runat="server" Text="0"/></td>
</tr>
<tr>
<td><asp:Label ID="lblPrice" runat="server" Text="Package Price (RM):"></asp:Label></td>
<td><asp:TextBox ID="txtPrice" runat="server"></asp:TextBox></td>
</tr>
</table>
<asp:Button ID="btnSubmit" runat="server" Text="Add Package"/>
<asp:Button ID="btnCancel" runat="server" Text="Cancel"/>
</asp:Content>
This is my master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Staff.master.cs" Inherits="ExpressPrintingSystem.Staff.Staff" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Staff Portal</title>
<link rel="stylesheet" href="~/styles/main.css" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="page">
<form runat="server">
<div id="header">
<asp:SiteMapDataSource ID="SiteMapDataSourceForStaff" SiteMapProvider="StaffSiteMap" runat="server" ShowStartingNode="false" />
<div>
<img src="<%=Page.ResolveUrl("~/Images/logo/long_logo.png")%>" alt=""/>
<ul id="navigation">
<li class="selected">
Home
</li>
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSourceForStaff">
<ItemTemplate>
<li>
<asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
<asp:Repeater runat="server" DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
</asp:Repeater>
<li style="float:right;">
<asp:HyperLink ID="userInfoControl" runat="server"/>
<ul id="userMenu" runat="server">
</ul>
</li> </ul>
</div>
</div>
<div id="content">
<div>
<asp:ContentPlaceHolder ID="cphStaffContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
<footer id="footer">
<div class="footcontent">
<div>
<img src="<%=Page.ResolveUrl("~/Images/logo/long_logo.png")%>" alt=""/>
<ul>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="footnote">
<div>
<p>© 2017 BY Express Printing System | ALL RIGHTS RESERVED</p>
</div>
</div>
</footer>
</div>
</body>
</html>

This kind of problem is usually encountered when there are conflicts between jQuery and other libraries. To stay out of trouble, call $.noConflict() and don't forget to run your jQuery code after the document is ready
$.noConflict();
jQuery(document).ready(function($){ /**/});

First create a JavaScript file instead of a script tag and than link that file in the master page like this:
<script src="<%=ResolveClientUrl("~/content/assets/vendor/jquery/dist/jquery.min.js")%>">
</script>

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

How to fire javascript function on user control blur event

I'm developing a Web user control
.ascx
<div style="position:relative;border:none;" id="divComboContainer" runat="server" >
<asp:HiddenField ID="Hidden_TextField" Value="" runat="server" />
<asp:HiddenField ID="Hidden_ValueField" Value="" runat="server" />
<asp:HiddenField ID="Hidden_Value" Value="" runat="server" />
<asp:HiddenField ID="Hidden_Row_Index" Value="" runat="server" />
<asp:HiddenField ID="hfScrollPosition" Value="" runat="server" />
<asp:TextBox ID="txtDisplay" runat="server" CssClass="tb10" ></asp:TextBox>
<asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel"
Width="280px" style="display :none;visibility: hidden;padding-bottom:-1px;
margin-top:-28px;margin-left:0px;background-color:#F5F5F5;overflow:hidden;
height:auto;min-height:100px;max-height:300px;max-width:350px;" >
<div id="CombClose" style="padding-right:2px;color:#FFFFFF;text-align:right;cursor:pointer;height:35px;background-color:#507CD1;width:100%;" runat="server" >Close</div>
<br />
<div runat="server" id="listDiv" style="padding-bottom:-1px;margin-top:-28px;
margin-left:0px;background-color:#F5F5F5;overflow-Y:auto;overflow-X:hidden;
height:200px;max-height:265px;max-width:350px;" tabindex="0">
<asp:CheckBoxList ID="chkList" runat="server" CssClass="Chklist">
</asp:CheckBoxList>
</div>
</asp:Panel>
<ajaxToolkit:DropDownExtender runat="server" ID="DDE" TargetControlID="txtDisplay"
DropDownControlID="DropPanel" HighlightBorderColor="Transparent" OnClientPopup="OnClientPopup" />
</div>
In this control i need to fire some java-script on lostFocus or blur event.
Can any one guide me how can i call my script on control blur or lostFocus.

Concerned with datalist

I have a datalist. My designer code is like this.
<asp:DataList ID="dlView" runat="server" CssClass="basix" RepeatColumns="4" >
<ItemTemplate>
<tr>
<td>
<asp:Image ID="imgPlan" runat="server" ImageUrl='<%#GetImage(Eval("ImageName")) %>' />
</td>
<td>
<asp:LinkButton ID="lnkChangeLogo" runat="server" Text="ChangeLogo" CommandName="Select">
</asp:LinkButton>
<asp:LinkButton ID="lnkRemoveLogo" runat="server" Text="RemoveLogo"
OnClientClick="javascript:ConfirmChoice();return false;"/>
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload"/>
</td>
</tr>
</ItemTemplate>
</asp:DataList>
When I click btnUpload, I want to call one function in javascript, suppose its uploadimages(). I have to pass Eval("ImageName") in imgPlan, and ImageName also to javascript. How can I do that?

Untested:
<asp:Button ID="btnUpload" runat="server" onclick="UploadImages("<% Eval("ImageName") %>");" Text="Upload"/>
EDIT:
onclick might need to be OnClick or OnClientClick (and you may have to put "javascript:UploadImages"