Develop Reference

Jquery firing function once per element

So, I have a small table with some content, which with the click of a button can be expanded to show a container div with extra content.
I'm trying to tie a function to this action, but when I do, the function seems to get fired once per number of table row.
JSFiddle:
https://jsfiddle.net/jtby9c12/
Table:
<button id="toggle-descriptions-button">+</button>
<table>
<tbody>
<tr>
<th class="table-header-1">Download</th>
<th class="table-header-2">Size</th>
<th class="table-header-3">Notes</th>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: block;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
</tbody>
</table>
*The actual table contains 22 rows and descriptions, this just shows the structure sample.
Jquery:
var descriptions = $(".div-container")
var descButton = $("#toggle-descriptions-button")
descButton.click(function(){
console.log("Button Clicked!")
descriptions.toggle(400, function() {
console.log("I'm a fucntion!")
});
});
As you can see, it calls the function 22 times, and I'm trying to get it to call just once.
I'm looking to get a single call back for the function, it's one state change for all descriptions, I only need one return.

To achieve this you can use the promise() returned from the toggle() calls. Attach a done() event handler to it, which will fire after all the promises have been resolved:
var $descriptions = $(".div-container")
var $descButton = $("#toggle-descriptions-button")
$descButton.click(function() {
console.log("Button Clicked!")
$descriptions.toggle(400).promise().done(function() {
console.log("I'm a function!")
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-descriptions-button">+</button>
<table>
<tbody>
<tr>
<th class="table-header-1">Download</th>
<th class="table-header-2">Size</th>
<th class="table-header-3">Notes</th>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
</tbody>
</table>

Add/Remove Checked box row (Javascript/Jquery)

I'm trying to add and remove the text of the cell 2 cells of that row when they are checked.
Let's say they have 4 columns on the table and want to show/hide some row in a different section of the page.
My goal is to add/display and delete/hide the selected row value based on the checkbox value (0|1). And for each row values, it should have a button/link (X) to delete that and uncheck the checkbox in the table.
<h1 style="text-align:center">Selector/Removal</h1>
<h4 class="selected_values"></h4>
<button onclick="clearSelection();">Clear</button>
<table id="" class="table table-bordered table-responsive table-striped">
<tr class="" style="background-color: #237ec2; color: white;">
<td class="text-center"><span>A</span></td>
<td class="text-center"><span>B</span></td>
<td class="text-center"><span>C</span></td>
<td class="text-center"><span>D</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="usercheck"><span>A1</span></td>
<td>
<h5>B1</td>
<td>
<h5>C1</h5></td>
<td>
<h5>D1</h5></td>
</tr>
<tr>
<td>
<input type="checkbox" class="usercheck"><span>A2</span></td>
<td>
<h5><span class="second_col">B2</span></h5></td>
<td>
<h5>C2</h5></td>
<td>
<h5>D2</h5></td>
</tr>
<tr style="">
<td>
<input type="checkbox" class="usercheck">
<span>A3</span></td>
<td>
<h5><span class="second_col">B3</span></h5></td>
<td>
<h5>C3</h5></td>
<td>
<h5>D3</h5></td>
</tr>
</table>
JavaScript that I tried is the below:
$(document).ready(function() {
$('.usercheck').change(function() {
$('.selected_values').empty();
$(".usercheck:checked").each(function(index) {
var chain = "";
chain = $(this).html(".usercheck").val();
$('.selected_values').append(chain + ' ' + '<span id="removeVal" style="color:red;">X</span>');
});
});
});
function clearSelection(){
$('.selected_values').empty();
$('.usercheck').attr('checked','false');
}
Here is the link to the js fiddle which I tried to work.
I was able to display the content but by giving value to just one column which is not the right way to do I suppose.
https://jsfiddle.net/rahilAhmed/y4fzj66o/

Without re-writing your whole HTML here is how I made it work.
What I did was I added an ID to each span that gets created. That ID is later used to iterate over all checkboxes and find which one needs to be unchecked then un-check it.
$(document).ready(function() {
$('.usercheck').change(function() {
$('.selected_values').empty();
$(".usercheck:checked").each(function(index) {
var chain = "";
chain = $(this).html(".usercheck").val();
$('.selected_values').append(chain + ' ' + '<span id='+ chain + ' class="removeVal" style="color:red;">X</span>');
});
$(".removeVal").click(checkRemove);
});
});
function checkRemove(e) {
var removeId = e.target.id;
$(".usercheck").each(function(index,checkbox) {
if (checkbox.value == removeId) {
checkbox.checked = false;
}
});
e.target.parentNode.previousSibling.remove();
e.target.remove();
}
function clearSelection(){
$('.selected_values').empty();
$('.usercheck').prop('checked',false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 style="text-align:center">Selector/Removal</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-3">
Selected Users
<div class="" >
<h4 class="selected_values"></h4>
</div>
</div>
<div class="col-xs-1"><button onclick="clearSelection();">Clear</button></div>
<div class="col-xs-8">
<table id="" class="table table-bordered table-responsive table-striped">
<tr class="" style="background-color: #237ec2; color: white;">
<td class="text-center" ><span >A</span></td>
<td class="text-center" ><span >B</span></td>
<td class="text-center" ><span >C</span></td>
<td class="text-center" ><span >D</span></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A1[B1]"><span class="first_col" value="A1" >A1</span></td>
<td><h5><span class="second_col">B2</span></h5></td>
<td><h5>C1</h5></td>
<td><h5>D1</h5></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A2[B2]"><span class="first_col" value="a2" >A2</span></td>
<td><h5><span class="second_col">B2</span></h5></td>
<td><h5>C2</h5></td>
<td><h5>D2</h5></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A3[B3]">
<span class="first_col" value="a3" >A3</span></td>
<td><h5><span class="second_col">B3</span></h5></td>
<td><h5>C3</h5></td>
<td><h5>D3</h5></td>
</tr>
</table>
</div>
</div>
</div>

You can do this : JsFiddle
For unchecked Checkbox, you must do this :
.prop('checked', false);

Cannot use mouseover on specific element

I'm trying to display an alert when the use put the mouse over a tr of .scrollable class, this is the html:
<table class="results" id="resource-container" style="height: 769px;">
<tbody><tr>
<td>
<div class="scrollable">
<tr><td> </td>
<td style="padding-left: 10px"><div></tr>
</tbody></table>
and this is the code:
$(document).ready(function() {
$('.scrollable > tr').mouseover(function()
{
alert("hello");
});
});
A complete example is available on jsfiddle.
What am I doing wrong?

A tr element works only if it is in a table wrapper - also note that you would need to drop the > in the selector and use this - .scrollable > tbody > tr or .scrollable tr.
See demo below:
$(document).ready(function() {
$('.scrollable tr').mouseover(function() {
console.log("hello");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="scrollable">
<tr>
<td style="padding-left: 10px">
<div>
<strong>foo</strong>
<br>test
</div>
</td>
</tr>
</table>

Reorder table with jQuery

How can I reorder table rows?
<table class="table table-bordered" style="text-align: center; width: 95%;">
<tr>
<td style="width: 2%;"></td>
<td>Prekės pavadinimas</td>
<td style="width: 15%;">Kiekis</td>
<td style="width: 15%;">Kaina</td>
<td style="width: 15%;">Suma</td>
<td style="width: 2%;"></td>
</tr>
<tr>
<td style="vertical-align: middle;">
<span class="glyphicon glyphicon-menu-up"></span><br>
<span class="glyphicon glyphicon-menu-down"></span>
</td>
<td style="vertical-align: middle;">
<div class="form-group">
<label for="product"></label>
<input type="text" class="form-control" id="product" name="product" placeholder="Prekė">
</div>
</td>
<td style="vertical-align: middle;">
<div class="form-group">
<label for="quantity"></label>
<input type="text" class="form-control" id="quantity" name="quantity" placeholder="Kiekis">
</div>
</td>
<td style="vertical-align: middle;">
<div class="form-group">
<label for="price"></label>
<input type="text" class="form-control" id="price" name="price" placeholder="Kaina">
</div>
</td>
<td style="vertical-align: middle;">
<div class="form-group">
<label for="total"></label>
<input type="text" class="form-control" id="total" name="total" placeholder="Suma" disabled>
</div>
</td>
<td style="vertical-align: middle;"><span class="glyphicon glyphicon-remove" style="color: red;"></span></td>
</tr>
</table>
$('tr td span:nth-of-type(1)').on('click', function() {
moveup = $(this).parent();
moveup.prev().before(moveup);
});
$('tr td span:nth-of-type(2)').on('click', function() {
movedown = $(this).parent();
movedown.next().after(movedown);
});
And here is how my code now working with jQuery:
http://jsfiddle.net/zJ8hd/21/
Thanks for help in advance! :)

Your logic for traversal and amending the DOM isn't quite right. You need to get the parent tr element and then insert it before/after the prev/next tr, something like this:
$('tr td span:nth-of-type(1)').on('click', function() {
var $row = $(this).closest('tr')
if ($row.index() == 1)
return;
$row.insertBefore($row.prev());
});
$('tr td span:nth-of-type(2)').on('click', function() {
var $row = $(this).closest('tr')
$row.insertAfter($row.next());
});
Working example
Note I added foo and bar as default field values in the fiddle only to make the movement more obvious.

moveup = $(this).parent();
Here, this refers to the span, so its parent is a td not the row. If you want to move the whole row, you should give a look at .closest()(1) and then use .prev() or .next().
Your are close to the solution, I'll let you work a little ;)
1 -> https://api.jquery.com/closest/

Another JQuery Component within JQuery UI Tabs with Ajax Page Calls

I am currently usng JQuery U Tabs with Ajax Page Calls. Within the Pages I have a custom scroller which is working correctly. I also have an ajax search table, which is working when the page is being loaded on its own in the browser but not when it's called within the JQuery UI tabs.
The following is the code for the JQuery UI Tabs.
Javascript Call
<script>
$(function() {
// getter
var heightStyle = $( ".selector" ).tabs( "option", "heightStyle" );
// setter
$( ".selector" ).tabs( "option", "heightStyle", "fill" );
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
});
}
});
});
</script>
HTML:
<div id="tabs">
<ul>
<li>View</li>
<li>Add</li>
<li>Modify</li>
</ul>
<div id="tabs-1">
</div>
</div>
The following is the code within page2.html:
<div class="tables">
<div id="content_3" class="content">
<div class="search">
<div class="searchtitle">Search</div>
<label for="search"><input type="text" id="search"/></label>
</div>
<table id="tblData" class="target">
<tbody>
<tr>
<th width="110px">Course</th>
<th width="92px">Group</th>
<th width="204px">Period</th>
<th width="81px">Room</th>
<th width="117px">Actions</th>
</tr>
<tr>
<td class="odd">Unit 1</td>
<td class="odd">Group 2</td>
<td class="odd">00-00-00 - 00-00-00 </td>
<td class="odd">Room 1</td>
<td class="odd"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
</tr>
<tr>
<td class="even">Unit#</td>
<td class="even">###</td>
<td class="even">00-00-00 - 00-00-00 </td>
<td class="even">Room 2</td>
<td class="even"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
</tr>
<tr>
<td class="odd">Unit#</td>
<td class="odd">###</td>
<td class="odd">00-00-00 - 00-00-00 </td>
<td class="odd">###</td>
<td class="odd"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#search').keyup(function()
{
searchTable($(this).val());
});
});
function searchTable(inputVal)
{
var table = $('#tblData');
table.find('tr').each(function(index, row)
{
var allCells = $(row).find('td');
if(allCells.length > 0)
{
var found = false;
allCells.each(function(index, td)
{
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text()))
{
found = true;
return false;
}
});
if(found == true)$(row).show();else $(row).hide();
}
});
}
</script>
I am suspecting that it's the $(document).ready(function() from within the Javascript in page2.html which is not firing.
Any help on solving this issue?

I didn't have any problems loading the search functionality as I created a test out of your code. However, since you aren't showing the complete html for the starting page your problem could be that you haven't loaded jQuery before trying to get any other pages. Among this there were a few errors like calling the tab() function 3 times (and on non existent elements with the selector class). when you only needed one with all options set. I also changed heightStyle to content. Couldn't create a jsfiddle demo as you have two html pages but here is my code that works fine for me:
Starting page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function()
{
$( "#tabs" ).tabs(
{
heightStyle: "content",
beforeLoad: function( event, ui )
{
ui.jqXHR.error(function()
{
ui.panel.html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo." );
});
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>View</li>
<li>Add</li>
<li>Modify</li>
</ul>
<div id="tabs-1">View Page</div>
</div>
</body>
</html>
page2.html:
<div class="tables">
<div id="content_3" class="content">
<div class="search">
<div class="searchtitle">Search</div>
<label for="search"><input type="text" id="search"/></label>
</div>
<table id="tblData" class="target">
<tbody>
<tr>
<th width="110px">Course</th>
<th width="92px">Group</th>
<th width="204px">Period</th>
<th width="81px">Room</th>
<th width="117px">Actions</th>
</tr>
<tr>
<td class="odd">Unit 1</td>
<td class="odd">Group 2</td>
<td class="odd">00-00-00 - 00-00-00 </td>
<td class="odd">Room 1</td>
<td class="odd">
<img src="../../Images/actions-delete-icon-normal.png"/>
<img src="../../Images/actions-edit-icon-normal.png"/>
</td>
</tr>
<tr>
<td class="even">Unit#</td>
<td class="even">###</td>
<td class="even">00-00-00 - 00-00-00 </td>
<td class="even">Room 2</td>
<td class="even">
<img src="../../Images/actions-delete-icon-normal.png"/>
<img src="../../Images/actions-edit-icon-normal.png"/>
</td>
</tr>
<tr>
<td class="odd">Unit#</td>
<td class="odd">###</td>
<td class="odd">00-00-00 - 00-00-00 </td>
<td class="odd">###</td>
<td class="odd">
<img src="../../Images/actions-delete-icon-normal.png"/>
<img src="../../Images/actions-edit-icon-normal.png"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$('#search').keyup(function()
{
searchTable($(this).val());
});
});
function searchTable(inputVal)
{
var table = $('#tblData');
table.find('tr').each(function(index, row)
{
var allCells = $(row).find('td');
if(allCells.length > 0)
{
var found = false;
allCells.each(function(index, td)
{
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text()))
{
found = true;
return false;
}
});
if(found == true)
$(row).show();
else
$(row).hide();
}
});
}
</script>