I have a table with <theader>. Underneath each header, my PHP generates a <tbody> My goal is to toggle the <tbody> underneath each of these headers once the user clicks on the Table Header. Each <theader> has a unique id and so does the <tbody> that corresponds to it. So for example the header is #GenEdCategory1 and clicking on it will toggle #GenEdCourses1. and so on for #GenEdCategory2 and #GenEdCourses2 ...
I used these selectors for jQuery to do the toggling.
When I hardcode it, it works fine! Clicking on #GenEdCategory1 will toggle the #GenEdCourses1. But I want to make it dynamic based on the number of headers that have been fetched, I can't toggly anything!
I do this using a while loop but when I code it, it stops working. Any insight would be greatly appreciated! Cheers :)
var numberCategory = $('[id^=GenEdCategory]').length; //calculates number of GenEdCategories
var idCntr = 1; //GenEdCategory ctr
var cool = "#GenEdCategory" + idCntr; //click on this to toggle
var cool2 = "#GenEdCourses" + idCntr; //I want to toggle this
while (idCntr < numberCategory) {
$(document).on("click", cool, function(){
$(cool2).toggle();
});
idCntr = idCntr + 1;
cool = "#GenEdCategory" + idCntr;
cool2 = "#GenEdCourses" + idCntr;
};
};
};
Here's the HTML Snippet of the table I'm working with:
You can use jQuery's DOM traversal function to do it in a single function, not a loop, and there's no need to give them IDs.
$("thead").click(function() {
$(this).next("tbody").toggle();
});
BTW, <theader> should be <thead>.
Related
I'm Looping through rows, generating links with each their identical value, in this case.
Shown here:
#foreach (var article in Model.Articles)
{
<tr class="etc">
#if (Model.Order.Status == Model.Orders.Status.Blocked)
{
<td id="buttonDeleteOrderLine" description="#article.Description" name="#Model.Order.FullName" value="#article.LineId" >Delete Line</td>
}
Value="value" is unique in this case!
My JS:
$('#buttonDeleteOrderLine').on('click', function () {
var DOL = $(this);
var orderDescription = DOL.attr("description");
var customerName = DOL.attr("name");
var lineID = DOL.attr("value");
I'm getting links for each row, and they're also clickable. However, only the first one actually works (shows a modal, not included in JS Code)
So I need a way, to search the class 'buttonDeleteOrderLine' (because the ID changes), and yet get the info from the clicked link.
You can only have one element per ID, where you can have any number of elements per Class.
It was quite simple actually,
Set
id="buttonDeleteOrderLine" to class="buttonDeleteOrderLine"
and I've changed:
$('#buttonDeleteOrderLine').on('click', function () {
to:
$('.buttonDeleteOrderLine').on('click', function () {
It now works and gets the correct information of each link, including the sub-information.
So I have problem which I can't solve for hours now..
When I press on button "Pridėti prekę" then one row is dynamically added to the table and when I write numbers in "Kiekis" and "Kaina" columns nothing happens in "Suma" column (It only happens to dynamically added row).
Piece of jQuery:
$(document).on('keyup', '#quantity, #price', function() {
$('#total').val(($('#quantity').val() * $('#price').val()).toFixed(2));
});
Please look at JSFiddle how is "working" my code:
https://jsfiddle.net/w5qz5exe/7/
Thanks for help in advance!
P.S I tried to change from div ID total, to div class total, then it works, but it applies to all rows instead to relevant.
You were referencing everything with id's.
$(document).on('keyup', '.quantity, .price', function() {
var row = $(this).closest('tr');
var rowPrice = $(row).find('.price').val();
var rowQuantity = $(row).find('.quantity').val();
$(row).find('.total').val( (rowPrice * rowQuantity).toFixed(2) )
});
https://jsfiddle.net/w5qz5exe/12/
Your problem is the fact that the inputs are using id's instead of something else. When looking for the item in question the search stops on the first Id found.
This updated fiddle https://jsfiddle.net/w5qz5exe/11/ shows how it could be done with classes.
$(document).on('keyup', '.quantity, .price', function(e) {
var $parent = $(e.target).parents('tr'),
$total = $parent.find('.total'),
$quantity = $parent.find('.quantity'),
$price = $parent.find('.price');
$total.val(($quantity.val() * $price.val()).toFixed(2));
});
In addition to the above remove all Id's from the inputs and change them to classes instead.
I dont't get why this code isn't working. Table row should be removed, but it's not. Confirm box is showing ok.
Maybe I have something wrong with row id or var elementId - I'm not sure.
<table> // some table code missing in this example because it's not necessary
<tr id="orderEmpty" style="display: none;"><td><i class="text-muted">No items.</i></td></tr>
<tr id="00001"><td>Delete</td></tr>
</table>
<script>
function deleteRow($rowToDel) {
var result = confirm("Are you sure? Delete row from order?");
if (result) {
var elementId = $rowToDel;
var rowCount = $('#orderTable tbody tr').length;
if (rowCount < 3) {
$('#' + $rowToDel + '').closest('tr').remove();
$("#orderEmpty").fadeIn();
} else {
$('#' + $rowToDel + '').closest('tr').remove();
}
}
}
</script>
Your example code as given already works for me; please see this jsFiddle: https://jsfiddle.net/v30fv89t/
I suspect that the actual markup you're working with is longer, but in the example you gave, rowCount will always be 0 because there is no #orderTable or tbody, and so that branch will always execute when deleteRow() is called.
If you can, please post a more extensive version of your markup - at least extensive enough so that your code fully tests against the markup you're working with.
If you remove .closest('tr') it should work. You already select the tr you're trying to delete with the jQuery constructor.
Also + '' is unnecessary as int is converted to a sting when it's added to one (in this case '#').
I want to fade out all cells in a column of my HTML-table when I click on a button in the Header of this col. For that I run the following JavaScript:
...
myDOMElement.find(".headerIcon").bind("click", function(event){
var colo = $(event.target).parent().attr("id"); // colNo is stored as Icons id
myDOMElement.find(".myTable").find("tr").find("#"+colo) // each tr has an id according to its colNumber
.each(function(index) {
$(this).fadeTo(0,0.2);
}
});
});
This works as desired but is relative slow even on tables with only 200 rows.
Is there a better (faster) way to do this?
"#"+colo is (must be!) a unique id. No reason for the cascaded finds - and if not, you are facing other problems:
...
myDOMElement.find(".headerIcon").bind("click", function(event){
var colo = $(event.target).parent().attr("id"); // colNo is stored as Icons id
$("#"+colo).fadeTo(0,0.2);
});
});
[edit]
As per the comments, in order to fade out Columns, the id must better hold information about row and column and will thus be unique per cell:
<tr>
<td id="1.1">scheme is <col>.<row></td>
<td id="2.1">
...
<tr>
<td id="1.2">
<td id="2.2">
...
...
myDOMElement.find(".headerIcon").bind("click", function(event){
var roco= $(event.target).parent().attr("id");
var col = roco.split('.')[0];
var row = roco.split('.')[1];
// now search all TD#s which have the clicked col (1.~) as a beginning of their ID
myDOMElement.find("td[id^='" + col + ".']").each(function(index) {
this.fadeTo(0,0.2);
});
});
see also jQuery Attribute selector
Since I dont need the animation provided by .fadeOut() I fond a faster way to do this:
myDOMElement.find(".myTable").find("tr").find("#"+colo).css({opacity:0.2});
I have a jqGrid with a navBar that has search: true and multipleSearch: true. I would like to add a button to my UI that automatically adds an additional rule to the search.
I've tried manipulating the postData for the filter directly, but values added this way don't show up in the search UI.
I've also tried accessing the search box directly using jQuery, like this:
$('#fbox_list').searchFilter().add();
$('#fbox_list .sf .data input').each(function(index) {
alert($(this).val());
});
But, in addition to feeling hackish, it only works if the user has already clicked on the search button (the fbox_list div is not constructed on load).
Has anyone else dealt with an issue like this?
For the sake of posterity, here is the hack I'm currently using. The grid has an ID of list and the pager has an ID of pager:
jQuery(document).ready(function() {
//Initialize grid.
//Initialize the navigation bar (#pager)
//Hack to force creation of the search grid.
//The filter's ID is of the form #fbox_<gridId>
jQuery('#pager .ui-icon-search').click();
jQuery('#fbox_list').searchFilter().close();
//Example button events for adding/clearing the filter.
jQuery("#btnAddFilter").click(function() {
//Adds a filter for the first column being equal to 'filterValue'.
var postFilters = jQuery("#list").jqGrid('getGridParam', 'postData').filters;
if (postFilters) {
$('#fbox_list').searchFilter().add();
}
var colModel = jQuery("#list").jqGrid('getGridParam', 'colModel');
//The index into the colModel array for the column we wish to filter.
var colNum = 0;
var col = colModel[colNum];
$('#fbox_list .sf .fields select').last().val(col.index).change();
$('#fbox_list .sf .data input').last().val('filterValue');
$('#fbox_list .sf .ops select.field' + colNum).last().val('eq').change();
$('#fbox_list').searchFilter().search();
});
jQuery("#btnClearFilter").click(function() {
$('#fbox_list').searchFilter().reset();
});
});
If you mean the filter toolbar, you can do this: (status is the col name -- so, replace "#gs_status" w/ "#gs_" + your_col_name
jQuery("#distributor_grid").jqGrid('showCol',['status']);
jQuery(".ui-search-toolbar #gs_status")
.val('ALL')
;
$('#distributor_grid').RefreshData(); // triggers toolbar
to clear inputs, selects and reset grid
$("td#refresh_navGrid").click();