I have a DataList which displays three products per row. What I want is to display the 'Category' name at the top of each row. Each item contains the Category so I want to display it only on the first one and maybe on a different div if possible.
At the moment I am not able to get the Label5 so I can do some actions on it. Any ideas?
<div id="dvProducts">
<asp:DataList ID="rptCustomers" runat="server" BorderColor="Black" CellPadding="0" RepeatDirection="Horizontal">
<ItemTemplate>
<asp:Label ID="Label5" runat="server" visible="true" Text='<%# Eval("SubCategoryID")%>'/></label>
<script type="text/javascript">
var theLabel = document.getElementById('Label5').eq(0);
//If theLabel is alread visible/rendered then other occurences.
//hide here
</script>
</ItemTemplate>
</asp:DataList>
</div>
Rendered HTML:
<div id="dvProducts">
<table id="dnn_ctr434_View_rptCustomers" cellspacing="0" cellpadding="0" style="border-color:Black;border-collapse:collapse;">
<tbody><tr>
<td>
<span id="dnn_ctr434_View_rptCustomers_Label5_0">1</span>
<div class="wrapping">
<div id="boxer">
<span class="Thumbnail">
<div class="photo_box img_zoom">
<a href="http://localhost/top3/TheDetails/ProductID/17">
<div class="pic_box">
<img src="/top3/Portals/0/thumbdesktop-wallpaper-high-resolution.png" alt="Mountain View" class="topimage">
<div class="ico"><span class="glyphicons glyph-search"></span></div>
</div>
</a>
</div>
</span>
<br>
<span class="ProductID">
<span id="dnn_ctr434_View_rptCustomers_ProductID_0">17</span></span>
<br>
<span class="Name">
<span id="dnn_ctr434_View_rptCustomers_Name_0">the big product</span></span>
</div>
</div>
<br>
</td><td>
<span id="dnn_ctr434_View_rptCustomers_Label5_1">1</span>
<div class="wrapping">
<div id="boxer">
<span class="Thumbnail">
<div class="photo_box img_zoom">
<a href="http://localhost/top3/TheDetails/ProductID/14">
<div class="pic_box">
<img src="/top3/Portals/0/images/images1/thumb10404234_10154364241210080_1593901414874601578_n.png" alt="Mountain View" class="topimage">
<div class="ico"><span class="glyphicons glyph-search"></span></div>
</div>
</a>
</div>
</span>
<br>
<span class="ProductID">
<span id="dnn_ctr434_View_rptCustomers_ProductID_1">14</span></span>
<br>
<span class="Name">
<span id="dnn_ctr434_View_rptCustomers_Name_1">Test</span></span>
</div>
</div>
<br>
</td><td>
<span id="dnn_ctr434_View_rptCustomers_Label5_2">1</span>
<div class="wrapping">
<div id="boxer">
<span class="Thumbnail">
<div class="photo_box img_zoom">
<a href="http://localhost/top3/TheDetails/ProductID/24">
<div class="pic_box">
<img src="/top3/Portals/0/Templates/thumb10502496_10154364240805080_26951325019847038_n.png" alt="Mountain View" class="topimage">
<div class="ico"><span class="glyphicons glyph-search"></span></div>
</div>
</a>
</div>
</span>
<br>
<span class="ProductID">
<span id="dnn_ctr434_View_rptCustomers_ProductID_2">24</span></span>
<br>
<span class="Name">
<span id="dnn_ctr434_View_rptCustomers_Name_2">fasdf</span></span>
</div>
</div>
<br>
</td>
</tr>
</tbody></table>
</div>
First, the id attribute must be unique. If you need more than one, then you should use class instead. In this particular case, you don't need either.
Add this in a script tag:
jQuery(function() {
jQuery('[id*=Label5]').hide().each(function(i){
if ( !(i % 4)) { $(this).show(); }
});
});
You can see it on this fiddle.
Related
Click Here to see What the Page Cart.aspx looks like in page Cart.aspx i have a input quantity inside a repeater and i need to get id of the product , and call a c# method to update the quantity in cart table every time the value changes
<asp:Repeater runat="server" ID="repeater1" DataSourceID="SqlDataSource1" OnItemCommand="repeater1_ItemCommand">
<ItemTemplate>
<div class="items">
<div class="product">
<div class="row">
<div class="col-md-3" style="left: 19px;top: 31px;">
<img class="img-fluid mx-auto d-block image" src='<%# Eval("ProductImageLink").ToString().Replace("\\", "/") %>'>
</div>
<div class="col-md-8">
<div class="info">
<div class="row">
<div class="col-md-5 product-name">
<div class="product-name">
<%#Eval("ProductName")%>
<div class="product-info">
<div> Description : <span class="value"> <%#Eval("ProductDescription")%> </span></div>
<div> Category : <span class="value"> <%#Eval("ProductType")%></span></div>
<%-- <asp:Label Text='<%#Eval("ProductID")%>' runat="server" ID="ProducttID" />--%>
</div>
</div>
</div>
<div class="col-md-4 quantity">
<label for="quantity">Quantity:</label>
<%--i need the onchange to call a c# method and give it the product id as a parameter --%>
<asp:Label Text='<%#Eval("ProductID")%>' runat="server" ID="ProductID" />
<input id="quantity" type="number" value='<%# Eval("Quantity")%>' class="form-control quantity-input" runat="server" min="1" max='<%# Eval("Stock")%>'/>
</div>
<div class="col-md-3 price" style="margin-left: 0px;padding-right: 0px;padding-left: 0px;">
<span><%#Eval("ProductPrice")%>$</span>
<asp:Button ID="Button1" runat="server" Text="Remove" class="btn btn-primary btn-lg btn-block" CommandName="Delete" CommandArgument = '<%#DataBinder.Eval(Container.DataItem, "ProductID")%>' />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
You should use javascript but idk how you'd be able to get the product id it will just call the c# method
I have an unusual case and can't find a solution for this.
I'm trying to get the length of an column "Kontrolle".
The yellow background is the leader and is always on the first position and is duplicated from an other column.
This is the html code:
<div class="col-xl mr-2 py-0 content-kontrolle">
<div class="header header-kontrolle">
<h1 class="pl-2">Kontrolle</h1>
</div>
<div class="abt-kontrolle">
<div class="mt-2 panel-name panel-kontrolle duplicate" data-name="Name
Name" data-status="leader">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
// and so on....
</div>
</div>
if i check the length of this column i'm getting a wrong length.On the first photo there are 4 elements and i'm getting 3.
this is the jquery snippet:
var $abtLength = $('.abt-kontrolle .panel-name').length;
console.log($abtLength);
the length property is not counting the duplicate element.
if i check the childElementCount i get a correct length:
but when i console.log it i'm getting still wrong length.
var $childDepartmentNodes = $('.abt-kontrolle')[0].childElementCount;
console.log($childDepartmentNodes);
i'm getting also 3.
UPDATE 1
$("div[data-name='"+$name+"']")
.not(".duplicate")
.clone()
.prependTo(".abt-"+ $belongsToDepartment + ":first")
.attr("data-status", "leader")
.removeClass(function(index, element) {
return (element.match (/\bpanel-\S+/g) || []).join(' ');
})
.addClass("panel-name panel-" + $belongsToDepartment + " duplicate");
this is where i clone the leader from a column to another column
maybe your cloning/duplicating is not completely done at the moment when your log happens.
whats the count if you copy this
$('.abt-kontrolle .panel-name').length;
into dev console after everything is done?
Your code works, you can check attached snippet, but we need toi know how you duplicate the div maybe you get the size before duplacting the element
var len = $(".abt-kontrolle>.panel-name").length;
alert(len)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xl mr-2 py-0 content-kontrolle">
<div class="header header-kontrolle">
<h1 class="pl-2">Kontrolle</h1>
</div>
<div class="abt-kontrolle">
<div class="mt-2 panel-name panel-kontrolle duplicate" data-name="Name
Name" data-status="leader">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
</div>
I'm trying to move the #whatsOnLink to below the "Get a Quote" button across the site using jQuery and I'm having trouble on the jQuery side of things. If I remove the additional part of .button from the target then it will move fine but I need it to go inside the holding div.
$('div[class^="grid"] a#whatsOnLink').each(
function() {
$(this).insertAfter($(this).closest('div[class^="grid_3"] div .button'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>
Any help is appreciated.
Regards,
Kieran
Use this
$(this).closest('div[class^="grid_3"]').find('div .button')
Instead of
$(this).closest('div[class^="grid_3"] div .button')
$(document).ready(function() {
$('div[class^="grid"] a#whatsOnLink').each(
function() {
$(this).insertAfter($(this).closest('div[class^="grid_3"]').find('div .button'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>
You could use .next()
$('div[class^="grid"] a#whatsOnLink').each(function() {
$(this).insertAfter($(this).next().next());
// OR
// $(this).appendTo($(this).parent());
});
$('div[class^="grid"] a#whatsOnLink').each(function() {
$(this).insertAfter($(this).next().next());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>
I Try to getting the text form same div on button click event.
Here is my HTML Markup:
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airlogowidth airsprite airlogo A4">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more-1" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary" style="display: none;">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
I want "flight-no" div html i.e SG-264 on 'btn-book' on Click.
I try as follows, but return 'undefine' -
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-info').parent('div.left-i').html();
alert(flightNo);
});
Note that in the page have many rows with 'flights' class.
Anyone help me?
The issue with your current code is that the .flight-info element is not a direct parent of .btn-book, it's a sibling of one of the parents. This is why the .flight-info selector on closest() returns nothing.
The easiest way to achieve what you require is to use closest() to get the nearest common parent of both elements, in this case .flight-box, then use find() and text() to get the flight number. Try this:
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-box').find('.flight-no').text();
alert(flightNo); // = SG-264 given your example
});
Example fiddle
you need to use .find() with .closest() and div.left-i is children of div.flight-info not parent()
use it like this
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('.flight-box').find('div.left-i .flight-no').html();
alert(flightNo);
});
DEMO
I try to make draggable &sortable content with jQuery UI when i use:
helper:clone property
it's work perfectly, but i don't want to clone elements.
I want move them and when i use default helper then elements are not sortable.
Elements are on the stack in one place, instead of move other elements to make empty place form dragged element
See those Html and script below
This works for 2 categories
<div class="content">
<div class="category" data-category="1">
<div class="noteCategory">
<h3>Cat 1</h3>
</div>
<div id="categorycontent1" class="categoryContent">
<div class="note cnote" data-id="2" data-category="1">
<span class="noteDate">
<span class="date">
2015-01-01
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text
</div>
</div>
<div class="note cnote" data-id="2" data-category="1">
<span class="noteDate">
<span class="date">
2015-01-02
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text 2
</div>
</div>
</div>
</div>
<div class="category" data-category="2">
<div class="noteCategory">
<h3>Cat 2</h3>
</div>
<div id="categorycontent2" class="categoryContent">
<div class="note cnote" data-id="5" data-category="2">
<span class="noteDate">
<span class="date">
2015-01-04
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text 22
</div>
</div>
<div class="note cnote" data-id="8" data-category="2">
<span class="noteDate">
<span class="date">
2015-01-06
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text 23
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#categorycontent1, #categorycontent2").sortable({
connectWith: ".categoryContent"
}).disableSelection();
});
</script>
Hope this helps