I have a foreach loop in ASP.net
<table id="Employee" class="table table-responsive table-bordered">
<thead>
<tr class="unselectable">
<th>
Selecteer folder:
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<a onclick="test(this)">#item.FolderName</a>
</td>
</tr>
}
</tbody>
</table>
now this result in a table with a few folders, now I want to click on a folder, and send it to a function with the text of item.Foldername as parameter.
I.E:
We have 2 folders, FolderA and FolderB, I want it to be able to click on FolderA, then it goes to the javascript function and adds "FolderA" as a parameter.
function test(a) {
alert(a);
}
Something like this.
I don't entirely know how I could give the value of the particular item as a parameter. I've done my research and I came to the conclusion to use (this) on the onclick method, but for some reason it is not working. what exactly am I doing wrong here?
You can try by using textContent or innerHTML
function test(a) {
alert(a.innerHTML);
}
Related
I'm trying to do the following: I have a table populated with data from the DB. Apart from that, I have an input where you can write something and a button that will filter, only showing the lines that have that string. This is working now!
The thing is, the input should only allow you to filter by foo.name/foo.code (two propertys of my entity).
I'm adding the code I have in case anyone can guide me out, I've tried several things but this are my first experiences with JQuery while I have a strict story-delivery time. Thanks everyone!
<tbody>
<c:forEach var="foo" items="${foo}">
<tr id = "fooInformation" class="mtrow">
<th id="fooName" scope="row">${foo.name}</th>
<td id="fooCode" class="left-align-text">${foo.code}</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</c:forEach>
</tbody>
$("#search").click(function () { -> button id
var value = $("#fooRegionSearch").val(); -> value of the input
var rows = $("#fooRegionTable").find("tr"); -> table id
rows.hide();
rows.filter(":contains('" + value + "')").show();
});
To start with, your HTML is invalid - there cannot be elemenets with duplicate IDs in HTML. Use classes instead of IDs.
Then, you need to identify which TRs pass the test. .filter can accept a callback, so pass it a function which, given a TR, selects its fooName and fooCode children which contain the value using the :contains jQuery selector:
$("#search").click(function() {
var value = $("#fooRegionSearch").val();
var rows = $("#fooRegionTable").find("tr");
rows.hide();
rows.filter(
(_, row) => $(row).find('.fooName, .fooCode').filter(`:contains('${value}')`).length
).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="fooRegionTable">
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name1</th>
<td class="fooCode" class="left-align-text">code1</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name2</th>
<td class="fooCode" class="left-align-text">code2</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</table>
<button id="search">click</button><input id="fooRegionSearch" />
I have a scenario to add a class name dynamically to a specific element based on a condition in helper handler. Below is the code I am using
<table class="table table-striped" id="mytab">
<tbody>
{{#each records}}
<tr id="abc"> {{ showMore $this }}
<td>{{formatDate this.StartDateTime }}
</td>
</tr>
{{/each}}
</tbody>
</table>
I want to pass '<tr>' element as a parameter to 'showMore' helper handler.
Added -- Below is my handler code :
Handlebars.registerHelper('showMore', function(ele,options) {
var index = options.data.index;
});
In the above function i need to access html element
I'm not sure that you can access the <tr> from within the Handlebars helper. However, one approach for dynamically adding a class to an element within a Handlebars template is to do this (note that the handler reference is inside the class attribute value of the <tr>).
<table class="table table-striped" id="mytab">
<tbody>
{{#each records}}
<tr id="abc" class="{{showMore}}">
<td>{{formatDate this.StartDateTime }}
</td>
</tr>
{{/each}}
</tbody>
</table>
Then tweak your showMore helper to output whatever class name is applicable for the current record. If sometimes no class name is needed, the resulting empty class="" shouldn't hurt anything.
Note that you don't need to pass this to the helper, because helpers automatically receive the current context as the this context of the function.
There is no need to specify a target in a show/hide link as long as it is consistently positioned in a structure where the target is easily found. In other words, with the following HTML:
<table>
<tr id="a" class="row">
<td>#1</td>
<td><button class="showHide">Show</button></td>
<td class="content">Content</td>
</tr>
<tr id="b" class="row">
<td>#2</td>
<td><button class="showHide">Show</button></td>
<td class="content">Content</td>
</tr>
</table>
... you can write a listener on all showHide buttons to show or hide the content.
<script>
$(document).ready(function(){
$("button.showHide").on("click", function(){
$(this).closest("tr.row").find("td.content").toggle();
$(this).html($(this).html() == "Hide" ? "Show" : "Hide");
});
});
</script>
See it in action: http://jsfiddle.net/ft6md5d5/
I am using an open source javascript table sorting function on my html table, but it only works if I don't alter the table with another javascript function (which I need to do).
My table:
<table id="myTable" class="random">
<thead>
<tr>
<th>First</th>
<th>Last</th>
</tr>
</thead>
<tbody id ="mybody">
<tr>
<td>James</td>
<td>Smith</td>
</tr>
<tr>
<td>Kyle</td>
<td>Thompson</td>
</tr>
</tbody>
</table>
I also have a function which replaces the rows in the table
function addRow(item, i, tdcount) {
document.getElementById("mybody").innerHTML = //replace rows
}
The sort only works if I don't click the button to replace rows. As soon as I replace rows, the sort stops working. Is there a way to sort a table after it has been altered?
EDIT:
BTW, the table data is generated by an AJAX call to a different server which queries a database and returns a JSON object which I fill into the table
The solution was to simply add a call to the function after the table is altered:
function addRow(item, i, tdcount) {
document.getElementById("mybody").innerHTML = //replace rows
$(document).ready(function () {
$("#myTable").tablesorter();
}
}
I want to call a jquery function in grails g:each element, i'm using a function call on page load to filter a table which has a loop as follows
<g:each in="${sampleTypes}" status="i" var="sampleType">
<div class="uniq">${sampleType}</div>
<table id="sampleTable">
<thead>
<tr>
<th class="no-sort"><g:message code="labWorkItem.testUnit.label"
default="CustomerId" /></th>
<th class="no-sort"><g:message code="labWorkItem.testUnit.label"
default="OrderNo" /></th>
<th class="no-sort"><g:message code="labWorkItem.testUnit.label"
default="DateCreated" /></th>
<th class="no-sort"><g:message code="labWorkItem.testUnit.label"
default="Test unit" /></th>
<th class="no-sort no-visible"><g:message
code="labWorkItem.sampleType.label" default="Sample Type" /></th>
</tr>
</thead>
<tbody>
<g:each in="${labWorkItemInstance}" status="a" var="labWorkItem">
<tr class="${(a % 2) == 0 ? 'even' : 'odd'}">
<td>
${labWorkItem?.order?.customer?.customerId}
</td>
<td>
${labWorkItem?.order?.orderNo}
</td>
<td>
${labWorkItem?.order?.dateCreated}
</td>
<td >
${labWorkItem?.testUnit}
</td>
<td id = "labSample">
${labWorkItem?.testUnit?.sampleType}
</td>
</tr>
</g:each>
</tbody>
</table>
<g:textField name="singleValue" value="Blood" id="someHiddenField"/>
</g:each>
i am using the class "uniq" to filter the table
function typeSampleCollected() {
jQuery.fn.dataTableExt.afnFiltering.push(function(oSettings, aData,
iDataIndex) {
if (oSettings.nTable.id != "sampleTable") {
return true;
}
var uniq = jQuery("div.uniq").html();
alert(uniq);
jQuery("#someHiddenField").val(uniq);
var someHiddenField = jQuery("#someHiddenField").val()
if(someHiddenField){
//var sampleValue = jQuery("#someHiddenField").val();
//alert(sampleValue.toString());
if (someHiddenField != aData[4]){
console.log("sampleType"+someHiddenField);
console.log("aData"+aData[4]);
return false;
}
}
else{
console.log("else condition");
}
return true;
});
}
The problem is, it executes at the first on page load, only the first data of the loop executed others remains the same, i want the remaining data also to execute.
jQuery + HTML answer.
Your generated HTML will be wrong because the id "someHiddenField" will be duplicated. An id has to be unique within the HTML document. View the source of the document to check. Copy into an IDE or use w3c validator to check.
Once you have unique ID's you need to iterate over them and run your filter.
I am not sure whether by filter you are sending information back to the server. i.e. text blood results in only content relating to blood being displayed. I don't see any events in your code. Is the code incomplete?
A similar thing - click on an icon to only display items relating to that class. View code:
<g:each in="${assetTypes}" status="i" var="assetType">
<li>
<span class="atext">${assetType.name?.encodeAsHTML()}</span>
</li>
</g:each>
I used delegate() to late-bind jQuery to the click - use go() after 1.7 jQuery. The javascript had to be in a grails view because I use the gsp tags. With delegate() it could be anywhere:
/* Change asset types */
jQuery('body').delegate('[name=assetTypeSelector]', 'click', function() {
var newAssetIconId = jQuery(this).attr("id").split("-").pop();
// set the asset type.
${remoteFunction(controller: 'assetType', action: 'selector', name: 'assetTypeSelector', update: 'assetTypeSelector', params:'\'currentAssetTypeIconId=\' + newAssetIconId')}
});
Alternatively we have had a lot of success with DataTables which is a more complete solution.
I have this HTML:
<table class="itemsTable table table-striped table-condensed table-hover">
<thead>
<tr>
<th>#</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr class="collapse">
<td class="center">1</td>
<td>
Title 1
</td>
</tr>
<tr class="collapse">
<td class="center">2</td>
<td>
Title 2
</td>
</tr>
<tr class="collapse">
<td class="center">3</td>
<td>
Title 3
</td>
</tr>
</tbody>
</table>
test
And jQuery:
$('.collapseBtn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $collapse = $this.closest('.itemsTable').find('.collapse');
$collapse.collapse('toggle');
});
I want rows show/hide behavior on link click. What is wrong?
$.closest will look up the dom tree for a matching element - the .itemsTable isn't a parent of .collapseBtn - so $this.closest('.itemsTable') won't match any elements.
So, Either put the .collapseBtn within the table, or use $this.prev() instead of $this.closest('.itemsTable').
You can test if there are matching elements by running $('.collapseBtn').closest('.itemsTable') in the console
As of 130918_1100PST the selected answer is not correct. Although the writer did correctly identify why the closest() selector would not return any elements to collapse, this alone did not fix the OP's problem.
This selector will also work for selecting the elements to collapse:
$('.collapse').methodgoeshere();
but the elements won't expand/collapse -- it's not just a matter of the selector used.
The key to solving the problem, as user Chad identified in his jsFiddle below benjaminbenben's answer, is actually that the wrong method was used.
This did not work:
selector.collapse('toggle');
This did:
selector.toggle();
Therefore, the correct answer was:
$('.collapseBtn').on('click', function() {
$('.collapse').toggle();
});
jsFiddle here