Is it possible that i can show edit button after right clicking on row of a table? I wanted to inbuilt this functionality in my html page but i am not getting the idea how to do that. MY html page is like this
<table class="table table-hover table-bordered" id="tblData">
<thead>
<tr>
<th>Parameter Names</th>
<th>Parameter Values</th>
<th>Remarks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>johnrambo#mail.com</td>
<td>John</td>
<td>Rambo</td>
<td>
<a class="btn btn-mini btnEdit">Edit</a>
</td>
</tr>
<tr>
<td>peterparker#mail.com</td>
<td>Peter</td>
<td>Parker</td>
<td>
<a class="btn btn-mini btnEdit">Edit</a>
</td>
</tr>
</tbody>
</table>
When i right click on the row of this table then it should show me edit buttin which i can use to edit the table. TO edit the table i have js file but that is other thing. Main thing I want to make the edit button visible after right click.And also I have use bootstrap to improve the visibility. Please help me to solve this problem.
This code might help you:
on right clicking on specific <tr>
1) no default browser menu opens
2) Show/hide edit link
On clicking on document (both left and right)
1) hide edit link (can be changed accordingly)
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.btnEdit{display:none;}
</style>
</head>
<body>
<table class="table table-hover table-bordered" id="tblData">
<thead>
<tr class ='abc' >
<th>Parameter Names</th>
<th>Parameter Values</th>
<th>Remarks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id = 'John1' class ='abc'> <!-- id=username+userid -->
<td>johnrambo#mail.com</td>
<td>John</td>
<td>Rambo</td>
<td>
<a class="btn btn-mini btnEdit" href='asd.html' >Edit</a>
</td>
</tr>
<tr id = 'Peter1' class ='abc'>
<td>peterparker#mail.com</td>
<td>Peter</td>
<td>Parker</td>
<td>
<a class="btn btn-mini btnEdit" id ="btnEdit" href='asd.html' >Edit</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
$(document).ready(function(){
$('.abc').contextmenu(function(){
$('.btnEdit').hide();
var id = $(this).attr('id');
$('#'+id+' .btnEdit').toggle();
return false;
});
$(document).click(function(){
$('.btnEdit').hide();
});
});
</script>
try it here http://jsfiddle.net/f5n9f4po/2/
The event you're looking to capture is window.oncontextmenu. I'm pretty sure you can tie the event to right click by binding it to the tr tags.
(tr selector).oncontextmenu = function () {
toggleEditButton() // callback fn for showing your edit button
return false; // Prevents actual right click menu from showing up
};
Refer to this for more info.
You can handle it using onmousedown event. When you press the mouse button this event will be fired and by checking it's keyCode you can find if it's the right mouse button.
This should serve your purpose.
HTML :
<div onmousedown="showEditButton(event);">Row Content</div>
<button id="editButton" style="display:none;">Edit</button>
javaScript :
function showEditButton(event){
event = event || window.event;
if(event.which == 3){
var button = document.getElementById("editButton");
button.style.display = 'block';
}
}
jsFiddle - javaScript
jQuery :
$("#editableContent").mousedown(function(event){
if(event.which == 3){
$("#editButton").show();
}
});
jsFiddle - jQuery
Resources :
onmousedown , .mouseDown() , event.which
This answer is based on Making custom right-click context menus for my web-app implemented to work for your situation.
JSFiddle
Here's the JQuery:
// Trigger action when the contexmenu is about to be shown
$('.btnEdit').bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide();
}
});
// If the menu element is clicked
$(".custom-menu li").click(function () {
// This is the triggered action name
switch ($(this).attr("data-action")) {
// A case for each action. Your actions here
case "edit":
alert("Edited!");
break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide();
});
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
I have a previous question re loading html via ajax:
javascript - load html content from ajax call
but I face small issue with attaching a click listener:
<html th:remove="tag" xmlns:th="http://www.thymeleaf.org" xmlns:ber="http://berwickinsurance.com/thymeleaf"
xmlns:eph="http://ephibian.com/thymeleaf" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<div>
<div id="note-list-container2">
....
</div>
<div id="file-list-container2">
<table style="width: 100%; height: 100%" class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Category</th>
<th>Created On</th>
<th>Size</th>
<th></th>
</tr>
</thead>
<tbody>
<th:block th:each="note : ${model.notes}" th:object="${note}">
<tr th:each="file : *{files.data}" th:object="${file}">
<td><i
th:replace="~{layout/custom-frag::file-ico(*{mimeType})}"></i></td>
<td><a target="file"
th:href="#{*{#uris.escapePath('/files/'+id+'/'+name)}}"><strong
th:text="*{name}">contractUHCSigned.pdf</strong></a></td>
<td><span class="badge" th:text="${note.category.name}">Category</span>
</td>
<td> <span th:text="*{#joda.defaultDateTime(createDate)}">Create On</span></td>
<td><th:block
th:text="*{#prettyTime.humanReadableByteCount(size, true)}">400 kb</th:block>
</td>
<td><a target="file"
th:href="#{*{#uris.escapePath('/files/'+id+'/'+name)}}">View</a></td>
<td ><a id="noteFileDeletion" onClick="handleFiledeletion()" title="Remove File" class="delete-btn text-danger" data-confirm="delete file"><i class="fa fa-remove"></i></a></td>
</tr>
</th:block>
</tbody>
</table>
</div>
</div>
<script>
function handleFiledeletion(){
.....
}
</script>
</html>
It's not triggering the handleFiledeletion method.
I tried another approach:
$("#noteFileDeletion").on('click', function() {
var deleteBtn = $(this);
var url = $(this).data('url');
url = url +"?csrf_token="+App.config.csrfToken;
var msg = "Are you sure you want to "+$(this).data('confirm')+"?";
bootbox.confirm(msg, function(result){
if(result){
$.ajax({
processData : false,
"type" : "DELETE",
"url" : url,
})
.success(function( data ) {
window.location.href='/applicationProducts';
});
}
});
});
but it's not triggering the event handler either.
What I missing?
When using .on(), you must be sure that you attach the .on() listener to an element that is already in the DOM at initial page load.
Try this - if it works, then you can try moving the listener further down the tree:
$(document).on('click', function(){
var deleteBtn = $(this).find('#noteFileDeletion');
etc.
Update:
I've updated the above code with the missing bit - many thanks to #David for catching the omission.
$(document).on('click', '#noteFileDeletion', function(){
alert('You clicked ID noteFileDeletion');
});
With my preexisting knowledge (for example this one) I have seen so far that a div container can easily be toggled (i.e. hide and show). However I am pretty confused when I have some data inside tr and I want to display and hide few items once that tr is clicked. Let's consider a food menu (I name it "Rice"), and there are few sub menus under that category (I name them "Fried rice", "Boiled rice"...). Once the "Rice" is clicked (or possibly if I have a arrow or plus icon to click on), the sub menus should get displayed. Similarly, they should hide themselves once the arrow is clicked again.
Please see in this website how they toggle the restaurant menu with arrow key. I want to do the exactly same thing.
The code I am working on:
<div class="media-right">
<table class="table">
<tr>
<td>
<h3 class="menu-title">Rice</h3>
</td> <!--make this tr expandable and collapsable-->
<td>
<div class="menu-rate">$100.00</div>
</td>
</tr>
<tr>
<td>
<h3 class="menu-title">Fried Rice</h3></td>
<td>
<div class="menu-rate">$50.00</div>
</td>
</tr>
<tr>
<td>
<h3 class="menu-title">Boiled Rice</h3></td>
<td>
<div class="menu-rate">$25.00</div>
</td>
</tr>
</table>
</div>
You can try a class "Accordion" which has the similar functionality.
You can find it here in detail.
<script>
$(function(){
$('.menu-rate').click(function(){
$(this).closest('.container').toggleClass('collapsed');
});
});
</script>
Something like this?
function Rice(){
if(document.getElementById("Rice").style.display == "none"){
document.getElementById("Rice").style.display = "block";
}else{
document.getElementById("Rice").style.display = "none";
}
}
function boiledRice(){
if(document.getElementById("boiledRice").style.display == "none"){
document.getElementById("boiledRice").style.display = "block";
}else{
document.getElementById("boiledRice").style.display = "none";
}
}
function friedRice(){
if(document.getElementById("friedRice").style.display == "none"){
document.getElementById("friedRice").style.display = "block";
}else{
document.getElementById("friedRice").style.display = "none";
}
}
<div class="media-right">
<table class="table">
<tr>
<td>
<a onclick="Rice()"><h3 class="menu-title">Rice</h3></a><div id="Rice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td> <!--make this tr expandable and collapsable-->
<td>
<div class="menu-rate">$100.00</div>
</td>
</tr>
<tr>
<td>
<a onclick="friedRice()"><h3 class="menu-title">Fried Rice</h3></a><div id="friedRice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td>
<td>
<div class="menu-rate">$50.00</div>
</td>
</tr>
<tr>
<td>
<a onclick="boiledRice()"><h3 class="menu-title">Boiled Rice</h3></a><div id="boiledRice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td>
<td>
<div class="menu-rate">$25.00</div>
</td>
</tr>
</table>
</div>
Is there a constraint that is forcing you to utilize a table? Since you're already using jQuery, you could easily achieve this type of functionality with jQuery UI's accordion widget.
$( "#accordion" ).accordion({
collapsible: true
});
Here's a basic example.
If you're open to use a library for this, you can try using bootstrap-table by wenzhichin. I find it very flexible.
Subtable - http://issues.wenzhixin.net.cn/bootstrap-table/#options/sub-table.html
Collapsing row - http://issues.wenzhixin.net.cn/bootstrap-table/#methods/expandRow-collapseRow.html
checkout collapsible elements on material design made by google, really helpful an easy to use:
http://materializecss.com/collapsible.html
I have a table with rows. In each row there is a "copy to clipboard" button implemented using Clipboard.js
Now I want the table row to be clickable and I want it to redirect to "google.com", if the user clicks anywhere on the row BUT the button.
When the user clicks the button, I want to copy the text to the clipboard, but NOT redirect.
I have tried using the solution suggested in this answer here, but using event.stopPropagation() also disables the Clipboard.js functionality.
Is there an elegant solution for this problem? Here's some code:
<table>
<tr>
<th>Name</th>
<th></th>
</tr>
<tr class='valign-middle' data-href='www.google.com'>
<td>Text</td>
<td>
<button data-clipboard-text='www.facebook.com' id='clipboard-btn'>
<i class="fa fa-clipboard"></i>
</button>
</td>
</tr>
</table>
<script>
// activate Clipboard buttons
var clipboard = new Clipboard('button#clipboard-btn');
// make table rows clickable
$(function(){
$('.table tr[data-href]').each(function(){
$(this).css('cursor','pointer').hover(
function(){
$(this).addClass('active');
},
function(){
$(this).removeClass('active');
}).click( function(event){
document.location = $(this).attr('data-href');
}
);
});
});
</script>
You can have a class for td in tr except for the last one in which your copy button is present, then instead of applying click event on row you can have this click event on each td and then check in click event whether td has that specified class or not, if it has redirect it to google.com else do nothing.
Below is the sample implementation :
<table>
<tr>
<th>Name</th>
<th></th>
</tr>
<tr class='valign-middle' data-href='www.google.com'>
<td class='normalText'>Text</td>
<td>
<button data-clipboard-text='www.facebook.com' id='clipboard-btn'>Copy
<i class="fa fa-clipboard"></i>
</button>
</td>
</tr>
</table>
<script>
var clipboard = new Clipboard('button#clipboard-btn');
// make table rows clickable
(function(){
$('table tr[data-href] td').each(function(){
$(this).css('cursor','pointer').hover(
function(){
$(this).addClass('active');
},
function(){
$(this).removeClass('active');
});
$(this).click( function(event){
if($(this).hasClass("normalText"))
document.location = $(this).parent().attr('data-href');
}
);
});
});
</script>
I have this HTML piece of code:
<table class="table" id="table_data">
<tbody>
<tr id="tr_2085">
<td>
<a href="javascript:void(0)" data-id="2085" class="delete">
Delete
</a>
</td>
<td>United States of America</td>
<td>US</td>
<td>Post Warranty Service</td>
<td>14.01</td>
</tr>
</tbody>
</table>
And I am trying to clean (empty) the content of the last td when I click in a .delete link. This is what I am doing:
$('#table_data').on('click', '.delete', function(ev) {
var item_id = $(this).data('id');
var that = $(this);
that.closest('tr td:last').empty();
});
But isn't working since the value remains there. I have tried this too:
that.closest('tr td:last').text('');
that.closest('tr td:last').html('');
But isn't working either. I think the problem is on the selector I am using but I don't know what is the right one, any help? There is a Fiddle setup here for play with.
closest('tr td:last') needs to be closest('tr').find('td:last')
$('#table_data').on('click', '.delete', function(ev) {
ev.preventDefault();
var item_id = $(this).data('id');
$(this).parent().siblings('td').last().html('');
});
I've got a modal box that pops up popups when the plus icon is clicked in a table. After the page is loaded five rows are displayed in the table and clicking the plus sign opens the modal box. (Works perfectly).
But now we are changing the content of the table by an AJAX call. Once the TR's are replaced by new ones, the plus signs aren't working any more.
I'm aware of the fact that the event-handler
Table:
<table class="table table-hover" id="carsTable">
<thead>
<tr>
<th>Car Title</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr id="car-1836">
<td>ferrari f50</td>
<td><i class="glyph-icon icon-plus-circle">+</i></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Product Title</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
The Jquery Part that handles the AJAX (and works, replaced the table according to the JSON respons).
$.post("../../../scripts/getCars.php", {s: carSearch}, function (data) {
$("tr[id='carLoader']").remove();
$.each(data, function (index) {
if ($('#selectedCar-' + data[index].externalProductId + '').length == 0) {
$('#carsTable')
.append('<tr id="car-'+ data[index].id+'"><td>' + data[index].title + '</td><td><i class="glyph-icon icon-plus-circle"></i></td></tr>');
}
});
}, "json");
Now the event Handler, works after document is ready, but stops working once the AJAX call has replaced the data.
$('#carsTable').on('click', '.black-modal-80', function () {
console.log('Click detected; modal will be displayed');
});
What's wrong with the binding?
When you append something to the window, the element doesn't exist until you run the jQuery. That means the element the click event points to doesn't exist when the click event is defined. So you can use the body as a selector like this.
$('body').on('click', '.black-modal-80', function () {
console.log('Click detected; modal will be displayed');
});
Hope this helped!