jquery toggle/show hide - javascript

I have following markup which is generated dynamically using C# in my asp.net MVC2 application. There could be more rows depending on data in database. I have shown two rows. one is view row other is edit row. by default I want 'view' row(s) visible and rows with id 'edit' will be invisible. I want to use jQuery so that:
on click of toggle link, I want view row invisible and edit row visible
on click of update/cancel images, I want edit row invisible and view rows visible. edit button will cause postback
There can be more than one rows with same id (view or edit), do i need to use class instead of id?
<table>
<tr id="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<tr id="edit" style="display:none">
<img id="update" alt="Update" src="/static/images/update.png">
<img id="cancel" alt="cancel" src="/static/images/cancel.png">
</tr>
<tr id="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<tr id="edit" style="display:none">
<img id="update" alt="Update" src="/static/images/update.png">
<img id="cancel" alt="cancel" src="/static/images/cancel.png">
</tr>
</table>
[EDIT]
I used this but it is not working:
<script type="text/javascript">
$(function () {
$(".icon-button").click(function () {
alert('I am here');
$('.view,.edit').toggle();
return false;
});
$(".icon-button-cancel").click(function(){
alert('I am there');
$('.view,.edit').toggle();
return false;
}
});
Please suggest solution using jQuery/JavaScript or any any other ASP.NET alternative

I think you may run into problems having multiple elements with the same ID, and it will certainly confuse you in the future.
My suggestion is to use classes instead. Small difference in your markup but big difference in semantics/intent.
Then, you could write simple jQuery code as the click events for your buttons (this goes in your document.ready):
$("#update").click(function() {
$(".edit").show();
$(".view").hide();
}
and so on.

So, assuming you make the following changes:
Wrap your rows in <td> cells to conform to a table format.
Use class names instead of IDs (as I mentioned in a comment, an ID must be unique across the entire page).
fix your anchor tags to include some form of text.
(Some of these may just be becuase you posted a demo snippet, I'm not sure). Then, I made a couple of adjustments like made the cancel a link instead of an image, but an image will work.
<table>
<tr class="view">
<td>
<a class="toggle" class="icon-button" href="#">Edit</a>
</td>
</tr>
<tr class="edit" style="display:none">
<td>
<img class="update" alt="Update" src="/static/images/update.png">
<a class="cancel" href="#">Cancel</a>
</td>
</tr>
<tr class="view">
<td>
<a class="toggle" class="icon-button" href="#">Edit</a>
</td>
</tr>
<tr class="edit" style="display:none">
<td>
<img class="update" alt="Update" src="/static/images/update.png">
<a class="cancel" href="#">Cancel</a>
</td>
</tr>
</table>
Then the following will work (with jQuery):
$('.toggle').click(function(){
var $tr = $(this).closest('tr');
$tr.add($tr.next('.edit')).toggle();
});
$('.cancel').click(function(){
var $tr = $(this).closest('tr');
$tr.add($tr.prev('.view')).toggle();
});
DEMO

why dont you use jquery .toggle itself
http://api.jquery.com/toggle/

Yes, your rows will need classes.
Then you can toggle your rows like this:
$('.view,.edit').toggle();
<table>
<tr id="view" class="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<tr id="edit" class="edit" style="display:none">
<img id="update" alt="Update" src="/static/images/update.png">
<img id="cancel" alt="cancel" src="/static/images/cancel.png">
</tr>
<tr id="view" class="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<tr id="edit" class="edit" style="display:none">
<img id="update" alt="Update" src="/static/images/update.png">
<img id="cancel" alt="cancel" src="/static/images/cancel.png">
</tr>
</table>

You had a javascript issue.
Try This:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<td>
<a class="toggle" href="#">Toggle</a>
</td>
</tr>
<tr style="display:none">
<td>
<img class="update" alt="Update" src="/static/images/update.png" />
<img class="cancel" alt="cancel" src="/static/images/cancel.png" />
</td>
</tr>
<tr>
<td>
<a class="toggle" href="#">Toggle</a>
</td>
</tr>
<tr style="display:none">
<td>
<img class="update" alt="Update" src="/static/images/update.png" />
<img class="cancel" alt="cancel" src="/static/images/cancel.png" />
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$(".toggle").click(function(){
$(this).parents("tr:first").next().toggle();
});
$(".cancel").click(function(){
$(this).parents("tr:first").prev().toggle();
});
});
</script>

Related

JS or Jquery: how to add an "option" to a checkbox

The checkbox created in MS Sharepoint form has this html structure;
<div class="fd_field " fd_name="purchase_order" style="">
<div class="fd_title" style="width: 150px;">purchase_order</div>
<div class="ms-formbody fd_control" fd_type="MultiChoice">
<span dir="none">
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td><span class="ms-RadioText" title="Carica dati">
<input id="ctl00_ctl40_g_2bbe8d3f_1b61_4103_9ca6_2e943eb28860_purchase_orderField_ctl00_ctl00" type="checkbox" name="ctl00$ctl40$g_2bbe8d3f_1b61_4103_9ca6_2e943eb28860$purchase_orderField$ctl00$ctl00">
<label for="ctl00_ctl40_g_2bbe8d3f_1b61_4103_9ca6_2e943eb28860_purchase_orderField_ctl00_ctl00">Carica dati</label></span>
</td>
</tr>
</tbody>
</table>
</span>
</div>
</div>
with ajax i got other data that i want to add as option in that checkbox.
The loop to retrieve data is not a problem but, how can i append those data in a new row of the checkbox?
In the past i was able to edit dropdown field but it not works with checkbox.
I was thinking to the a solution like this:
var f = '<tr><td><input type="checkbox" name="xxx" id="ss"><label for="ss">Other</label></td></tr>';
$( ".ms-RadioText" ).parent().append(f);
Thanks
You mean this?
PS: I would not expect a table in a span !
var f = '<tr><td><span class="ms-RadioText" title="XXX"><input id="ss" type="checkbox" name="xx"><label for="ss">Other</label></span></td>';
$(".ms-RadioText").closest("tbody").append(f);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fd_field " fd_name="purchase_order" style="">
<div class="fd_title" style="width: 150px;">purchase_order</div>
<div class="ms-formbody fd_control" fd_type="MultiChoice">
<span dir="none">
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td><span class="ms-RadioText" title="Carica dati"><input id="xx" type="checkbox" name="xx"><label for="xx">Carica dati</label></span></td>
</tr>
</tbody>
</table>
</span>
</div>
</div>

Hide entire <tr> if child's child

I have a table like this
$('td:contains("label label-primary")').parent().hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-primary">
HIDE
</span>
</a>
</td>
</tr>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-danger">
SHOW
</span>
</a>
</td>
</tr>
</tbody>
I just want to be able to hide the table rows in which the span deep inside the tr has a specific class. In this case, label label-primary.
However, this does not seem to work. It hides nothing.
I am using this on tampermonkey to edit a webpage whose code I do not have edition access.
What am I doing wrong?
:contains() selects all elements that contain the specified text. You want to use find() (https://api.jquery.com/find/) or :has() https://api.jquery.com/has-selector/ to select based on a selector. You also have to write ".label.label-primary" to indicate they are classes.
$('td:has(.label.label-primary)').parent().hide();
OR
$('td').find('.label.label-primary').parent().hide();
Try this:
$('span').hasClass('label label-primary').parents('tr:first').hide();
Use jQuery :has() pseudo-class selector to check element contains at least one element that matches the specified selector. Or use has() method to filter out elements.
$('td:has(".label.label-primary")').parent().hide();
// or
$('tr:has("td .label.label-primary")').hide();
// or using has method
$('tr').has("td .label.label-primary").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-primary">
ble> HIDE
</span>
</a>
</td>
</tr>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-danger">
SHOW
</span>
</a>
</td>
</tr>
</tbody>
</table>
Here a one liner solution, hope it helps:
$("tr > td > a").find("span[class*='label label-primary']").closest("tr").hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-primary">
HIDE
</span>
</a>
</td>
</tr>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-danger">
SHOW
</span>
</a>
</td>
</tr>
</table>
</body>
May I suggest you this jquery script?
$('td').find(".label.label-primary").closest('tr').hide();
Try this..
$(".table td").filter(function() {
return $('span', this).hasClass('label.label-primary');
}).hide();
Here you go with a solution
$('table tr').each(function(){
$(this).find('span[class="label label-primary"]').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-primary">
HIDE
</span>
</a>
</td>
</tr>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-danger">
SHOW
</span>
</a>
</td>
</tr>
</table>
</body>
Just loop through all the tr & then find span with specific class.
Hope this will help you.

Get tr element with document.querySelector

I trying to get a tr element using the document.querySelector sentence, but I get :
TypeError: tempNode.querySelector(...) is null
My selector in Javascript is: document.querySelector("#row-model")
This is working with other element (with a div to be exact) but with it, I tried others selectors (using the datatype, the tr, etc, but always I get the same error)...Then in the browser console I checked the existence of the element, the HTML of the element is as follows:
<table>
<tbody>
<tr class="" id="row-model" data-id="myid" data-type="rowtemplate">
<td class="category">
</td>
<td class="title showTipTip">
<a data-cats="" href="#profile" id="title" aria-controls="profile" role="tab" data-toggle="tab" title="" data-id="" class="spotlink" address="true"></a>
</td>
<td class="comments">
<a class="spotlink" href="#comments" title="" id="commentValue"> commentValue
</a>
</td>
<td class="genre">
catdesc
</td>
<td class="poster">
poster
</td>
<td class="date" id="since"></td>
<td class="filesize" id="filesize">
</td>
<td class="nzb">
NZB
</td>
<td class="multinzb">
<input onclick="multinzb()" name="messageid[]" value="" type="checkbox">
</td>
</tr>
</tbody>
</table>
EDITED:
The JS code inside the function is:
$('#catalog').each(function(){
var tempNode = document.querySelector("#row-model").cloneNode(true); //I clone the element and then append it to another table
tempNode.querySelector("a #category").textContent = "test";
$('#spotsTable tr:last').after(tempNode);
});
Also, I have the table inside a div with hidden class (bootstrap), maybe it can affect it?

How to use jQuery's "closest" function with multiple toggles of same classes / id's?

Have tried a few different methods with no success, so am reaching out on here in hope someone can assist, I have scaled back the code below to it's most basic (and unfunctional form), basically what I need is I will have heaps of table rows the same way as shown below, but I want each checkbox action to trigger the toggle of the closest set of <span> items.
Code is below:
$(document).ready(function() {
$("input#change").change(function() {
$("span.disabled").toggle();
$("span.enabled").toggle();
$("span.pending").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="page.php" method="post">
<table>
<!-- Row 1 -->
<tr>
<td>
<span class="pending" style="display:none;">PENDING</span>
<span class="disabled">DISABLED</span>
</td>
<td>
<input type="checkbox" name="statusArray[]" id="change" value="1" />
</td>
</tr>
<!-- Row 2 -->
<tr>
<td>
<span class="pending" style="display:none;">PENDING</span>
<span class="enabled">ENABLED</span>
</td>
<td>
<input type="checkbox" name="statusArray[]" id="change" value="2" />
</td>
</tr>
</table>
</form>
The top code works if there is one row only, but I need it to handle multiple rows.
The checkbox will always be named statusArray[] and tagged as #change
There are 3 spans, though each row will only have two at any one time, these will be span.enabled, span.disabled and span.pending
Is there a way using jquery to activate the toggle only on the current table row? I need to figure out something that would achieve this.
Any assistance is much appreciated.
Try this- made #change to class as multiple id are not possible.
Using closest('tr') to solve the issue- snippet below. Let me know your feedback on this. Thanks!
$(document).ready(function() {
$("input.change").change(function() {
$this = $(this).closest('tr');
$this.find("span.disabled").toggle();
$this.find("span.enabled").toggle();
$this.find("span.pending").toggle();
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form action="page.php" method="post">
<table>
<!-- Row 1 -->
<tr>
<td>
<span class="pending" style="display:none;">PENDING</span>
<span class="disabled">DISABLED</span>
</td>
<td>
<input type="checkbox" name="statusArray[]" class="change" value="1" />
</td>
</tr>
<!-- Row 2 -->
<tr>
<td>
<span class="pending" style="display:none;">PENDING</span>
<span class="enabled">ENABLED</span>
</td>
<td>
<input type="checkbox" name="statusArray[]" class="change" value="2" />
</td>
</tr>
</table>
</form>
</body>
</html>
You can not use duplicate id so use a class instead, or use [name^=statusArray]
If you are dynamically adding rows, then use a delegate.
You can use closest to find the row, then use find to toggle.
$(document).ready(function() {
$('table').on('change', '[name^=statusArray]', function() {
var row = $(this).closest('tr');
row.find("span.disabled,span.enabled,span.pending").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<!-- Row 1 -->
<tr>
<td>
<span class="pending" style="display:none;">PENDING</span>
<span class="disabled">DISABLED</span>
</td>
<td>
<input type="checkbox" name="statusArray[]" class="change" value="1" />
</td>
</tr>
<!-- Row 2 -->
<tr>
<td>
<span class="pending" style="display:none;">PENDING</span>
<span class="enabled">ENABLED</span>
</td>
<td>
<input type="checkbox" name="statusArray[]" class="change" value="2" />
</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input.change").change(function(e){
e.preventDefault();
$(this).parent("td").parent("tr").children("td").children("span.disabled").toggle();
$(this).parent("td").parent("tr").children("td").children("span.enabled").toggle();
$(this).parent("td").parent("tr").children("td").children("span.pending").toggle();
});
});
});
</script>
</head>
<body>
<form action="page.php" method="post">
<table>
<!-- Row 1 -->
<tr>
<td>
<span class="pending" style="display:none;">PENDING</span>
<span class="disabled">DISABLED</span>
</td>
<td>
<input type="checkbox" name="statusArray[]" class="change" value="1" />
</td>
</tr>
<!-- Row 2 -->
<tr>
<td>
<span class="pending" style="display:none;">PENDING</span>
<span class="enabled">ENABLED</span>
</td>
<td>
<input type="checkbox" name="statusArray[]" class="change" value="2" />
</td>
</tr>
</table>
</form>
</body>
</html>
Just change ID="change" to class="change"
also $("input#change") to $("input.change")
and add $(this).parent("td").parent("tr").children("td").children to toggle to find the closest item from the class="change"

How to insert a scroll bar to a dev class

I want to add a scroll bar to the drop-down list of my code.It is actually a cart which shows the items in the cart when I click on the cart. I want to put a scroll bar to it to go down and see the items on it as the drop down box has a fixed size.
The code I used for the cart is:
<ul id="cart-dropdown" class="box-dropdown parent-arrow">
<li>
<div class="box-wrapper parent-border">
<p>Recently added item(s)</p>
<table class="cart-table">
<tr>
<td><img src="img/products/sample1.jpg" alt="product"></td>
<td>
<h6>Lorem ipsum dolor</h6>
<p>Product code PSBJ3</p>
</td>
<td>
<span class="quantity"><span class="light">1 x</span> $79.00</span>
Remove
</td>
</tr>
<tr>
<td><img src="img/products/sample1.jpg" alt="product"></td>
<td>
<h6>Lorem ipsum dolor</h6>
<p>Product code PSBJ3</p>
</td>
<td>
<span class="quantity"><span class="light">1 x</span> $79.00</span>
Remove
</td>
</tr>
<tr>
<td><img src="img/products/sample1.jpg" alt="product"></td>
<td>
<h6>Lorem ipsum dolor</h6>
<p>Product code PSBJ3</p>
</td>
<td>
<span class="quantity"><span class="light">1 x</span> $79.00</span>
Remove
</td>
</tr>
</table>
<br class="clearfix">
</div>
<div class="footer">
<table class="checkout-table pull-right">
<tr>
<td class="align-right">Tax:</td>
<td>$0.00</td>
</tr>
<tr>
<td class="align-right">Discount:</td>
<td>$37.00</td>
</tr>
<tr>
<td class="align-right"><strong>Total:</strong></td>
<td><strong class="parent-color">$999.00</strong></td>
</tr>
</table>
</div>
<div class="box-wrapper no-border">
<a class="button pull-right parent-background" href="#">Checkout</a>
<a class="button pull-right" href="order_info.html">View Cart</a>
</div>
</li>
</ul>
Have you tried adding overflow:scroll to your element's CSS?
You wants something like this ?
See this fiddle
#cart-dropdown { height: 300px; overflow-y: scroll;}

Categories