Click only one time on each dynamic generate element - javascript

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>

Related

Jquery how to pass value id from one event handler to another

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');

Fix row in table when pressing the button more than once with Jquery

This is the main page view:
When I press the "Pilih Staff" button at first time, a modal will appear. And when I check it, it will run normally like this image:
The results are still in line with expectations:
The problem occurred when I pressed the "Pilih Staff" button for the second time and so on. when I check another data, it will display duplicate data as much as I pressed the button. like this image:
Here my html code:
<tbody id="myTable">
</tbody>
And here my Jquery code:
$('input[type=checkbox]').click(function(){
$(this).each(function(){
var nik = $(this).data("nik");
var nama = $(this).data("nama");
var rs = $(this).data("rs");
var unit = $(this).data("unit");
var jabatan = $(this).data("jabatan");
if ($(this).is(':checked')) {
$('#myTable').append('<tr><td>'+nik+'</td><td>'+nama+'</td><td>'+rs+'</td><td>'+unit+'</td><td>'+jabatan+'</td><td><button type="button" class="btn btn-danger btn-sm btnDelete">Delete</button></td></tr>');
} else {
$('#myTable').closest('tr').remove();
// $("#myTable input[type=checkbox]:checked").closest("tr").remove();
}
});
});
Thank you..
This is because you are appending the data. Replace the old data with
the new one.
$('input[type=checkbox]').click(function(){
$(this).each(function(){
var nik = $(this).data("nik");
var nama = $(this).data("nama");
var rs = $(this).data("rs");
var unit = $(this).data("unit");
var jabatan = $(this).data("jabatan");
if ($(this).is(':checked')) {
$('#myTable').html('<tr><td>'+nik+'</td><td>'+nama+'</td><td>'+rs+'</td><td>'+unit+'</td><td>'+jabatan+'</td><td><button type="button" class="btn btn-danger btn-sm btnDelete">Delete</button></td></tr>');
} else {
$('#myTable').closest('tr').remove();
// $("#myTable input[type=checkbox]:checked").closest("tr").remove();
}
});
});

I am trying to remove Items from a list with an on-click, what am I missing?

I am trying to remove an item every time it is clicked on but only a single item at a time (the item that was clicked on) when trying to make a 'to-do' list. I can easily remove all simultaneously but I am having a lot of issues trying to do it at an individual level. I thought this would work but hoping to get a second set of eyes on it.
var toDoCount = 0;
var todoarray = [];
window.onload = function() {
//user clicked on the add button in the to-do field add that text into the to-do text
$('#add-to-do').on('click', function(event) {
event.preventDefault();
//assign variable to the value entered into the textbox
var value = document.getElementById('to-do').value;
//test value
console.log(value);
var todoitem = $("#to-dos");
todoitem.attr("item-");
//prepend values into the html and add checkmark, checkbox, and line break to make list
var linebreak = "<br/>";
var todoclose = $("<button>");
todoclose.attr("data-to-do", toDoCount);
todoclose.addClass("checkbox");
todoclose.text("☑");
//prepend values to html
$("#to-dos").prepend(linebreak);
$("#to-dos").prepend(value);
$("#to-dos").prepend(todoclose);
toDoCount++;
todoarray.push(value);
console.log(todoarray);
//to remove item from checklist
$(document.body).on("click", ".checkbox", function() {
var toDoNumber = $(this).attr("data-to-do");
$("#item-" + toDoNumber).remove();
});
});
}
HTML is below
<div class ="col-4">
<!-- To Do List -->
<form onsubmit= "return false;">
<span id = "todo-item" type = "text">
<h4>Add your Agenda Here</h4>
<input id ="to-do" type = "text">
<input id ="add-to-do" value = "Add Item" type = "submit">
</span>
</form>
<div id="to-dos"></div>
</div>
don't need the number, just the element.
change...
$("#item-" + toDoNumber).remove();
to...
$(this).remove();
e.g.
$(document.body).on("click", ".checkbox", function() {
$(this).remove();
});

Button Group Click Handler - How to get text content of clicked button?

I am trying to set up two button groups. A click on any button in the second group should add a new button to the first group. The new button shall get the same label as the clicked button.
var name = this.textContent works if the click handler is attached to a single button. How do you get the text content of the clicked button when the click handler is instead attached to a group of buttons?
HTML:
<body>
<div id="group1">
<button> nameA </button>
<button> nameB </button>
</div>
<hr>
<div id="group2">
<button> nameC </button>
<button> nameD </button>
</div>
</body>
Javascript:
$('#group2').on('click', function(event) {
var name = this.textContent // wrong!
var r = $('<input type="button" value="' + name + '">');
$("div#group1").append(r);
});
JSFiddle Demo
Use event delegation:
$('#group2').on('click', 'button', function(event) {
var name = this.textContent
var r = $('<input type="button" value="' + name + '">');
$("div#group1").append(r);
});
Second parameter in 'on' method can be selector string to filter the descendants of the selected elements that trigger the event.
Check this https://jsfiddle.net/q6b6g3xm/
In your case, this should be enought:
$('#group2 button').click(function(event) {
var name = this.textContent
var r = $('<input type="button" value="' + name + '">');
$("div#group1").append(r);
});
Prefer the RobHil solution if you other buttons will be created in #group2 after the execution of the jQuery code.
Else, I see two other possibilities:
$('#group2 button').each(function () {
var $button = $(this).click(function(event) {
var r = $('<input type="button" value="' + $button.text() + '">');
$("div#group1").append(r);
});
});
or:
$('#group2').click(function(event) {
var $button = $(event.target);
var r = $('<input type="button" value="' + $button.text() + '">');
$("div#group1").append(r);
});
But keep in mind the target depend on where you click if you have nested blocks in the clicked zone: https://api.jquery.com/event.target/
Here is my own approach to the problem. I modified HTML code a little by adding individual id to the buttons.
HTML:
<div id="group1" >
<button id="btn-A">nameA</button>
<button id="btn-B">nameB</button>
<button id="btn-C">nameC</button>
</div>
<hr />
<div id="group2">
<button id="btn-D">nameD</button>
<button id="btn-E">nameE</button>
<button id="btn-F">nameF</button>
</div>
JavaScript:
// click on the button
$(document).on('click','button', function(){
//store the value of the id and
// split it # '-' into array ['btn','A']
$id = $(this).attr('id').split('-');
// store the value at index 1 into $id
$id = $id[1];
//get the Id of the current div group
$divId = $(this).closest('div').attr('id');
//check which div group is current and
//Assign the reversed value as appropriate
if($divId === "group1"){
$addId = "#group2";
}else {
$addId = "#group1";
}
//Remove the button from the group
$(this).remove();
//Add the button to the second div group
$($addId).append('<button id="btn-'+$id+'">'+$(this).text()+'</button>');
});

Remove button in table row

I am working on a shopping cart application. I have used jQuery to fetch the items and display it in table format. Each item table contains a remove button to remove it from the cart. I have used the click function on the table to remove the item. But if I click on the qty field also the table is removed because its inside the table. I want the table to be removed when I click the remove button inside the table.
$(document).ready(function(){
$(".add_cart").click(function(){
var id = this.id;
$(this).prop("disabled",true);
$.get("cart.php",{
"id":id
},function(data){
$("#sam").append("<table id='"+id+"' class='tables'><tr><td>"+data+"</td><td><input class='remove' id='"+id+"' type='button' value='Remove'></td></tr></table><br>");
$(".remove").click(function(){
$(table.tables).remove();
$("#"+id).prop("disabled",false);
});
});
});
});
use this:
$("table.tables").remove();
Try
$(document).ready(function () {
$(".add_cart").click(function () {
var id = this.id;
$(this).prop("disabled", true);
$.get("cart.php", {
"id": id
}, function (data) {
$("#sam").append("<table id='" + id + "' class='tables'><tr><td>" + data + "</td><td><input class='remove' type='button' value='Remove'></td></tr></table><br>");
});
});
//use event delegation
$("#sam").on('click', '.remove', function () {
//get the table which contains the button
var $tbl = $(this).closest('tr').remove();
//get the id of the table instead of the id variable
$("#" + $tbl.attr('id')).prop("disabled", false);
});
});
Note that the Id of an element must be unique, you have a table and a button with the same id... remove the id from the button

Categories