I'm using backbone, jquery and handlebars on my project.
I'm trying to change row class just on click.
I mean if I click edit button (right of the table), it changes the class.
Look the table screenshot to understand.
AdminTableView.js
var addAdminPanelView = Backbone.View.extend({
el:$(".page"),
events:{
'click #editButton':'editEvent',
'click #deleteButton':'deleteEvent'
},
editEvent:function(){
console.log("edit");
this.$el.children().find("th").addClass("info");
},
My template
<tbody id="myTable">
<tr class="active">
{{#travels}}
<th>{{user.department.departmentName}}</th>
<th>{{user.managerID}}</th>
<th>{{user.firstName}} {{user.lastName}}</th>
<th>Seyahat Başlangıcı</th>
<th>Seyahat Sonu</th>
<th>{{location}}</th>
<th>{{travelPurpose}}</th>
<th>{{travelCost}}</th>
<th>{{projectCode}}</th>
<th> <a href="/#travel">
<span id="deleteButton" class="glyphicon glyphicon-minus-sign"></span>
</a>
<a href="#">
<span id="editButton" class="glyphicon glyphicon-edit"></span>
</a>
</th>
{{/travels}}
</tr>
</tbody>
If I click any edit button, all rows have added class "info"
Seems like the event if fired on the "edit" button click.
But you have to know on which row.
The use of .target as in "event.target" may help to find the parent row.
Try this:
editEvent:function(e){
console.log("edit");
$(e.target).closest("tr").addClass("info");
},
Try this one $( "editButton" ).parent( ".active" ).addClass( "yourClass" ); or this
$( "editButton" ).parent( "tr" ).addClass( "yourClass" );
I hope it'll work
Related
My code in HTML :
<td id ="tdtest">
<a id="atest" href="#">
<span id="spantest">Show</span>
</a>
</td>
and Jquery :
$(document).ready(function () {
$("#tdtest #atest").on('click',function(){
alert ("Success !!!");
})
}
But when i click "Show" , it's not working.
You can't have a standalone <td> without a table and table row surrounding it. As soon as you write valid markup, it works:
$("#tdtest #atest").on('click',function(){
alert ("Success !!!");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="tdtest">
<a id="atest" href="#">
<span id="spantest">Show</span>
</a>
</td>
</tr>
</table>
As suggested in other answers already, an ID is already a unique identifier for a DOM element, so there's actually no need to use two ids in a selector and it might even internally slow down finding the correct node.
use div the place of td and your code is working.
<div id ="tdtest">
<a id="atest" href="#">
<span id="spantest">Show</span>
</a>
</div>
JS
$(document).ready(function () {
$("#tdtest #atest").on('click',function(){
alert ("Success !!!");
});
});
working fiddle here
only use one id in selector
put code after document ready, $(function(){ code here.. })
$(function(){
$("#atest").on('click',function(){
alert ("Success !!!");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<td id="tdtest">
<a id="atest">
<span id="spantest">Show</span>
</a>
</td>
I'm using datatable editor with inTableControl buttons. The inTableControl buttons work fine when the table is in normal status, but in combination with responsive and if the inTableControl buttons are in the child tr (when collapsed in the dropdown), the sample js is not working. There are no records to edit in the modal. Does anyone know how to adjust the js for the inTableControl buttons for them also to work when in the child tr? I tried a couple of things like .parent().prev('parent') , .closest('tr.child').prev('tr.parent'), .closest('tr').prev('tr') , .parent().prev('tr') .... but none of them work. And do I need an if for both status? How would that look like?
This works fine ...
var edit_inTable_editor_bafin = $('#bafin').on('click', 'a.editor_cog', function (e) {
e.preventDefault();
editor_bafin.edit( $(this).closest('tr'), {
title: 'Edit record',
buttons: 'Update'
} );
} );
<tr id="row_2812" class="odd selected parent" role="row">
<td>Test</td>
<td class=" datatable-link" style="">
<a class="editor_cog" title="Edit Entity" role="button" href="">
</td>
</tr>
... but when the inTableControl buttons are in child tr (dropdown of responsive):
<tr id="row_2812" class="odd selected parent" role="row">
<tr class="child">
<td class="child" colspan="15">
<ul data-dtr-index="0">
<li data-dtr-index="11">...</li>
<li data-dtr-index="12">...</li>
<li data-dtr-index="13">...</li>
<span class="dtr-title"></span>
<span class="dtr-data">
<a class="editor_cog" title="Edit Entity" role="button" href="">Edit</a>
</span>
</li>
</ul>
</td>
</tr>
...
I have a similar problem. But I solved it this way
$('#tb_sos tbody').on( 'click', 'input.aja', function () {
var tr=$(this).parents('tr');
if ($(tr).hasClass("child")){
var api = tablaSOS.tabla.row( $(this).parents('tr').prev('tr') ).data();
}else{
var api = tablaSOS.tabla.row( $(this).parents('tr') ).data();
}
console.log(api);
} );
Summary: I have a html page which consists of two add buttons and two tables. When add button is clicked, rows are appended to respective table. I have included two templates with two different parent ids into one html template. I need to write the script in such a way that when add-btn having parentid == "#a" is clicked ,append rows to table having parentid =="#a".
result.html
//i am using django web framework
<div class="reports">
{% include 'template1.html' with id="a" %}
{% include 'template2.html' with id="b" %}
</div>
Each template shares/extends a base.html template where all the common code is written
<div class="panel">
<div>
<button type="button" class="add btn btn-primary" data-toggle="tooltip" title="Add to configuration list.">
<i class="fa fa-plus"></i>
Add
</button>
</div>
<div class ="configuration-table panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Remove</th>
<th>Layer</th>
<th>Display</th>
<th>Unit</th>
<th>Dataset</th>
<th>Ordering</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
and my jquery code is
result.js
$('.reports').on('click','#a .add, #b .add', function(e) {
//how to differentiate two tables here.
$(this).find('configuration-table table').children('tbody')
.append(
'<tr>'+
'<td class="remove-row" role="button" aria-label="Remove Region"><i class="fa fa-times" title="Remove this row." data-toggle="tooltip" data-placement="right" aria-hidden="true"></i></td>'+
'<td>'+layer_text+'</td>'+
map_elements+
'<td>'+unit_text+'</td>'+
'<td>'+dataset_text+'</td>'+
'<td class="ordering" aria-label="Re-order"><i class="fa fa-arrows" title="Re-arrange row order." data-toggle="tooltip" data-placement="right"></i></td>'+
'</tr>'
);
Issue: When i click add button, the row is appending to both the tables. and i dont want that. i want to add rows to the respective table. And i want to do that within same function.
I am looking for logic that i am missing here.
Thanks in advance
Your code is using find which looks for a child of the button. It is not a child, it is a sibling of the parent div of the button.
$(this) //button that was clicked
.parent() //div around the button
.sibling(".configuration-table") //sibling element that has the table
.find("table tbody") //the table
.append(tableRow);
Firstly as per markup, there is no parent child relation between add button and table. Though, there can be many ways of fixing this issue. Proposing 1 option below
Let us say you have both buttons with class add and a data attribute (data-id) containing id of table.
i.e. 1st button having data-id="a" and second button having data-id="b" where a and b are the ids of respective tables.
Now update your js to following
.on('click','.add', function(e) {
var table_id = $(this).data("id");
$("#"+table_id).children('tbody').append..... // your code
}
I have a dynamically created 3 options list which are attached at the end of a table row. I want to hide or disable Edit and Copy options if certain conditions are not met when page loads. How can i do this using either jQuery of JavaScript.
<div class="btn-group ewButtonGroup open">
<button class="dropdown-toggle btn btn-small" data-toggle="dropdown" href="#">Options <b class="caret"></b></button>
<ul class="dropdown-menu ewMenu">
<li><a class="ewRowLink ewView" data-caption="View" href="teamsview.php?showdetail=&TeamID=1">View</a></li>
<li><a class="ewRowLink ewEdit" data-caption="Edit" href="teamsedit.php?TeamID=1">Edit</a></li>
<li><a class="ewRowLink ewCopy" data-caption="Copy" href="teamsadd.php?TeamID=1">Copy</a>
</li>
</ul>
</div>
I have tried the following code which deosnt work.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink ewView span').text();
if ( Week_Check > 10) {
$('.ewRowLink ewView').hide();
}
});
</script>
You have a bad jQuery selector. If you want to hide an element having both of those classes you want to go this way:
$('.ewRowLink.ewView').hide();
By using $('.ewRowLink ewView').hide(); you basically state: hide all ewView (?) elements that are inside other elements having ewRowLink class.
You can use .off() to unbind the event:
$('.ewEdit, .ewCopy').off('click');
or if you want to hide:
$('.ewEdit, .ewCopy').hide();
Yet you need to mention on what condition you want to do this.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink, #ewView').find('span').html();
if ( Week_Check > 10) {
$('.ewRowLink, .ewView').hide();
}
});
</script>
I'm starting to think that this may not even be possible, but I'm trying to automate a backend management task for myself here by allowing multiple emails to be initiated at once.
I have a table with users. The last column of the table has a drop-down button with mailto links that initiate various emails to the user for that row. The column also has a checkbox next to the button. Here's a simplified snippet:
<table>
<tr>
<td>
User
</td>
<td>
<div class="btn-group individual-btn">
<a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
Email User
<ul class="dropdown-menu">
<li>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you open?
</a>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you click?
</a>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you pay?
</a>
</ul>
</div>
<input type="checkbox" class="selected-row">
</td>
</tr>
<tr>
rinse and repeat...
At the end of the table I have a button with the same set of actions but the idea for this button is that clicking it will open an email for every selected user (as indicated by the checkbox).
<div class="btn-group master-btn">
<a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
Email All Checked Users
<ul class="dropdown-menu">
<li class="email-items">
<a class="no-open" href="#">
Why didn't you open?
</a>
<a class="no-open" href="#">
Why didn't you click?
</a>
<a class="no-open" href="#">
Why didn't you pay?
</a>
</ul>
</div>
I thought the js might be this easy:
$(".master-btn .email-items a").click(function(e){
linkClass = "a." + $(this).attr("class").trim()
$(".selected-row:checked").prev(".individual-btn").find(linkClass)[0].click();
e.preventDefault();
});
But that only opened an email for the first selected row. So, I thought, well maybe the dom needs space between these clicks, so I'll iterate over each and put a delay in to simulate clicks; but same result: only the first selected row is emailed:
$(".master-btn .email-items a").click(function(e){
linkClass = "a." + $(this).attr("class").trim()
$(".selected-row:checked").each(function(i){
var self = this
setTimeout(function(){
$(self).prev(".individual-btn").find(linkClass)[0].click();
}, 2000*i);
});
e.preventDefault();
});
Any thoughts? Will the browser even allow this?
Working example: https://jsfiddle.net/gaboom/h81qov5g/
$("#send").on("click", function(event) {
event.preventDefault();
$("#iframes").empty();
$("#links a").each(function() {
setTimeout($.proxy(function() {
var popup = window.open($(this).attr("href"))
setTimeout($.proxy(function() {
this.close();
}, popup), 100);
}, this), 100)
})
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="send" href="#">CLICK TO SEND</a>
<div id="links" class="hidden">
John
Sarah
John
Sarah
John
Sarah
</div>
I think this is the fix:
$(".selected-row:checked").prev(".individual-btn").find(linkClass).each(function() {
$(this)[0].click();
});
When you use [0] on a jQuery object, it only returns the first DOM element in the collection, equivalent to .get(0). If you want an array of all DOM elements, you would have to use .get() (with no arguments it returns all the elements).