Can anyone let me know how to disable on click event for particular column.
Scenario : We displayed user details in a table , once click has been made on the table row, popup dialog window will appears with more details(Calling ajax request to retrieve details from database) . But our constraint is to disable on click event for single column associated with the table.
Eg :
<table border = '1'>
<tr>
<th> Name </th>
<th> Id </th>
<th> Phone Number</th>
</tr>
<tr onclick = "testing()">
<td> Krupa </td>
<td> 123 </td>
<td> <a href = "http://www.google.com" target= '_blank'>Click me </a> </td>
</tr>
</table>
If click has been made on text(1st and 2nd column) , it will invoke on click event . But if user clicks on hyper link (3rd column) , i want to redirecting it to Google but not on-click event(testing()).
Can anyone help me to achieve this
Try this:
//snip
<tr>
<td onclick = "testing()"> Krupa </td>
<td onclick = "testing()"> 123 </td>
<td> <a href = "http://www.google.com" target= '_blank'>Click me </a> </td>
</tr>
//snip
Try this
Add a class named templatecell to the corresponding td to prevent click.
<table border = '1'>
<tr>
<th> Name </th>
<th> Id </th>
<th> Phone Number</th>
</tr>
<tr onclick = "testing()">
<td> Krupa </td>
<td> 123 </td>
<td class="templatecell"> <a href = "http://www.google.com" target= '_blank'>Click me </a> </td>
</tr>
</table>
script goes like this
$("table").on("click","td", function(e){
if($(e.target).closest(".templatecell").length){
//Clicked hyper link
//do action and return from here
return;
}
//Else clicked on td cell show popup
})
function testing() {
alert('testing')
}
$(document).ready(function () {
$('table tr td').click(function () {
if ($(this).index() < 2) {
testing();
}
else {
// window.open($(this).find('a').attr('href')); //working
$(this).find('a')[0].click();
}
});
});
Related
I would like to know how I can open a modal without clicking on a button. Basically if a user searches for something and the search does not return an results I would like a modal to popup informing the user that the search did not yield any results. I have pasted my code below but I dont think I am supposed to be calling jquery from within html.
<table id="tableData" class="table">
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
MobileNumber
</th>
<th>
EmailAddress
</th>
<th>
Identification Number
</th>
</tr>
#foreach (var item in Model)
{
if(Model.Count == 0)
{
$('#myConfirmationModal').modal('show');
//alert("no results find");
}
<tr>
<td>
<a class="anchorDetail" href="javascript:;" data-id=#item.ClientId>#item.FirstName</a>
</td>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.MobileNumber)
</td>
<td>
#Html.DisplayFor(modelItem => item.EmailAddress)
</td>
<td>
#Html.DisplayFor(modelItem => item.IdentificationNumber)
</td>
</tr>
}
</table>
You basically need to execute $(#....).modal('show') after the page is loaded if the count is 0. Execute the code inside $(function(){...}). JQuery will make sure to execute the function inside $(...) after document is loaded i.e. same as $(document).ready(function(){...})
Try below.
if(Model.Count == 0) {
<script>
$(function() {
{
$('#myConfirmationModal').modal('show');
//alert("no results find");
}
});
</script>
} else {
#foreach (var item in Model) {
...
...
}
I have the following structure in my HTML in an angular 7 application:
What I am trying to do is to call the GetContent() function on click of any of the text inside the div. I am able to get the $event as "Liquidity" when I click on the text but if I click on any empty space between the text, the $event is empty. I tried every possible permutation of changing the location of the function call and id but same issue. Can anyone let me know what is wrong.
<tr (click)="GetContent($event)">
<td>
<table>
<tbody>
<tr>
<td>
<div id="Liquidity"> lot of text....................... </div>
</td>
</tr>
</tbody>
</table>
</td>
<tr>
Because there is no content in your TR's and TD's, its not creating a space at all. Look at my code, I have added padding for table row's ,table and table data tags
<table>
<tbody>
<tr (click)="GetContent($event)" >
<td style="padding:20px;background:red">TD
<table style="padding:20px;background:green">Table
<tbody>
<tr>
<td style="padding:20px;background:blue">TD
<div id="Liquidity" style="padding:10px;background:green"> lot of text....................... </div>
</td>
</tr>
</tbody>
</table>
</td>
<tr>
</tbody>
</table>
example stackblitz
Do it this way ,
UPDATED
<table>
<tbody>
<tr>
<td>
<div id="Liquidity" (click)="GetContent($event)"> lot of text....................... </div>
</td>
</tr>
</tbody>
</table>
ts file
GetContent(event) {
var target = event.target || event.srcElement || event.currentTarget;
var idAttr = target.attributes.id;
var value = idAttr.nodeValue;
console.log(value) //you will get liquid here.
}
So I have a table like this:
<table border="1">
<tbody>
<tr>
<th> Book Title </th>
<th> Author </th>
<th> Book </th>
</tr>
<tr>
<td id= Book_Title>Gone </td>
<td id= Author>Micheal Grant</td>
<td><button id="AddToCart" onclick="addToLocalStorage()">Add To Cart</button> </td>
</tr>
<tr>
<td id= Book_Title>The Knife of never letting go</td>
<td id= Author>Ryan Howard</td>
<td><button id="AddToCart" onclick="addToLocalStorage()">Add To Cart</button> </td>
</tr>
</tbody>
My goal is to have, on button click for the data of a specific row to be saved to local storage. However, because the id's are the same for each row only the first instance of the id will save. I was wondering how I could use jquery closest() to fix my problem. Or even if there is any other solution to my problem.
In order to save the data contained in your table's row... Like the book title and author, I suggest you to use some objects contained in an array.
Then you'll have to stringify that prior to use localStorage.
When you'll want to retreive the stored data, you'll have to parse it back to an array of objects.
Sadly, SO snippets do not like the use of localStorage... So my working demo is on CodePen.
Here's the relevant code:
// The "add to cart" handler.
$("table").on("click", ".AddToCart", function(e){
// Get previous storage, if any.
var storage = JSON.parse(localStorage.getItem("cart"));
if(storage==null){
storage = [];
}
var row = $(this).closest("tr");
var title = row.find("td").eq(0).text().trim();
var author = row.find("td").eq(1).text().trim();
// Create an object to store.
var data = {author:author,title:title};
storage.push(data);
// Store it.
localStorage.setItem("cart",JSON.stringify(storage));
});
Use classes instead of IDs, and attach the listener using Javascript instead of inline attributes (which is as bad as eval). No need for jQuery. For example:
document.querySelector('table').addEventListener('click', (e) => {
if (e.target.className !== 'AddToCart') return;
// e.target refers to the clicked button:
const [bookTd, authorTd] = [...e.target.closest('tr').children];
addToLocalStorage({ title: bookTd.textContent, author: authorTd.textContent });
});
function addToLocalStorage(obj) {
console.log('adding ' + obj);
}
<table border="1">
<tbody>
<tr>
<th> Book Title </th>
<th> Author </th>
<th> Book </th>
</tr>
<tr>
<td class="Book_Title">Gone </td>
<td class="Author">Micheal Grant</td>
<td><button class="AddToCart">Add To Cart</button> </td>
</tr>
<tr>
<td class="Book_Title">The Knife of never letting go</td>
<td class="Author">Ryan Howard</td>
<td><button class="AddToCart">Add To Cart</button> </td>
</tr>
</tbody>
</table>
Here is my html table that is used in the Asp.net MVC razor view
<table class="table-striped table-bordered">
<thead>
<tr>
<th class="col-md-2">
Id
</th>
<th class="col-md-4">
Description
</th>
<th class="col-md-3">
Quantity
</th>
<th class="col-md-3">
AssetType
</th>
</tr>
</thead>
<tbody>
#foreach (var i in Model)
{
<tr>
<td class="col-md-2">
#i.Id
</td>
<td class="col-md-4">
#i.Description
</td>
<td class="col-md-3">
#i.Count
</td>
<td class="col-md-3">
#i.AssetType
</td>
<td>
<a onclick="getId()">Edit</a>
</td>
</tr>
}
</tbody>
</table>
My Js Code
<script type="text/javascript">
var getId = function () {
//get current row
var currentRow = $(this).closest('tr');
// get the id from the current row. or is there any better way ?
}
</script>
Hi In the above code. all i want to do is when the user selects the edit link of the given row in the table. i want to extract id value of the selected row.
Could anyone please guide me in this one? I have seen articles that says how to get a given cell value from each row but didnt have any luck in finding articles that explains how to extract the data cell value from a given row.
You already have it since you are generating the HTML from server side, when the user clicks pass the id to the funcion to do whatever you want with it.
<td>
<a onclick="getId('#i.Id')">Edit</a>
</td>
function getId(id) {...}
or if you prefer you can use something like this:
<a onclick="getId(this)">Edit</a>
function getId(dom){
var id = $(dom).parent().find('.col-md-2').html();
}
You can put the id value to data-id attribute in the Edit link as below
<a data-id="#i.Id" class="edit-button" href="#">Edit</a>
Add the click event handler to the edit link, you can get the id value by using $(this).data('id')
<script type="text/javascript">
$('.edit-button').on('click', function (e) {
e.preventDefault();
alert($(this).data('id'));
});
</script>
Working fiddle: http://jsfiddle.net/ds4t6jur/
I'm having problem trying to set the value for an input using jquery, basically you click on a link, and it takes you to a different page with a form, and I'm trying to set the value of one of the inputs of that form. I don't know why is not working. Here's my code:
page 1 (where you click the link that performs the function to set the value of the input)
<table class="tablaObjeto">
<tbody>
<tr>
<td>
<img src="img/ps4Mall.jpg">
</td>
</tr>
<tr>
<td class="precio">
<p>$<span id="precioPS4">400</span> - PS4</p>
</td>
</tr>
<tr>
<td class="botonCompra">
<a id="botonCompraPS4" href="paginaSolicitudes.html"><img src="img/BotonCompra.png"></a>
</td>
</tr>
</tbody>
</table>
page 2 (form with the input that needs to show the value)
<tr>
<td class="info">Precio: </td>
<td class="inputs"><input id="precioI" name="precio" type="text" value=""></td>
</tr>
Here's the javascript (javascript/metodos.js)
$(document).ready(function() {
$("#botonCompraPS4").click(function() {
obtienePrecioPS4();
$("#precioI").val(retornaPrecio());
});
});
function obtienePrecioPS4() {
sessionStorage.setItem("precio", $("#precioPS4").text());
}
function retornaPrecio() {
var r = sessionStorage.getItem("precio");
return r;
}
try loading the value on document ready, see below
$(document).ready(function() {
$("#botonCompraPS4").click(function() {
obtienePrecioPS4();
});
// Load value on document ready
$("#precioI").val(retornaPrecio());
});
Your page1 and page2 should have the same javascript code above