I have this table in my page that I fetch by using AJAX request.
<table>
<tbody>
<tr>
<th>No</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Example Name 1</td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" value="2">
Delete
</a>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>Example Name 2</td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" value="1">
Delete
</a>
</div>
</td>
</tr>
</tbody>
</table>
So I'm trying to get the anchor value when the button is clicked. So I make a function like this :
function deleteParticipantFunction(){
var result = confirm('You are about to delete this participant. Continue?');
if(result){
var participant_id = $(this).val();
console.log(participant_id);
}
};
But I'm not able to get the value. What is the correct way to fetch the value in the function?
Pass id direct to method:
<a href="javascript:;" onclick="deleteParticipantFunction(1)" class="delete-participant">
Then Yours js methods will be simpler:
function deleteParticipantFunction(participant_id){
var result = confirm('You are about to delete this participant. Continue?');
if(result){
//delete smth by id
}
};
Anchor elements don't have a value attribute. That's something one finds on form inputs. Instead, you can put the value in a data-* attribute:
<a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" data-participant="1">
Delete
</a>
And retrive it from the data() function:
var participant_id = $(this).data('participant');
Though, thinking about it, when calling the function like that, is this even the correct context? I guess I haven't had to try that in a while so I don't know off the top of my head. But fortunately you're already using jQuery, so why not just use jQuery? Rather than put the function call on every element in an onclick attribute, use jQuery to bind a function to the click event(s):
<a href="javascript:;" class="delete-participant" data-participant="1">
Delete
</a>
and:
$(document).on('click', '.delete-participant.', function () {
var result = confirm('You are about to delete this participant. Continue?');
if(result){
var participant_id = $(this).data('participant');
console.log(participant_id);
}
});
Which has the added benefit of de-cluttering your markup.
function deleteParticipantFunction(e){
var result = confirm('You are about to delete this participant. Continue?');
if(result){
var participant_id = this;
console.log(e.value);
//e.parentNode.parentNode.parentNode.remove()
}
};
<table>
<tbody>
<tr>
<th>No</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Example Name 1</td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<button href="javascript:;" onclick="deleteParticipantFunction(this)" class="delete-participant" value="2">
Delete
</button>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>Example Name 2</td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<button href="javascript:;" onclick="deleteParticipantFunction(this)" class="delete-participant" value="1">
Delete
</button>
</div>
</td>
</tr>
</tbody>
</table>
Related
I am trying to create a table to log in stress level through the click of a button which leads to a prompt, i got the first line to work and it fills in the table but i don't know how to take it to the next line because if the button is clicked again the input for the prompt refreshes and prints in the same cell. I hope that makes sense i'm quite new in coding so forgive me if i dont make sense.
here is my HTML code followed by the JavaScript;
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="project.html">Occupational Stress Monitor</a>
<form class="form-inline">
<button id= "record-button" class="btn btn-md btn-light" type="button" data-toggle="tooltip" data-placement="top" title="Click Here to Record Stress">Record</button>
</form>
</div>
</nav>
<h1>Stress Log</h1>
<table>
<tr>
<th class="heading">Day of the Week</th>
<th class="heading">Stress Level</th>
<th class="heading">Cause of Stress</th>
</tr>
<tr>
<td>Monday</td>
<td id="Monday"></td>
<td id="stressor1"></td>
</tr>
<tr>
<td>Tuesday</td>
<td id="Tuesday"></td>
<td id="stressor2"></td>
</tr>
<tr>
<td>Wednesday</td>
<td id="Wednesday"></td>
<td id="stressor3"></td>
</tr>
<tr>
<td>Thursday</td>
<td id="Thursday"></td>
<td id="stressor4"></td>
</tr>
<tr>
<td>Friday</td>
<td id="Friday"></td>
<td id="stressor5"></td>
</tr>
</table>
Javascript:
var record = document.getElementById("record-button");
var person = ["Good", "Ok", "Bad"];
record.onclick = function () {
var person = prompt ("How are you feeling today?-Good,Ok or Bad");
document.getElementById("Monday").innerHTML = person;
if (person !== "Good") {
var cause = prompt ("What is causing your stress?");
document.getElementById("stressor1").innerHTML = cause;
}
}
You can do it something like this
What i have done is.
Used a variable array called days which have all the days and one variable called last to keep track of which day is inserted before the current click event.Than in the onclick function every time i am selecting the current clicked day from array and updating last by 1.
var record = document.getElementById("record-button");
var person = ["Good", "Ok", "Bad"];
var days = ["Monday","Tuesday","Wednesday","Thursday","Friday",]
var last = 0;
record.onclick = function (){
if(last < 5)
{
var person = prompt ("How are you feeling today?-Good,Ok or Bad");
document.getElementById(`${days[last]}`).innerHTML = person;
if (person !== "Good"){
var cause = prompt ("What is causing your stress?");
document.getElementById(`stressor${last+1}`).innerHTML = cause;
}
last++
}
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="project.html">Occupational Stress Monitor</a>
<form class="form-inline">
<button id= "record-button" class="btn btn-md btn-light" type="button" data-toggle="tooltip" data-placement="top" title="Click Here to Record Stress">Record</button>
</form>
</div>
</nav>
<h1>Stress Log</h1>
<table>
<tr>
<th class="heading">Day of the Week</th>
<th class="heading">Stress Level</th>
<th class="heading">Cause of Stress</th>
</tr>
<tr>
<td>Monday</td>
<td id="Monday"></td>
<td id="stressor1"></td>
</tr>
<tr>
<td>Tuesday</td>
<td id="Tuesday"></td>
<td id="stressor2"></td>
</tr>
<tr>
<td>Wednesday</td>
<td id="Wednesday"></td>
<td id="stressor3"></td>
</tr>
<tr>
<td>Thursday</td>
<td id="Thursday"></td>
<td id="stressor4"></td>
</tr>
<tr>
<td>Friday</td>
<td id="Friday"></td>
<td id="stressor5"></td>
</tr>
</table>
You can use querySelector to achieve that behaviour.
var record = document.getElementById("record-button");
var recordIndicator = ["Good", "Ok", "Bad"];
var cellCounter = 2
record.onclick = function (){
var person = prompt ("How are you feeling today?-Good,Ok or Bad") ;
document.querySelector(`table tr:nth-child(${cellCounter}) td:nth-child(2)`).innerHTML = "person";
var cause = prompt ("What is causing your stress?");
document.querySelector(`table tr:nth-child(${cellCounter}) td:nth-child(3)`).innerHTML = "cause";
cellCounter++;
}
I have used String literals to use the cellCounter variable inside querySelector.
To learn more about String literals and query Selector you can visit respective links.
Happy coding :)
So I need to be able to expand some details on each row of a table. Right now I'm having two issues:
Clicking the expand/collapse toggle will trigger the action for every row in the table.
The first row always puts the details above it.
Here's the code segment:
<tbody>
<tr *ngFor="let client of clients">
<td class="details-control">
<a class="btn btn-link" (click)="collapsed1=!collapsed1">
<i class="material-icons">
expand_more
</i>
</a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
</tr>
<div *ngIf="!collapsed1">
<p>Details</p>
</div>
</tbody>
And what it looks like:
Toggling
Also I had my *ngFor statement in the tag earlier but I realized I can't hit individual client objects if I build a separate for details.
Let me know how I can improve!
It's a very common pattern.
The best and quick solution is to use some ID instead of just a boolean in your collapsed1 variable.
<tbody>
<tr *ngFor="let client of clients">
<td class="details-control">
<a class="btn btn-link" (click)="collapsed1 = collapsed1 ? 0 : client.id ">
<i class="material-icons">
expand_more
</i>
</a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
<div *ngIf="collapsed1=client.id">
<p>Details</p>
</div>
You need a boolean array collapsed[] and use index in your ngFor, so you can use collapsed[i]. Take a look here for using index in ngFor:
ngFor using Index
Let me know if you need more info. Wellcome
Nevermind, here is the code that solved it.
<tbody>
<tr *ngFor="let client of clients; let i = index">
<td class="details-control">
<a class="btn btn-link" (click)="client.hideme=!client.hideme">
<i class="material-icons" *ngIf="!client.hideme">
expand_more
</i>
<i class="material-icons" *ngIf="client.hideme">
expand_less
</i>
</a>
</td>
<td width="30%">{{client.firstName}}
<tr *ngIf="client.hideme">
<td>Hey, I'm a bunch of details!</td>
</tr>
</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}
<tr *ngIf="client.hideme">
<td>More Issuer details</td>
</tr>
</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
I have a link in my HTML that I want to trigger using a click event in jQuery. This content is generated with AJAX. I know that I'm supposed to use .on, so that's what I'm doing. My code does fire on the td when I use this code:
$(".onestepcheckout-summary").on("click", ".wider", function() {
alert('success');
return false;
});
But it's supposed to fire on the anchor tag with the class addsqty. I've tried multiple things like changing the .wider to .wider > a and .wider > .addsqty or simple .addsqty. Why doesn't this work?
Here is my HTML. The AJAX loaded content starts with <table class="onestepcheckout-summary">.
<div class="onestepcheckout-summary">
<table class="onestepcheckout-summary">
<thead>
<tr>
<th class="name" colspan="2">Artikel</th>
<th class="qty">Stück</th>
<th></th>
<th class="total">Zwischensumme</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">
Simpel product </td>
<td class="editcart">
-
</td>
<td class="qty" nowrap="">
<input type="hidden" value="5" id="qty_46" name="cart[46][qty]" class="qtyinput" size="1">
5 </td>
<td class="editcart wider" nowrap="">
+
</td>
<td class="total">
<span class="price">€ 10,00</span> </td>
</tr>
</tbody></table>
<table class="onestepcheckout-totals">
<tbody><tr>
<td style="" class="a-right" colspan="1">
Zwischensumme </td>
<td style="" class="a-right">
<span class="price">€ 145,00</span> </td>
</tr>
<tr>
<td style="" class="a-right" colspan="1">
<strong>Gesamtbetrag</strong>
</td>
<td style="" class="a-right">
<strong id="total-price"><span class="price">€ 145,00</span></strong>
</td>
</tr>
</tbody></table>
</div>
dynamic content never got the click event :
for this you need to use on , bind and delegate:
i always prefer Delegate. Try This :
$("body").delegate(".wider", "click", function() {
alert('success');
return false;
});
You could try in such a way also
$(document).on("click", '.onestepcheckout-summary',function (event) {
// whatever u want ...
});
Change parent div classname also , it seems like both have same class name.
<div class="div-class">
<table class="table-class">
......
</table>
</div>
$('.div-class').on("click", '.onestepcheckout-summary',function (event) {
// whatever u want ...
});
First of all , please bear with me about my bad english :(
I am listing data in a table using for-each loop and above HTML will generate if use to slideToggle then it open fine.
but if another row open then last one still open , i want to open a new one but close previous.
function view_history_details ( ) {
$('#view-details').slideToggle();
}
<table>
<tr>
<td>
<a href="javascript:;" onclick="view_history_details()" title="View" data-keyboard="false" ></a>
</td>
</tr>
<tr style="display:none" class="view-details">
some text
</tr>
<tr>
<td>
<a href="javascript:;" onclick="view_history_details()" title="View" data-keyboard="false" ></a>
</td>
</tr>
<tr style="display:none" class="view-details">
some text
</tr>
<tr>
<td>
<a href="javascript:;" onclick="view_history_details()" title="View" data-keyboard="false" ></a>
</td>
</tr>
<tr style="display:none" class="view-details">
some text
</tr>
</table>
You can redesign the solution as below using jQuery event handlers.
We adds a class to the anchor elements which triggers the action, then use that class to register the click handlers. Inside the handler we toggles the next view-details row and hides all other view-details elements
jQuery(function($) {
$('.toggle').click(function(e) {
console.log(this)
e.preventDefault();
var $cur = $(this).closest('tr').next('.view-details').stop().toggle();
$('.view-details').not($cur).stop().hide();
})
})
.toggle {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
togggle
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
togggle
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
togggle
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
</table>
You need to pass particular control to your function so as to slideToggle only that control's view-details element as below:
function view_history_details (ctrl) {
$('.view-details').slideUp();
$(ctrl).closest('tr').next('.view-details').slideToggle();
}
and when calling function from td write it as below and pass this
<td>
<a href="javascript:;" onclick="view_history_details(this)" title="View" data-keyboard="false" ></a>
</td>
Repeat for all tds where view_history_details function call exists.
DEMO
function view_history_details (ctrl) {
$('.view-details').slideUp('fast');
$(ctrl).closest('tr').next('.view-details').slideToggle('slow');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
View Details
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
View Details
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
View Details
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
</table>
I have a table that I want to give the user the ability to select. I added an button, value="Update", to the beginning of the row, and assigned an onclick value. My problem is that I want to send other items(in td>s on the same row) from the row to the function called by the button.
How do I get the information from the row the button is on? I would like to pass the "Name" and "Last Update Time" to the function the button calls. I tried using the following:
$("#Report input[name=btn_id]").closest('td').attr('text')
but it returns "undefined," which I am not surprised by, as I think this is due to it not knowing what row of the table to pull from.
Here is a view of the table:
Here is the code behind the table:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateAppRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Any help would be appreciated.
Embrace the power of this.
Using:
onclick="UpdateRec(this)"
..in your function:
function UpdateRec(el) {
var targetRow = $(el).parents('tr')
...
}
Using this passes a reference to the clicked element. You can then use jQuery to select the parent table row. From there you can use .find() to select anything in that row.
Another way to do this would be to use HTML5 data- attributes on this button itself:
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)" data-appName="something" />
In the same function you can then use $(el).data('appName') to get the value directly without looking up values in other DOM elements.
//Add a click listener on all your buttons using event delegation
$('#Report').click(onUpdateButtonClicked, 'input[name=btn_id]');
function onUpdateButtonClicked() {
var rowValues = $(this)
.parent() //select parent td
.nextAll() //select all next siblings of that parent td
.map(function () { //loop through the tds, collecting their text value
return $(this).text();
}).get(); //return the result as an array
//do what you want with rowValues
}
I would suggest you to use common class for all update buttons with common click event handler.
Here is the fiddle: http://jsfiddle.net/jwet6z6x/
HTML:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Javascript:
$(".updateBtn").click(function(){
var name = $(this).parent().parent().find('td').eq(1).html()
var time = $(this).parent().parent().find('td').eq(4).html()
alert (name);
alert (time);
})
I would do as follow : http://jsfiddle.net/Lk91cpup/2/
<table>
<tr id="row_1">
<td>
<input type="button" id="btn_row_1" class="btn" value="Update">
</td>
<td id="text_row_1">Test1</td>
<td>None</td>
<td>Desktop</td>
<td >2014-06-30 18:22:39</td>
</tr>
<tr id="row_2">
<td>
<input type="button" id="btn_row_2" class="btn" value="Update">
</td>
<td id="text_row_2">Test2</td>
<td>None</td>
<td>Server</td>
<td>2014-03-30 16:20:15</td>
</tr>
</table>
And Javascript
$(document).ready(function(){
$(".btn").click(function(){
var id = this.id.substring(this.id.lastIndexOf("_") + 1);
alert($("#text_row_" + id).text());
});
});
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1, 'Test1', 'None', 'Desktop', '2014-06-30')">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
Since you have already written a javascript function call why not just include the things you need right?
This is simplier but not the best practise.