How to get list box item reference in javascript function - javascript

I have Listview control on webform.aspx page with below defination...
<asp:ListView runat="server" ID="dispalyProducts">
<LayoutTemplate>
<table runat="server" id="table1">
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr1" runat="server">
<td id="Td1" runat="server">
<%-- Data-bound content. --%>
<asp:Label runat="server" Text='<%#Eval("ProductName") %>' />
<br/>
<asp:TextBox runat="server" />
<br/>
<asp:Label runat="server" Text='<%#Eval("ProductID") %>' />
<br/>
<asp:Button runat="server" Text="Add TO cart" OnClientClick="AddToCart('<%#Eval("ProductID") %>');return false;"/>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Whent he program runs, it creates a list of product ID, name and a button.
I want to use this button as "add to cart" functionality. so when a user clicks on button, i want to call a javascript function with productID, and textbox value (as item id and quantity).
How can I pass these values to javascript function in listview.

<asp:Button ... OnClientClick='AddToCart(\"<%#Eval("ProductID") %>\", \"<%#Eval("ProductName") %>\");return false;'/>
You can pass values as parameters to your js function.

Related

Asp.net 2.0 error repeater button

I am trying to use a repeater and use ajax instead of the "EnableEventValidation='true'" but I get the error below on page unload. When I click on the button in the repeater the repeater1_ItemCommand does not get referenced
Error:
System.Collections.ListDictionaryInternal System.ArgumentException:
Invalid postback or callback argument. Event validation is enabled
using in configuration or <%#
Page EnableEventValidation="true" %> in a page
Code:
<asp:ToolkitScriptManager ID="MainSM" EnablePageMethods="true" runat="server" ScriptMode="Release" LoadScriptsBeforeUI="true">
</asp:ToolkitScriptManager>
<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_ItemCommand">
<ItemTemplate>
<table id="myTable" width="700" border="1" class = "mMMGrid" frame="box">
<th align=left>Page Image</th><th align=left>Page #</th><th align=left >Page Sequnce</th><tbody>
<tr>
<td width="15%">
<div id = "dPage" runat="server" >
<asp:ImageButton ID="imbtnCourseLink" runat="server" ImageUrl='<%#imPath(DataBinder.Eval(Container, "DataItem.ChunkFilePath"))%>' OnClick="imlink2" Width="75px" Height="75px" />
</div>
</td>
<td width="15%">
<strong>Pages</strong> : <asp:label ID="lblPage" Text='<%# Eval("Page")%>' runat="server"></asp:label> <br/>
</td>
<td width="65%">
<asp:ImageButton ID="imbtUp" runat="server" ImageUrl="~/SiteImages/go-up.png" Width="40" height="40" CommandName="UP" CommandArgument='<%# Eval("Page")%>'/>
<asp:ImageButton ID="imbtDown" runat="server" ImageUrl="~/SiteImages/go-down.png" Width="40" Height="40" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<triggers>
<asp:asyncpostbacktrigger controlid="imbtUp" eventname="Click" />
<asp:asyncpostbacktrigger controlid="Repeater1" eventname="ItemCommand" />
</triggers>
</asp:UpdatePanel>
<br />
</td>
</tr>
</tbody>
</table>
</ItemTemplate>
</asp:Repeater>

control inside a repeater

I have a repeater control in my aspx page which has a textbox field called "name" and a hidden field called "id" that is the id of the name.
I want to get the value of the id field when the name textbox is in focus and pass it, can you please let me know how i can accomplish that?
<asp:Repeater ID="rpt" runat="server">
<ItemTemplate>
<tr>
<td >
<asp:TextBox ID="txtName" runat="server" Text='<%#Eval("Name")%>'/>
</td>
<td >
<asp:DropDownList ID="ddListNumber" runat="server">
<asp:ListItem Text='First' Value="1" />
<asp:ListItem Text='Second' Value="0" />
</asp:DropDownList>
</td>
<asp:HiddenField runat="server" Value='<%# Eval("ID") %>' ID="txtID" Visible="false" />
</tr>
</ItemTemplate>
</asp:Repeater>

How can i get an element id inside a asp repeater with javascript. I am trying to get the ID of the RadioButtons

I have a table and inside the table i have an asp repeater.
<table id="repeaterTable">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<tr>
<td>
<b>Not Feasible:</b> <asp:RadioButton ID="notfeasibleRadioBtn" runat="server"/> <b>Feasible:</b> <asp:RadioButton ID="feasibleRadioBtn" runat="server" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>

how to select input field under asp:repeater element in jquery

<asp:UpdatePanel ID="radpnl1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Repeater ID="rpt_Template" runat="server">
<HeaderTemplate>
<table id="tblusers" width="100%" cellpadding="2" cellspacing="2">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td width="20%" class="table_row2">
Name :
</td>
<td class="table_row2">
<input type="text" id="txt_template" name="txt_template" value='<%# DataBinder.Eval(Container.DataItem, "TemplateName") %>'
maxlength="200" />
<input type="hidden" id="hdnDeletedIds" name="hdnDeletedIds" value="" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
I am new to Jquery. I want to know if i can select all the input fields above with id="txt_template" to compare their name using a Jquery function. As this is is under <asp:repeater> control, I'm not sure how to achieve this.
Inside the repeater, You need to use class instead of id. I'm not really sure but I thing the id you give to a server control with runat=server is not essentially the rendered id.
So use a class as follows
<asp:UpdatePanel ID="radpnl1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Repeater ID="rpt_Template" runat="server">
<HeaderTemplate>
<table id="tblusers" width="100%" cellpadding="2" cellspacing="2">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td width="20%" class="table_row2">
Name :
</td>
<td class="table_row2">
<input type="text" class='aSuperInput' id="txt_template" name="txt_template" value='<%# DataBinder.Eval(Container.DataItem, "TemplateName") %>'
maxlength="200" />
<input type="hidden" id="hdnDeletedIds" name="hdnDeletedIds" value="" />
</td>
</tr>
</table>
</ContentTemplate>
JQuery
$('.aSuperInput').change(function(){
//----
});
or
$('.aSuperInput').select(function(){
//----.blur(), .focus(), .unblur(), ect.
});

javascript onclick to select item with asp.net ListView control

I'm trying to implement a onclick event to select an item in a asp:ListViewControl.
<ItemTemplate>
<tr runat="server" id="MemberRow" onclick='<%#ClientScript.GetPostBackClientHyperlink(LvMembers, string.Format("Select${0}", Container.DataItemIndex)) %>'>
<td>
<asp:Literal runat="server" ID="LtlMembershipNumber" Text='<%#Eval("MembershipNo") %>' />
</td>
<td>
<asp:Literal runat="server" ID="LtlName" Text='<%#Eval("FullName") %>' />
</td>
<td>
<asp:Literal runat="server" ID="LtlCompany" Text='<%#Eval("Company") %>' />
</td>
<td>
<asp:Literal runat="server" ID="LtlNotes" Text='<%#Eval("Notes") %>' />
</td>
<td runat="server">
<asp:Literal runat="server" ID="LtlMobile" Text='<%#Eval("MobilePhone") %>' /><asp:LinkButton
runat="server" ID="lnl1" CommandName="Select" Text="test" />
</td>
</tr>
</ItemTemplate>
The page loads and binds as expected. It also outputs the HTML I would expect.
<tr id="ContentPlaceHolder1_LvMembers_MemberRow_1" onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LvMembers','Select$1')">
<td>
10000018
</td>
<td>
Axel Rose
</td>
<td>
</td>
<td>
</td>
<td>
<a id="ContentPlaceHolder1_LvMembers_lnl1_1" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LvMembers$ctrl1$lnl1','')">test</a>
</td>
</tr>
However the onclick does not fire the ListView.Command or ListView.SelectedIndexChanging event? If I add a button with CommandName="Select" it works as expected? The POST data is the same!
{__EVENTTARGET=ctl00%24ContentPlaceHolder1%24LvMembers&__EVENTARGUMENT=Select%245&__VIEWSTATE=...}
Kind of answered this myself. The ListView class does not implement the IPostBackEventHandler interface.
This means that it does not have the RaisePostBackEvents method and does not accept the EventTarget.
I've overloaded it to implement this interface.
public class ListViewEvent : ListView, IPostBackEventHandler
{
public void RaisePostBackEvent(string eventArgument)
{
if (!eventArgument.Contains("$"))
return;
string[] splitEventArgument = eventArgument.Split('$');
switch (splitEventArgument[0])
{
case "Select":
{
SelectItem(Convert.ToInt32(splitEventArgument[1]));
break;
}
default:
{
break;
}
}
}
}

Categories