I have a table row as such:
<tr class="song-row song-row-selected" data-id="1">
<td data-col="title">
<span class="song-content">
<img src="img/cover3.jpg" />
Song Title
</span>
</td>
<td>3:37</td>
<td>song artist</td>
<td>song album</td>
<td>23</td>
</tr>
I want to add a div to indicate that the song is paused (surrounded by *):
<tr class="song-row song-row-selected" data-id="1">
<td data-col="title">
<span class="song-content">
<img src="img/cover3.jpg" />
Song Title
*<div class="song-indicator loading"></div>*
</span>
</td>
<td>3:37</td>
<td>song artist</td>
<td>song album</td>
<td>23</td>
</tr>
I was hoping to use JQuery. So far I have:
function displayPause() {
$('tr.song-row.song-row-selected:first').each(function() {
$(this).siblings('td span.song-content').add('<div class="song-indicator paused"></div>');
});
}
Needless to say, it doesn't add the div. Also, I would like a function for me to easily remove the div from the span. Does anyone know where to point me in the right direction?
You should be using append as well as children, not siblings
$(this).children('td span.song-content').append('<div class="song-indicator paused"></div><input type="button" class="removeDiv" value="Remove"/>');
I also added a button right next to your div, clicking this will remove that div with this code:
$(document).on("click", ".removeDir", function() {
$(this).prev(".song-indicator").remove();
$(this).remove();
});
append is what you want:
$(this).find('td span.song-content')
.append('<div class="song-indicator paused"></div>');
This will ... append the div to the end of your span.
Also, as tymeJV says, your td is not a sibling of your tr; it's a child. Use either children, or find to grab it.
And to remove it, you'd use remove. If I understand your app correctly, it should be something like this:
$('tr.song-row.song-row-selected:first')
.find("div.song-indicator.paused").remove();
Here a litte sample on jsfiddle
$("tr.song-row-selected:first td span.song-content").append("*<div class='song-indicator loading'></div>*");
Related
I have a problem. I need to make a modal window for each product, but in the modal window, all products only display the last product. I tried to assign id identifiers, but then only the modal window of the first product works.
window.onload = function() {
$('.img-for-modal').click(function() {
$('.modal').css('display', 'block');
});
$('.close').click(function() {
$('.modal').css('display', 'none');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
<table class="product">
<tr>
<td class="img" rowspan="3">
<img class="img-for-modal" src="media/products-image/1.jpg">
<div class="modal">
<span class="close">×</span>
<img class="modal-img" src="media/products-image/1.jpg">
</div>
</td>
<td class="product-info">
<article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
</td>
</tr>
<tr>
<td class="product-info">
<b>Цена: </b>200 руб.
</td>
</tr>
<tr>
<td class="product-delete">
Добавить в корзину
</td>
</tr>
</table>
I suggest you change to this which will show the nearest modal and close the nearest modal. Your current code selects all items with class modal
Note I use jQuery $(function() { ... }); instead of window.onload = function() { ... }
$(function() {
$('.img-for-modal').click(function() {
$(this).next(".modal").show();
});
$('.close').click(function() {
$(this).closest(".modal").hide();
});
});
.modal { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
<table class="product">
<tr>
<td class="img" rowspan="3">
<img class="img-for-modal" src="media/products-image/1.jpg">
<div class="modal">
<span class="close">×</span>
<img class="modal-img" src="media/products-image/1.jpg">
</div>
</td>
<td class="product-info">
<article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
</td>
</tr>
<tr>
<td class="product-info">
<b>Цена: </b>200 руб.
</td>
</tr>
<tr>
<td class="product-delete">
Добавить в корзину
</td>
</tr>
</table>
Because you are selecting all the modals on the page and showing them all.
$('.modal').css('display', 'block');
You are not selecting the modal that corresponds with what you picked. In your case the modal is beside the image so grab the next element and display it.
$(this).next('.modal').css('display', 'block');
Other option people tend to do is data attributes and ids. You add a data attribute that has the id of the item you want to show. So you read the attribute, and than show that item.
<img class="img-for-modal" src="media/products-image/1.jpg" data-toggles="#modal1">
<div class="modal" id="modal1">
and than the JavaScript would look at the attribute
var selector = $(this).data("toggles")
$(selector).css('display', 'block');
If you are in need of your modals to display dynamic content, and you are not using a framework like Angular or React to update the components for you - then you will want to use a dedicated modal library. This will help you manage multiple modal instances, as well as all of your display bindings.
I have used Bootbox.js in the past for this purpose - if you are using Bootstrap, check it out. If you are not using Bootstrap, there are other plugins that will help you accomplish the same task.
The trouble with modals is that by design there can only be a single instance at any one time (think Singleton). So each time you call it, you are calling the same instance. So...if you try to populate multiple instances - it wont happen. Only or last data set will be applied.
The problem with using
http://bootboxjs.com/
I have a bootstrap accordion table which is working fine. The glyphicon indicates which tablerows children-row is currently expanded. But something with the function seems to be wrong it doesn't change the class of the ancestor element as expected.
$('.accordion-text').on('shown.bs.collapse', function () {
$(this).closest(".indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('.accordion-text').on('hidden.bs.collapse', function () {
$(this).closest(".indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
Full code: http://jsfiddle.net/7pwg1j5f/616/
<tbody>
<tr id="package1" class="accordion-toggle" data-toggle="collapse" data-parent="#OrderPackages" data-target=".packageDetails1">
<td>123456</td>
<td>3</td>
<td><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</td>
</tr>
<tr>
<td colspan="3" class="hiddenRow">
<div class="accordion-text accordion-body collapse packageDetails1" id="">
<table>
<tr>
<td>Revealed item 1</td>
</tr>
<tr>
<td>Revealed item 2</td>
</tr>
</table>
</div>
</td>
</tr>
The way you were finding your .indicator element was not proper. It resides in the previous tr of .accordion elements parent tr. Just follow the structure and you will get the proper element. Also, you can combine both the events and use toggleClass instead of addClass and removeClass. So below is the updated solution.
$('.accordion1').on('shown.bs.collapse hidden.bs.collapse', function () {
$(this).closest('tr').prev(".accordion-toggle").find('.indicator').toggleClass("glyphicon-chevron-up glyphicon-chevron-down");
});
.closest('tr') - fetches the parent of .accordion1 div.
.prev('.accordion-toggle') - fetches the previous sibling of the
earlier obtained parent.
.find('.indicator') - find the .indicator element.
.toggleClass - toggles [add/removes] respective class.
Here is the Updated DEMO
Also note that I've made some changes in html to match the class
The problem is that your parents selector will never pickup cells from the previous row, you should select row, switch to previous and then find relevant element under that row:
$('.accordion1').on('show.bs.collapse', function () {
$(this).parentsUntil("tbody").prev().find(".indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('.accordion1').on('hide.bs.collapse', function () {
$(this).parentsUntil("tbody").prev().find(".indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
I have a HTML setup as follows and am trying to use jQuery to access the textin the font field. The table has multiple rows, hence the first line in the jQuery, for some reason I'm getting an empty string returned for the title variable. Thank you for your help!
HTML
<table class="table">
<tbody>
<tr>
<td class="head">
<a href="link" target="_self">
<p>
<font>SomeText</font>
</p>
</a>
</td>
</tr>
</tbody>
</table>
jQuery
$('.table').each(function(){
$(this).filter(function(){
var data = $(this);
title = data.children(".head").text();
json.array.push({
"title" : title
});
})
})
.head is not a child of .table. So .children(".head") will not return any elements. You should use .find instead.
Also, the .filter seems unnecessary:
$('.table').each(function(){
var data = $(this);
title = data.find(".head").text();
json.array.push({
"title" : title
});
})
Your element with class head has no text in it, you need to adjust your selector to get the actual font element, like this:
data.children(".head font").text();
I have created a list of divs using a loop from the database..
when i click select..it becomes like
the problem i am facing is that at a time i can select only one company...how could i select a nother company that will make the previous selected company unselect...
the program is like this...
{section name=i loop=$id7}
<div class="company" style="width:220px; height:220px; background-color:white;margin-left:12px;margin-bottom:22px;float:left;" >
<div id="ctable">
<table style="margin-top:20px;margin-left:18px;width:178px;height:149px;">
<tr style="text-align:center;">
<td colspan="2" align="center" valign="center" height="42px">{$id7[i].vCompanyName}</td>
</tr>
<tr>
<td colspan="2" align="center" valign="center" height="107px">
<img src="{$tconfig.tsite_images}{$id7[i].vImage}">
</td>
</tr>
</table>
</div>
<div id="selecty" class="{$id7[i].iEmployerId}" style="width:178px;height:32px; margin-left:18px;">
Select
</div>
<div id="selected_state" style="width:198px;height:32px;display:none;background-color:white;margin-left:16px;">
<img src="{$tconfig.tsite_images}tick.png" /> <font color="#cdcdcd"><b>Company selected</b></font>
</div>
</div>
{/section}
and its javascript is like this
<script>
function selecty_hide (eid,compid) {
alert(eid);
alert(compid);
document.getElementById('selecty').style.display="none";
document.getElementById('selected_state').style.display="block";
document.getElementById('eid').value=eid;
}
</script>
Say you have a class(selected_company) for selected company div.
When someone choose any other div then get previous selected div and remove this class then add this class in current selected div.
Something like this:
$(".selected_company").removeClass('selected_company');
$(this).addClass('selected_company');
Then at a time only one company will be selected.
Here is an example demo: http://jsfiddle.net/kRD4S/
Well little modification in javscript can be done as below
<script>
function selecty_hide (eid,compid,element) {
alert(eid);
alert(compid);
document.getElementById('selecty').style.display="none";
document.getElementById('ctable').style.display="none";
document.getElementById('selected_state').style.display="none";
element.style.display="block";
document.getElementById('eid').value=eid;
}
need to pass another parameter during function call(3rd param) as 'this'
onclick="selecty_hide('{$id7[i].iEmployerId}','{$smarty.section.i.index}',this)"
The script above will first display none all the div with id selecty,ctable,selected_state and this will display block the selected div.
Hope this Help you
If you can use jquery it is easy
<div class="mydiv" style="cursor: pointer;">
box 1
</div>
<div class="mydiv" style="cursor: pointer;">
box 2
</div>
<div class="mydiv" style="cursor: pointer;">
box 3
</div>
<script type="text/javascript">
$(".mydiv").click(function() {
if($(this).hasClass("selected") == false) {
$(".mydiv").removeClass("selected");
$(this).addClass("selected");
} else {
$(".mydiv").removeClass("selected");
}
});
</script>
This will remove the class "selected" from all elements with class "mydiv" and then add it to the single element you have clicked.
It also supports unselecting the current element + you can drop your buttons completely it is enough to click on the div!
You should be able to adjust my example to your code.
All you need to do now is define a custom class for the div that will display its content different like only show "company selected" when the div has the class "selected".
Have fun and good luck!
Think of it slightly different. If Company A is selected, and the user now selects Company B:
Unselect ALL elements.
Now select Company B
If you do it like this, there's no hassle in trying to figure out which company you need to unselect.
Something like this:
$(".company").click(function() {
//remember the new item
var clickedItem = $(this);
//unselect everything
$(".company").removeClass("companySelected");
//select the company that was clicked
clickedItem.addClass("companySelected");
});
Look, its simple, you can just solve your problem this way: Adding and removing CSS Classes.
I have made a full JSFiddle here to you know what i'm talking about.
Modified the HTML Company Div to be only one and not two divs:
<div id="selecty" class="selectable_state" onclick=select_unselect('{$id7[i].iEmployerId}','{$smarty.section.i.index}') >
Select
</div>
And modified the js:
function select_unselect(eid,compid){
alert(eid);
alert(compid);
if ($(this).hasClass('selectable_state'))
{
$(this).removeClass('selectable_state');
$(this).addClass('selected_state');
$(this).html('Company Selected');
$('#eid').val(eid);
}else{
$(this).removeClass('selected_state');
$(this).addClass('selectable_state');
$(this).html('Select');
$('#eid').val('');
}
}
Ps: please note that in the fiddle i removed some parameters of the function to make it work because i do not have all the data to make it work properly.
I want to fire a style if these the content of .firstA and .secondA contain the same text.
I thought this code would do it, alas, it didn't work.
What am I doing wrong?
HTML:
<tr>
<td><a id="a11" href="#" class="firstA">text</a><a id="c10" href="#" class="secondA">text</a></td>
</tr>
JS:
$('.firstA').each(function(){
if ($(this).text() == $(this).next('.secondA').text()){
$(this).addClass('highlight');
}
});
PS: the .secondA is hidden witha $(.secondA).hide(); function, could this be the problem?