I have an add-row button. On its click I am adding a row into my datatable.
$('.add-row').on('click', function() {
id = 0;
name = $('#name').val();
email = $('#email').val();
cno = $('#cno').val();
bdy = $('#bday').val();
t.row.add([
name,
email,
cno,
bdy,
'<button class ="btn btn-danger del">Delete</button>' + '' + '<button class="btn btn-warning upd" data-id="'+$('#example').DataTable().rows().count()+'">Edit</button>'
]).draw(false);
$("#name").val('');
$("#email").val('');
$("#cno").val('');
$("#bday").val('');
});
In the above code, I am using data-id and adding row id to it. On my edit button click I am getting the data-id value.
$("body").on("click", ".upd", function(e) {
const id = $(this).attr("data-id");
console.log(id);
// Prevent event propagation
e.stopPropagation();
var $row = $(this).closest('tr');
var data = t.row($row).data();
//alert('Edit ' + data[0]);
name = data[0];
email = data[1];
cno = data[2];
bdy = data[3];
console.log(name);
console.log(email);
console.log(cno);
console.log(bdy);
$("#name1").val(name);
$("#email1").val(email);
$("#cno1").val(cno);
$("#dob1").val(bdy);
$("#myModal").modal('show');
});
The above code takes input data from modal. In my modal I have a save button having id btnsubmit. Now on this button click, I want to pass my data-id.
$("#btnsubmit").on('click',function () {//in this event i want to pass the `data-id`
var new_name = $("#name1").val();
var new_email = $("#email1").val();
var new_cno = $("#cno1").val();
var new_dob = $("#dob1").val();
$("#myModal").modal("hide");
});
How can I pass the value of data-id in it?
Any help would be highly appreciated.
you could stock your data in html modal like this:
$("#myModal").data('id', id);
and use:
var id = $("#myModal").data('id');
Related
This question already has answers here:
Getting values of elements in same row when button is clicked, one button per row
(2 answers)
Closed last year.
I have this function which creates a table in a modal popup and the table gets populated from data in an array passed in from an ajax call. Now on the click of a button in the modal popup I need to get the value of item.TimedPathwayID that has its radio button checked and add it to a hidden field.
function PopulateTimedPathwaysTable(tblData) {
var tbody = $('#tblTimedPathways tbody');
$.map(tblData.d, function (item) {
tr = $('<tr></tr>');
tr.append('<td class="pathwayID">' + item.TimedPathwayID + '</td>');
tr.append('<td>' + item.TimedPathwayName + '</td>');
tr.append('<td><input type="radio" class="radioSelection" name="timedPathwaySelection"" />');
tbody.append(tr);
});
$('input[name=timedPathwaySelection]:first').attr('checked', true);}
}
I've been fiddling with this kind of thing but with no joy and the radio button in the first row is checked by default so this can't really be tied to a click event if a user just accepts the default without clicking. So how can I do it please?
$('body').on('click', '.radioSelection', function () {
var $tbl = $('#tblTimedPathways tbody');
var $dataRow = $tbl.closest('tr');
var id = $dataRow.find('td').eq(0).html();
});
.closest goes up the html tree, so tbody.closest(tr) is unlikely to be what you want.
you need to then go back down to the cell that contains the data you want.
let $this = $(this); //this is the radio button
let id = $this.closest("tr").find("td.pathwayID").text();
I would also echo that I would generally add the id as an attribute to the row to remove the necessity of the find later.
//sample data
let data = {
d: [{
TimedPathwayID: 1,
TimedPathwayName: "test"
},
{
TimedPathwayID: 2,
TimedPathwayName: "test"
},
{
TimedPathwayID: 3,
TimedPathwayName: "test"
}
]
};
function PopulateTimedPathwaysTable(tblData) {
var tbody = $('#tblTimedPathways tbody');
$.map(tblData.d, function(item) {
tr = $('<tr></tr>');
tr.append('<td class="pathwayID">' + item.TimedPathwayID + '</td>');
tr.append('<td>' + item.TimedPathwayName + '</td>');
tr.append('<td><input type="radio" class="radioSelection" name="timedPathwaySelection"" />');
tbody.append(tr);
});
$('input[name=timedPathwaySelection]:first').attr('checked', true);
}
//populate it
PopulateTimedPathwaysTable(data);
$('body').on('click', '.radioSelection', function () {
let $this = $(this); //this is the radio button
//console.log($this);
let id = $this.closest("tr").find("td.pathwayID").text();
console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTimedPathways">
<tbody>
</tbody>
</table>
What i accomplished now is when i clicked "add to my stay" button, it will display the name and price data and it will automatically switch to remove button and then click again for another addon to display another name and price data. Now if i press the remove button of the 1st "add to my stay" it will delete both data on each button that i pressed adding. My goal is to remove a data based on its button ID like i want to remove The data on my 1st "Add to my stay" button it will only delete the 1st data
MY JS CODE FOR REMOVE it is outside the (document).ready
function Remove(id) {
console.log("call remove");
$('li.price').each(function (index, object) {
var id2 = $(object).data('addon-id');
console.log(id);
if (id2 === id2) {
$(object).remove();
}
});
$(this).addClass('is-hidden');
$('.addons[data-addon-id="' + id + '"]').removeClass('is-hidden');
}
My code for getting the data on add to my stay button
$(document).ready(function(){
$(".addons").on("click", function(event) {
event.preventDefault();
var $this = $(this);
var id = $(this).data('addon-id');
name = $(this).data('name');
price = $(this).data('price');
console.log(id);
$(this).addClass('is-hidden');
$('.removebtn[data-addon-id="' + id + '"]').removeClass('is-hidden');
if(id != '')
{
$.ajax(
{
type:"POST",
url : "Pages/addonajax",
data:{id:id,
name:name,
price:price},
success:function(data)
{
console.dir(data);
if (data) {
var item = $('<li data-itemprice="'+price+'" class = "price">'+name+' : '+price+'</li>');
$("#test1").append(item);
Total();
}
else {
}
}
});
}
});
My code on the button
<button data-name = "Airport Transfer" data-price = "4300" class="addons addon-btn trans_200" data-addon-id ="1">ADD TO MY STAY</button>
<button class="removebtn remove-btn is-hidden trans_200" data-addon-id ="1" onclick="Remove(1)" value="Remove">Remove</button>
Your problem is here:
if (id2 === id2) {
$(object).remove();
}
id2 will always be equal to itself, and therefore you will always call $(object).remove();
You need to compare id2 to id
if (id2 === id) {
$(object).remove();
}
EDIT
You also have a problem in your loop of the list items:
var id2 = $(object).data('addon-id');
Your list items do not have a data-addon-id attribute
Put a data-addon-id on the list item when you create it:
var item = $('<li data-addon-id="' + id + '" data-itemprice="'+price+'" class = "price">'+name+' : '+price+'</li>');
$("#test1").append(item);
I have dynamically generated button that comes from ajax call
html += '<button type="button" class="btn btn-primary buy-s-product" data-price="'+ json.result[key].price +'" data-productname="'+ json.result[key].product_name +'" data-productid="'+ json.result[key].product_id +'">Buy</button>';
Each product has its own details but button is same for all of them.
how can I make such that once the button is clicked for the current product, it will execute only one time and no more for current product?
this is what I have attempted:
$(document).on('click', '.buy-s-product', function(){
var product_id = $(this).data('productid');
var product_name = $(this).data('productname');
var price = $(this).data('price');
$('#input-order').trigger('change');
});
You can add a class to the button when it's clicked and adjust the selector to exclude elements with this class:
$(document).on('click', '.buy-s-product:not(".clicked")', function(){
console.log('clicked');
var product_id = $(this).data('productid');
var product_name = $(this).data('productname');
var price = $(this).data('price');
$('#input-order').trigger('change');
$(this).addClass('clicked');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="buy-s-product">TEST</button>
I've a javascript that goes through for loop, make table in HTML page and then calls specific function to update specific values for that user.
function getUsers() {
//get all users as "parsedJSON" array
for (var i=0; i<countrows; i++ ) {
row.insertCell(0).innerHTML = parsedJSON[i].samaccountname;
row.insertCell(1).innerHTML = parsedJSON[i].givenname;
row.insertCell(2).innerHTML = parsedJSON[i].surname;
var userName = parsedJSON[i].samaccountname;
row.insertCell(3).innerHTML = "<button id='userName' onclick = 'updateUser(this.id)'> ActionUser</button>";
}
}
function updateUser(userName) {
//Function with about 30 lines to update user
}
Now, my question is: How can I know, which specific user's button was clicked and how can I pass its username to updateUser function?
Thanks in Advance
Here
var userName = parsedJSON[i].samaccountname;
row.insertCell(3).innerHTML = "<button id='userName' onclick = 'updateUser(this.id)'> ActionUser</button>";
You are actually assigning the string "userName" into the button instead of passing the value of userName, so your code should be
row.insertCell(3).innerHTML = "<button id='" + userName + "' onclick = 'updateUser(this.id)'> ActionUser</button>";
For identifying the clicked button, since you are passing the button's id to the updateUser function, you can use document.getElementById to get the clicked element.
function updateUser(userName) {
var clickedButton = document.getElementById('username');
// This will work if this function is guaranteed to only be used by HTML element
var thisButton = this;
}
I want to give an id to each row in HTML, and when I enter that value into textbox, I want jquery to delete that row.
I have built this fiddle
http://jsfiddle.net/vYAq9/3/
$(document).ready(function(){
$("#addbutton").click(function(){
var uniqueid = $("#textbox1").val();
var text = $("#textbox2").val();
$("<tr><td>row content</td></tr>").val(uniqueid).html(text).appendTo("#table1");
});
$("#removebutton").click(function(){
var uniqueid = $("#textbox1").val();
//I want to find row with uniqueid, and remove it from the table
});
});
$(document).ready(function () {
$("#addbutton").click(function () {
var uniqueid = $("#textbox1").val();
var text = $("#textbox2").val();
$("<tr id=" + uniqueid + "><td>row content</td> </tr>").html(text).appendTo("#table1");
// instead of value add an id | tr does not have a value!
});
$("#removebutton").click(function () {
var uniqueid = $("#textbox1").val();
$('#' + uniqueid).remove(); // use id to delete row with the same id
});
});
FIDDLE
JSFIDDLE DEMO
$("#removebutton").click(function(){
var uniqueid = $("#textbox1").val();
$('#' + uniqueid).remove();
//I want to find row with uniqueid, and remove from table
});