I have the below listview and I want to remove an item when the user presses the add to cart button. I am not 100 percent sure how the listview works because ID's have to be unique and as you can tell the table row with an ID of gameRow will not be unique. What I am wanting to achieve is to remove all of the tr's inside of that gameRow when the user presses the add to cart button.
I am using a asp listview and populating this through the selectmethod.
<asp:ListView ID="lvProductListing"
ItemType="CommonBusinessObjectsGS.Game"
SelectMethod="GetGames"
DataKeyNames="GameId"
runat="server" EnableViewState="false" >
<LayoutTemplate>
<table id="productListingTable" class="productLisingTable">
<tr id="itemPlaceholder" runat="server"></tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="gameRow">
<tr>
<td rowspan="6">
<img class="gameImageIdClass" id="gameImageId" src="<%#:Item.GameImageString%>" alt="" />
</td>
</tr>
<tr>
<td><%#:Item.GameName%></td>
</tr>
<tr>
<td><%#:Item.PlatformName%></td>
</tr>
<tr>
<td><%#:Item.ConditionShortDescription%></td>
</tr>
<tr>
<td><%#:Item.RetailCost.ToString("c")%></td>
</tr>
<tr>
<td>
<button id="btnAddToCart" name="btnAddToCart" onclick="removeGameRow()" value="<%#:Item.GameId %>">Add to Cart</button>
</td>
</tr>
</tr>
</ItemTemplate>
</asp:ListView>
I ended up changing the html to make this a bit easier. Here is what my ItemTemplate for my listview now looks like. With some help with CSS (below) the gameImageDiv and gameInfoDiv will be side by side.
<ItemTemplate>
<div id="gameContainerDiv">
<div id="gameImageDiv">
<img class="gameImageIdClass" id="gameImageId" src="<%#:Item.GameImageString%>" alt="" />
</div>
<div id="gameInfoDiv">
<ul id="gameInfoUL">
<li><%#:Item.GameName%></li>
<li><%#:Item.PlatformName%></li>
<li><%#:Item.ConditionShortDescription%></li>
<li><%#:Item.RetailCost.ToString("c")%></li>
<li><button type="button" id="btnAddToCart" name="btnAddToCart" onclick="removeGameRow(this)" value="<%#:Item.GameId %>">Add to Cart</button></li>
</ul>
</div>
</div>
</ItemTemplate>
Now for the CSS to stack the game information beside the image of the game.
#gameContainerDiv {
display: table;
}
#gameImageDiv, #gameInfoDiv {
display: table-cell;
}
#gameInfoUL{
list-style-type:none;
}
Now for the jQuery to remove the game image and the info about that game. The onclick event will execute the removeGameRow function passing in the button that was clicked. From that button I am getting the button id and I am finding the closest div with a class name of gameContainerDiv and removing it. gameContainerDiv - is the container for the game image and the info about the game.
$(document).ready(function () {
function removeGameRow(button) {
$(button).closest("#gameContainerDiv").remove();
};
});
Related
I am creating multiple-choice questions in ASP.NET Web Forms. I am getting the question and multiple choice options from the database. Is there a simple way to hide the 3rd option (C) when there are only two inputs (True or False)? Thank you in advance!
Here is aspx code:
<tr>
<td class="style7">A.</td>
<td style="text-align: left">
<asp:RadioButton ID="RbA" runat="server" GroupName="gtog"/>
</td>
</tr>
<tr>
<td class="style7">B.</td>
<td style="text-align: left">
<asp:RadioButton ID="RbB" runat="server" GroupName="gtog" />
</td>
</tr>
<tr>
<td class="style7">C.</td>
<td style="text-align: left" >
<asp:RadioButton ID="RbC" runat="server" GroupName="gtog" />
</td>
</tr>
As we have no info as to what is happening on your backend I'll keep this generic.
Add an id and runat="server to the final table row. You can then access that serverside to hide an show the row.
ASPX
<tr id="rowC" runat="server">
<td class="style7">C.</td>
<td style="text-align: left" >
<asp:RadioButton ID="RbC" runat="server" GroupName="gtog" />
</td>
</tr>
C#
if(answerCount == 2)
{
rowC.visible = false;
}
On a side note, you really should avoid using tables for layout. It is now 2020 there are many better ways to layout a form (or anything).
Yes, you can check if the item from the database is of Type bool - if this is true make 3rd Options(C) hidden.
So create a variable that checks the item from the database, if its a Boolean then add hide RbC.
Type b = itemFromDB.GetType();
if(b is bool)
RbC.hidden = true;
I have a table with one row having 4 cells as below
<table class="Header3" style="width: 100%;">
<tr>
<td id="RC" class="contLabel" style="width: 228px">
<div class="abc">Related Companies</div>
</td>
<td style="width: 101px">
<asp:checkbox runat="server" id="RCR" type="checkbox" ENABLED="false"/>
</td>
<td style="width: 116px">
<asp:checkbox runat="server" id="RCP" type="checkbox" ENABLED="false"/>
</td>
<td id="RC2" class="contLabel">Are related companies used to improve results?</td>
</tr>
And I below the table, i have a textbox inside div, the code is below:
<div id="RCN" class="panel2" style="width: 100%;">
<div class="ContentTB">
<asp:TextBox id="RCNT" runat="server" TextMode="MultiLine" width="99.5%" Enabled="false"></asp:TextBox>
</div>
</div>
What I want to achieve is the moment I click the first cell (#RC) or the 4th cell (#RC2), the textbox below the table get toggled, currently my jquery code is
$(function() {
$('#RC,#RC2').click(function(e) {
$('#RCN').toggle('fast');
});
})
and it works ok.
Now problem is that I have 20 tables and 20 textboxe, and I don't want to write 20 lines jquery code.
I'm trying things like
$('.contLabel').click(function(e) {
$(this).next('.panel2').toggle('fast');
});
but it does not work. I wonder what's the correct code?
The reason that I don't put all of them in one table is that the toggle animation does not look good.
Thanks for any advice!
You'd want to go back up to the table using closest() then use next() to get the div with the textarea in it.
$('.contLabel').on('click', function (e) {
var $td = $(this);
$td.closest('table').next('.panel2').toggle('fast');
});
This should do the trick
$('.contLabel').click(function (e) {
$(this).parent('tr').parent('tbody').parent('table').next('.panel2').toggle('fast');
});
I have a datalist and I am calling javascript on div click added in datalist ..
How can i get control values on click of my div added in datalist
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<div id="metroaqui" class="divsub" runat="server"
onclick="javascript:getvalues(this);">
<table>
<tr class="clstd">
<td>
<b>IP NO:-</b>
</td>
<td colspan="2" style="width: 20%">
<asp:Label runat="server" ID="ipnolable"
Text='<%# Eval("IpNo") %>'></asp:Label>
</td>
<td>
<b>PATIENT NO:-</b>
</td>
<td colspan="2">
<asp:Label runat="server" ID="Label1"
Text='<%# Eval("PatientNo") %>'>
</asp:Label>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</asp:DataList>
To access the control inside the DataList, try to use the following way,
function getVal()
{
var datalist = document.getElementById('<%=DataList1.ClientID%>').childNodes[0];
var tb = datalist.getElementsByTagName("input");
for (var i=0;i<tb.length;i++)
{
//TextBox
if (tb[i].type=="text")
{
alert(tb[i].value);
}
//DropDown
if (tb[i].type=="select")
{
alert(tb[i].options[tb[i].selectedIndex].value);
}
}
}
You can simple use document.getElementById to get the values from your controls.
Note that you id's will change at runtime.
Also remember that label render as span on browser so you will have to check for innerText and innerHtml of your control.
You can take benefit of ClientIDMode="static" for static client id of the server controls. like asp:Label etc.
I'm having trouble validating a drop down asp control on button click. I have a panel that contains radio buttons, textboxes, a drop down, and a save button. If the radio button for zip is chosen a drop down list appears (that is binded with data in the code behind) and you must select a zip from the list. I'm having trouble validating on button click of the save button that a selection was made from the downdown list.
I would like to do it with jQuery and tried doing it like so that pops up and alert but its not working. Like to have it validate the selection before it does on the onClick of the button.
<script type="text/javascript">
$(document).ready(function() {
$('#btn_submit').click(function() {
if ($('#ZIPDD').val() > 0) {
return true;
}
else {
alert('Please select a zip.');
return false;
}
});
});
<asp:UpdatePanel runat="server" ID="UP6" ChildrenAsTriggers="false" UpdateMode="conditional">
<ContentTemplate>
<table style="text-align:center;" cellpadding="5px">
<tr>
<td>
<table runat="server" id="_table" width="100%" cellspacing="10">
<tr>
<td style="width:100px; font-weight:bold; padding-bottom:inherit;" valign="middle">
<div>STEP 1:</div>
<div>Enter a #</div>
</td>
<td align="left" valign="middle" style=" margin-bottom:15px;">
<asp:TextBox runat="server" ID="txt_nbr" Width="70px"/>
<asp:Button ID="Button1" Text="Continue" runat="server" OnClick="Button1_Click"/>
</td>
</tr>
<tr>
<td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle">
</td>
<td style="border:2px solid gray; background-color:Silver;">
<table runat="server" id="SHTable" visible="false" width="100%">
<tr align="left">
<th style="font-weight:bold;border-bottom:2px solid black;">Methods</th>
<th style="font-weight:bold;border-bottom:2px solid black;">Location</th>
<th style="font-weight:bold;border-bottom:2px solid black;"> <asp:Label runat="server" ID="DOTEXT"></asp:Label></th>
</tr>
<tr align="left">
<td>
<div style="margin-bottom:10px;"><asp:CheckBox runat="server" ID="ZIP" Text="ZIP" AutoPostBack="true" OnCheckedChanged="ZIP_CheckedChanged" /></div>
</td>
<td style="width:300px;">
<asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/><br /><asp:Label ID="ziplabel" Visible="false" runat="server" style="color: red; font-size:12px;"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle">
<div>Confirm changes and hit save</div>
</td>
<td align="left" valign="middle">
<asp:Button Text="Save" runat="server" ID="btn_submit" OnClick="btn_submit_Click" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</ContentTemplate>
Binding to the dropdown in the code behind on page load
protected void Page_Load(object sender, EventArgs e)
{
if (ZIPDD.Items.Count == 0)
{
Loadzips();
}
}
private void LoadBranches()
{
using (SqlConnection SQLCONN)
{
SQLCONN.Open();
SqlCommand SQLCOMM = SQLCONN.CreateCommand();
SQLCOMM.CommandText = "SELECT * FROM table";
IDataReader dr = SQLCOMM.ExecuteReader();
ZIPDD.DataSource = dr;
ZIPDD.DataValueField = "ZIPID";
ZIPDD.DataTextField = "ZIPLABEL";
ZIPDD.DataBind();
ZIPDD.Items.Insert(0, new ListItem(String.Empty, String.Empty));
ZIPDD.SelectedIndex = 0;
}
}
When you are planning to use javascript/jquery, pay attention to how controls are rendered in the client side. You are setting visible="false" to table and controls, they will never render in the client side. You can't find them using jquery. To work properly, you need to set this:
<table runat="server" id="SHTable" visible="false" width="100%">
to this:
<table runat="server" id="SHTable" style="display:none" width="100%">
and also change this:
<asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/>
to this:
<asp:DropDownList runat="server" ID="ZIPDD" style="display:none"/>
To test your script, set style="display:block" for the table and the dropdown also, otherwise you will see porpup to select a zip (dropdown value is 0).
Good luck!
Why dont you look at using the jQuery.validate plugin. It will validate all form items that have the class "required" attached to it. You could use jQuery and addClass to add the class required to the dropdown if the checkbox is highlighted.
if($('#radio_button').is(':checked')) {
$( ".dropDownClassIdentifier" ).addClass( "required" );
}
else
{
$( ".dropDownClassIdentifier" ).removeClass( "required" );
}
http://jqueryvalidation.org/ and
http://api.jquery.com/addClass/ are good places to start looking for documentation
I have a page with three rows of main information that all have a 'More Info' button attached, sort of like wefollow.com and their info button.
When the 'More Info' link is clicked a <tr> with a class of "mi" slides down above the main info.
The problem that I am getting is hiding the <tr> before the 'More Info' link is clicked. There is just a blank space where the <tr> is. The info in the <tr> is being hidden with jQuery (script below) and then displays when 'More Info' is clicked.
I tried hiding the "mi" with CSS but when the 'More Info' button is clicked, nothing happens.
Any help would be awesome. Thanks.
Scripts
index
<table>
<tbody>
<tr id="info-1"> </tr>
<tr class="mi">
<td>
<div id="1" class="more-information" />
</td>
</tr>
<tr class="">
<td> </td>
<td> </td>
<td> <a id="1" class="more-info" href="#">More info</a> </td>
</tbody>
</table>
listing.js
$(function(){
$(".more-information").hide();
$(".more-info").click(function () {
var divname= this.id;
$("#"+divname).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
return false;
});
First problem is you're repeating IDs. They need to be unique. That's no doubt throwing off your code.
<table>
<tbody>
<tr id="info-1"> </tr>
<tr class="mi">
<td><div id="more-1" class="more-information">More information</div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><a id="1" class="more-info" href="#">More info</a></td>
</tr>
</tbody>
</table>
combined with:
$(function() {
$("a.more-info").click(function() {
$("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
});
});
Not sure why you need to hide siblings in the above though.
Also, I wouldn't hide the "more-information" divs in jquery. Just add CSS for that:
div.more-information { display: none; }
You are hiding the more-information div but you are not hiding its parent element, the <tr> with class mi. Try putting the id attribute in the <tr> instead of the enclosed div, and hiding the whole row. Also, you'll have to take cletus' advice about not repeating id's and unnecessary sibling hiding.