I want to change a button inside a td tag (see at the bottom an example).
var tableEntryButton = document.getElementById('slButton' + message.content[1])
delivers correctly the td element I am looking for:
<td id="slButtonAudi" data-value="false">
<button id="slButtonActive" class="btn btn-outline-success btn-sm" type="button" onclick="handleClickOnSSButton(this)">Start</button>
</td>
Here my function that should make the change possible.
Here I distinguish by the ID within the button tag what change I can apply (remove the current start/stop button and add the button with the opposite function)
var tableEntryButton = document.getElementById('slButton' + message.content[1])
let activeButton = '<button id="slButtonActive" class="btn btn-outline-success btn-sm" type="button" onclick="handleClickOnSSButton(this)">Start</button>'
let inactiveButton = '<button id="slButtonInactive" class="btn btn-outline-warning btn-sm" type="button" onclick="handleClickOnSSButton(this)">Stop</button>'
if (tableEntryButton.innerHTML.includes('slButtonActive')) {
tableEntryButton.removeChild(tableEntryButton.firstChild)
tableEntryButton.innerHTML = inactiveButton
}
else {
tableEntryButton.removeChild(tableEntryButton.firstChild)
tableEntryButton.innerHTML = activeButton
}
The if/else allocation works correctly.
It appears that only the changes within the if/else statement are somehow not being applied.
To clarify it here an example.
If this is given:
<td id="slButtonAudi" data-value="false">
<button id="slButtonActive" class="btn btn-outline-success btn-sm" type="button" onclick="handleClickOnSSButton(this)">Start</button>
</td>
it should be changed to that:
<td id="slButtonAudi" data-value="false">
<button id="slButtonInactive" class="btn btn-outline-warning btn-sm" type="button" onclick="handleClickOnSSButton(this)">Stop</button>
</td>
You are not using the innerHtml correctly.
I made you an example that will do exactly what you asked in your last example.
if (tableEntryButton.innerHTML.includes('slButtonActive')) {
//Get the children button.
let button = tableEntryButton.querySelector("#slButtonActive");
if (button) {
tableEntryButton.removeChild(button);
tableEntryButton.innerHTML += inactiveButton;
}
}
Here is the working fiddle:
https://jsfiddle.net/vrtfoh9q/20/
Some documentation:
https://plainjs.com/javascript/manipulation/append-or-prepend-to-an-element-29/
https://www.w3schools.com/js/js_htmldom_nodes.asp
Hope it helps!
you can access children by children property in HTML element and use innerHTML once time like this:
HTML
<div id="div1">
<button id="btn1Active">Active</button>
</div>
JS
let divTarget = document.getElementById('div1'),
child = divTarget.children[0],
btnActive = '<button id="btn1Active">Active</button>',
btnInactive = '<button id="btn1Inactive">Inactive</button>'
if (child.id == 'btn1Active') divTarget.innerHTML = btnInactive
else divTarget.innerHTML = btnActive
CodePen example
https://codepen.io/bragamonte/pen/PBLojZ
Related
I am new to JavaScript and was trying to figure our how to access data attribute values of dynamically generated buttons.
I was passing my ID coming from the Database to "data-id" attribute. Below is the dynamically generated code for my buttons
<button class='btn btn-sm btn-primary aButton' data-id='1234'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12345'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12346'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12347'></button>
Now i wanted to access these buttons onclick using jquery to perform some actions. Below is my code for that
$(document).on('click', '.aButton', () => {
let id = $(this).attr('data-id');
console.log(id);
})
The above console gives me "undefined" with the thick arrow function. When I tried to do the same with function () {}, it gave me the dynamic ID stored in the data attribute of the button.
What is happening with this? Is there a better approach to get a dynamic ID of button on click.
Thank you all in advance.
Have a nice day :)
When you use arrow function () => {} then jquery don't know what this refers to so use:
$(document).on('click', '.aButton', (e) => {
let id = $(e.target).attr('data-id') || $(e.target).closest('.aButton').attr('data-id');
console.log(id);
})
Demo
$(document).on('click', '.aButton', (e) => {
let id = $(e.target).attr('data-id') || $(e.target).closest('.aButton').attr('data-id');
console.log(id);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='btn btn-sm btn-primary aButton' data-id='1234'><i>testers</i></button>
<button class='btn btn-sm btn-primary aButton' data-id='12345'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12346'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12347'></button>
I have this button:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser}" onclick="deleteUser(this.value)">Delete</button>
That calls the function deleteUser once the button is clicked.
I would like to know how to send more than one value at the same time.
For example, if I want to send the idUser and the userName, how can I do it?.
I tried this but it's not working:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser, usr.userName}" onclick="deleteUser(this.value)">Delete</button>
I expect to receive the values in the same jsp page:
function deleteUser(val1, val2) {
alert(val1);
alert(val2);
}
You can simply pass your values under your function under '' quotes else it will give you error not defined.So your button code will look like below :
<button type="button" class="btn btn-danger" value="something" id="deleteuserbtn" onclick="deleteUser(this.value ,'${usr.idUser}','${usr.userName}')">
Delete</button>
Demo Code :
function deleteUser(val1,val2,val3){
alert("val :"+val1 +" "+val2+" "+val3);
}
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="something" onclick="deleteUser(this.value,'${usr.idUser}','${usr.userName}')">
Delete</button>
This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 2 years ago.
Anyone can help me? this is my problem. When I tried to click the button using this function $(".btn_cellophane").on("click",function(){}); I did not get any response or even the error. I guess the onclick function is not working. Here's my code below.
METHOD CALLING
$(".btn_cellophane").on("click",function(){
alert("Tester true");
if($(this).hasClass("btn-warning")){
$(this).removeClass("btn-warning");
$(this).addClass("btn-success");
// add_amount_for_cellophane();
}else if($(this).hasClass("btn-success")){
$(this).addClass("btn-warning");
$(this).removeClass("btn-success");
// add_amount_for_cellophane();
}
});
CONTENT DISPLAY
var html_cellophane = "";
$.each(data, function(key,product){
$.each(product.sizes, function(pro_id,variant){
if(variant.prod_type == 1){
var label = (variant.size+" "+variant.unit).toUpperCase();
var var_id = variant.variant_id;
var price = variant.price;
html_cellophane += '<div>'+
'<label>Cellophane ('+price+' pesos)</label>'+
'</div>'+
'<br/>'+
'<div style="width: 100%;">'+
'<button type="button" class="btn btn-warning btn_cellophane" id="cp_id_btn" data-var_id="'+var_id+'" data-qty="'+1+'" data-price="'+price+'">1</button>'+
'<button type="button" class="btn btn-warning btn_cellophane" id="cp_id_btn" data-var_id="'+var_id+'" data-qty="'+2+'" data-price="'+price+'">2</button>'+
'<button type="button" class="btn btn-warning btn_cellophane" id="cp_id_btn" data-var_id="'+var_id+'" data-qty="'+3+'" data-price="'+price+'">3</button>'+
'<button type="button" class="btn btn-warning btn_cellophane" id="cp_id_btn" data-var_id="'+var_id+'" data-qty="'+4+'" data-price="'+price+'">4</button>'+
'<button type="button" class="btn btn-warning btn_cellophane" id="cp_id_btn" data-var_id="'+var_id+'" data-qty="'+5+'" data-price="'+price+'">5</button>'+
'<hr>'+
'</div>';
}
});
});
$('.btn_cellophane_div ').html(html_cellophane);
You've created the button dynamically. So while you are attaching the event listener the element doesn't exists till then. So you have to use event delegation for working the click event.
Just change your event listener like this-
$(document).on("click",".btn_cellophane", function(){});
I have run a bit of problem with our user interface, here's my code:
I have a button here inside a
<button class="btn btn-info" type="button" id="btnSubmit" data-btn="{{ row[1] }}" data-id="{{ row[2] }}" data-toggle="modal" data-target="#myModal" contenteditable="false" disabled='disabled'> Pay</button>
I have been using row[2] from another function and it worked, so this time i used row[1] to evaluate data. The condition is that
when the row[1] of that row is empty the button would be disabled and would be colored to btn btn-danger and the text would be
made to "Paid" however thorugh my attempts I only made everything disabled or perhaps the last entry only as disabled. Here's my latest attempt:
<script type="text/javascript">
$(document).ready(function() {
var button = document.getElementById('btnSubmit');
var id = button.dataset.id;
$('#btnSubmit').attr('data-btn').onkeyup(function() {
if($(this).val() != '') {
$('#btnSubmit').prop('disabled', true);
}
else{
$('#btnSubmit').prop('disabled', false);
}
});
});
</script>
And its disabling all buttons. I just want the bytton to be enabled when its empty and disabled if its empty, and again as Ive said would be colored to btn btn-danger and the text would be made to "Paid" how do I do this in this case?
I've read the documentations and everything but it didn't work for some reasons. I also tried having an invisible input and getting its id but no luck. Please help
Okay... Assuming that data-bnt is the target element to check on keyup.
(I don't know what data-id is for...)
And that the target must not be empty to enable the submit button.
Then try this:
$(document).ready(function() {
var button = $('#btnSubmit');
var target = $('#'+button.data('btn'));
target.on("keyup",function(){
button.prop('disabled', ($(this).val() == '') ? true : false );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="targetID">
<button
class="btn btn-info"
type="button"
id="btnSubmit"
data-btn="targetID"
data-toggle="modal"
data-target="#myModal"
contenteditable="false"
disabled='disabled'> Pay</button>
I have total 3 elements
TextBox
DropDown
Button
What I want is... On Button Click It should Take the parameters from TextBox & DropDown and return the data on Button Click
this.html
<div class="input" div id="Searching"><input type="text" name="Search" id="Search" class="ContextualSearchField" placeholder="Search" size="40" value=""/></div>
<div class="dropdown">
<button class="dropbtn">Searchâ–¼</button>
<div id="myDropdown" class="dropdown-content">
<a id="Alert" type="button" class="btn btn-lg btn-default" href="#">Alert</a>
<a id="IR" type="button" class="btn btn-lg btn-default" href="#">Incident Report</a>
<a id="Site" type="button" class="btn btn-lg btn-default" href="#">Site</a>
<a id="Devices" type="button" class="btn btn-lg btn-default" href="#">Devices</a>
</div>
</div>
<button type="submit" onclick="SearchContext()" id="searchbutton">Search Now</button>
this.js
var Search = document.getElementById("Search").value;
alert(Search);
Dropdown = document.getElementById("myDropdown").value;
SearchButton = document.getElementById("searchbutton").value;
var Alert = document.getElementById("Alert").value;
var IR = document.getElementById("IR").value;
var Site = document.getElementById("Site").value;
var Devices = document.getElementById("Devices").value;
I have also created service for them in jquery.services.js
just tell me how to put those parameter on button
Just put an event listener on your button than do your things in this scope.
document.querySelector('.dropbtn').addEventListener('click',function(){
//do your required things in here. E.g:
var Site = document.getElementById("Site").value;
var Devices = document.getElementById("Devices").value;
});
If you want to put them in a element, just add parameter to element. E.g:
<button id="example" lang="tr" user-id="15" target="Search">Click me</button> and for take this parameters from JS, do like this with using HTML element function getAttribute():
var lang = document.getElementById('example').getAttribute('lang');
var user_id = document.getElementById('example').getAttribute('user-id');