Change the value of button - javascript

In my html page I'm having one div element as subbutton. In javascript I'm appending button to this div element.
$.each(responseObj.me, function (i, me) {
$('#subbutton').append('<input type="button" value=subscribe id="subscribe" background-color="green" onclick="">'+'</input>');
var subscribe=check();
function check()
{
if(responseObj.me[i].isSubscribed==="false")
{
document.getElementById("subscribe").value="I Trust";
$('#subbutton').click(function() {
sub(text);
document.getElementById("subscribe").value="Trusted";
});
}
else
{
document.getElementById("subscribe").value="Trusted";
$('#subbutton').click(function() {
unsub(text);
document.getElementById("subscribe").value="I Trust";
});
}
}
But the problem is when I click on the button first time, it's able to subscribe if it's not subscribed and able to unsubscribe if it's already subscribed. But if again I want to subscribe who is unsubscribed then it's not unsubscribed.sub(text) is a function used to subscribe person and unsub(text) is a function to unsubscribe person.

you can use,
$(document).on("click",".subscribe",function(){
//your code here
});
i created a jsfiddle. just check it out whether that is your aim
http://jsfiddle.net/2dAf9/

is you are calling check method more than one time??
then instead of using $('#subbutton').click() you have to use $('#subbutton').unbind("click").bind("click",function(){});
because it will not clear the click event it first initialized. it will call both funcitons.
try this way

Related

How to remove the event listeners of all buttons when only one is clicked

I'm doing a quiz app, and when the user picks an answer, I want to display the next question. The thing is, the event listener on the other buttons are not removed, only the button the user clicked (using once:true). Is there a way that I can remove all event listeners on the other buttons when only one of them is fired?
Here is my code:
function enableButtons(correctAnswer) {
btns.forEach((btn) => {
btn.addEventListener(
'click',
function () {
if (checkAnswer(btn.textContent, correctAnswer)) {
btn.classList.add('correctAnswer');
} else {
btn.classList.add('wrongAnswer');
}
setTimeout(function () {
removeBtnClasses(btn),
nextQuestion()
}, 2000);
},
{once: true}
)
})
}
You can write removeEventListener method.
A guide for removeEventListener :
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
And I am not sure about second method but I think you can add disabled attribute to the button, I haven't worked with DOM for long time so I don't remember if second method would work.

On click with 2 ids update the .map() array jquery

How to update the .map(maped) array on second button click. What i need to Archive is on second button click update the array.
I need to watch for changes then call the .map() again.
$("#send, #more_column").click(function(e) {
if (this.id == 'more_column') {
console.log("Second button click"); //im inside second button click
// here i need to update the device_id[] array add one more item to array or more
}
device_id = $('input:enabled[name="device_id[]"]').map(function() {
return $(this).val(); // $(this).val()
}).get();
});
How can i update the device_id array when second button is clicked.
If the second button is clicked more then once again update the device_id array.
Any ideas ?
Mixing event handlers doesn't make sense in this scenario. It's much better to keep the code simple, so have an event handler for the add button and an event handler for the send button, and make the add button also call the send handler...
function send() {
device_id = $('input:enabled[name="device_id[]"]').map(function() {
return $(this).val(); // $(this).val()
}).get();
}
function add() {
// add whatever you need to add here
// execute the "send" handler...
send();
}
$("#send").on("click", send);
$("#more_column").on("click", add);

OR condition for running function

I have button (".moreAlertsBtn") that run function when user click on it
I would like to run the same function if user click on another button that contain the id "#alertsBtn"
how do I add OR condition?
$(document).on('click','.moreAlertsBtn',function() { }
also - inside the function, can i add contision if user click on the first button and another if he click on the second?
Just separate them using comma(,) like this:
$(document).on('click','.moreAlertsBtn, #alertsBtn',function() { });
can i add condition if user click on the first button and another if
he click on the second?
$(document)
.on('click','.moreAlertsBtn, #alertsBtn',function() {
if($(this).hasClass('moreAlertsBtn')) {
//.moreAlertsBtn clicked
} else {
//#alertsBtn clicked
}
});
how do I add OR condition?
You can use the comma, which in CSS is "or" (but keep reading):
$(document).on('click','.moreAlertsBtn, #alertsBtn',function() { });
But:
also - inside the function, can i add contision if user click on the first button and another if he click on the second?
If you're going to do that, then it makes more sense to use separate handlers:
$(document).on('click','.moreAlertsBtn',function() { });
$(document).on('click','#alertsBtn',function() { });
But answering the question, yes, you can tell like this:
if (this.id === "alertsBtn") {
// It's #alertsBtn
} else {
// Must be .moreAlertsBtn
}
E.g.:
$(document).on('click','.moreAlertsBtn, #alertsBtn',function() {
if (this.id === "alertsBtn") {
// It's #alertsBtn
} else {
// Must be .moreAlertsBtn
}
});
That works because jQuery will call your handler with this referring to the DOM element you "hooked" the event on (even when you're actually doing delegation, as you are in your examples).
You can use comma in-between selectors as follows :
$(document).on('click','.moreAlertsBtn,#alertsBtn',function() { }

Call a function in javascript only after page load

I have a button that is set up to call a javascript function to automatically activate a "tab" on a page. When that tab is loaded, there are subtabs that display. I am trying to set it up so that one of the subtabs is also automatically activated when the button is clicked.
Currently I can get the first tab to select, but I can't get the subtab to select. #detailsTab is the id of the first tab. #personal-information is the id of the subtab I am trying to select.
The following is what I have.
This is all in the same file:
HTML:
<button class="button button--primary button--sm" onclick="viewDetials()">View Details</button>
Javascript:
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
window.onload = function personalSubTab() {
$("#personal-information").click();
}
</script>
Try combining your functions and adding a short delay for the subtab.
function viewDetials() {
$("#detailsTab").click();
setTimeout(function(){
$("#personal-information").click();
}, 200); // This value can be tweaked
}
The following will be called when the document is ready.
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
function personalSubTab() {
$("#personal-information").click();
}
// Document ready
$(function () {
personalSubTab();
});
</script>
I'm not exactly sure what you want to do - but if you want to generate a click event on another button/div use trigger, not click - like this:
function personalSubTab() {
$("#personal-information").trigger('click');}

Prevent certain functionality based on element clicked

I've got a button .btn-1 that when clicked also triggers click on .btn-2 I can't think of a way to do the following: when .btn-2 is clicked also trigger click on .btn-1 however in this case dismiss its functionality to trigger click on '.btn-2' to prevent infinite loop. Is there a way to achieve this?
You can pass additional data to your handler using .trigger() method:
$('.btn-2').on('click', function(event, skip) {
// if the skip parameter is a truthy value
// don't trigger the event
if ( !skip ) {
$('.btn-1').trigger('click', [true]);
}
});
$('.btn-2').trigger('click', [true]);
you can use a boolean that switches:
var done=true;
$('.btn-1').click(function(){
$('log').html($('log').html()+'bt1 pressed<br>')
if(done){
done=false;
$('.btn-2').click()
}
done=true;
})
http://jsfiddle.net/2o3k5wet/
A more elegant way to do this:
$('.btn-1, .btn-2').on('click', function() {
// do common stuff
if ($(this).is('.btn-1')) {
// do stuff only for 1
}
// do common stuff
});

Categories