Develop Reference

Click on button first time show alert, click second time execute code

I want to show users, when they click on a button for the first time, an alert when in a date field a value is chosen which lies before the current date. When they insist to this choice for good reasons, I want them to give a second chance to click on the same button, and then the value has to be submitted.
The click event is defined in a function:
$("#edit_date_btn").click(function(){
// do something and save
}
In an other function the comparing is handled. The basic code is:
function edit_date_compare() {
....
if(usersDate < today)
{ //show alert
return false; // needed for the first click so the input is not submitted
}
I've tried several options e.g. with a count on the click function (on a second click 'return true;' instead of 'return false;') but it seems difficult to handle this situation. Any ideas how to make this successful? It could be with Javascript or jQuery.

You have the right idea with the count on the click function. I suspect you might have difficulty implementing it. You need a separate variable that tracks the number of clicks. Here's a working fiddle: http://jsfiddle.net/zwmquxaL/
$(document).ready(function () {
var clickCount = 0;
$("#btnSave").click(function () {
if (clickCount > 0) {
AlertSave();
} else {
AlertFirst();
clickCount++;
}
});
});
function AlertSave() {
alert("Some code has been executed!");
}
function AlertFirst() {
alert("Are you sure you want to perform this operation?");
}

Call a method once, only if button is clicked (atleast once)

I would like to call loadNext() method only once, if any of the other buttons are clicked at least once.
I have checked out: Calling a Method Once
For example, I am making a quiz app, having question and some options for each question types.
User will select an option and hit on next button to load the next question(with options), (those are predefined in an array). loadNext() shouldn't be called multiple times even if the options are clicked more than once (to prevent this I avoided calling loadNext() inside onclick method of those options(buttons), and also wont load if none of the options are selected,
and my idea is something like pre-defining isClicked as false, and inverting inside onclick method of those options, but that is not working.
What I have done, so far:
var optButtons = $(".opt button");
var isClicked = false;
optButtons.click(function () {
isClicked = true;
console.log("clicked on opt buttons: " + this.id);
console.log("Current button is: " + this.id + " set as active");
//other stuffs
});
//some other stuffs
if (isClicked) {
console.log("Clicked once!");
//other stuffs
loadNext();
} else {
alert("Please select an option");
//browser is alerting very first time after opening `index.html` file
// and Next button click isn't working after that
}
Any instruction will be appreciated, thanks in advance!
I am new in JS.

How about something of the sort, assuming you have an id="next" for your Next button
$("#next").on('click',function(){
if(isClicked){
loadNext();
// Set isClicked to false to reset mechanism
isClicked = false;
}
});
Would this be what you' re looking for ? I understood it this way

you are logging to console when the option buttons are clicked, and that is Ok, but in the onClick listener for the next button, check if the only one option is clicked or not.. and you can create a variable in global scope to check how many
times the next button is clicked, code snippet is
//function called on clicking the next button
function abcd(){
counter++;
if(counter!=-1){
return;
}
else{
//call the loadnext()
}
}

I guess you have your answer with radio buttons. You can try 'radio buttons' for the options. There are enough and more references online. Please let me know if that doesn't suit your requirement.

trouble with table of clickable buttons that needs to prevent double clicks on focused button while keeping the following ones clickable

I have a list of clickable buttons and use a flag variable to prevent a double click on the focused button. The flag works and I get the intended alert saying 'you have already clicked that'. The problem is that the following button will be treated as if it has also already been clicked and I'll get the alert again. I don't want this.
var _clickFlag = true;
/* #Volunteers is a table. Each row on the table has a button that says "accept",
I pass the function the 'event' object which I use to get specific data from that table
row and send it to a database*/
$('#Volunteers').on('click','#accept', function(event){
//if clickFlag = true then the button hasn't been clicked yet.
if(_clickFlag){
//here I send some stuff to a database. I don't want to send it twice for the same
//row, which is why I need to prevent a double click
//set clickFlag to false to prevent double submission
_clickFlag = false;
}else{
//alert if the button has been clicked once already
alert("already accepted");
}
});

Just use this:
$( "#Volunteers").unbind( "click" );
This will just make the button unclickable.

double click is a separate event, I assume you are talking about clicking the button more than once, if that is the case your variable that you defined is in the outer context is shared to all button, what you need is to define a variable inside the function and tie it to the button itself, try the below:
http://jsfiddle.net/4JFtw/
$('#Volunteers').on('click','.accept', function(event){
//if clickFlag = true then the button hasn't been clicked yet.
if(typeof this._clickFlag != 'undefined' && this._clickFlag){
//alert if the button has been clicked once already
alert("already accepted");
}else{
//here I send some stuff to a database. I don't want to send it twice for the same
//row, which is why I need to prevent a double click
alert('_clickFlag: '+this._clickFlag + ' First time processing!');
this._clickFlag = true;
}
});

In these situations I like to use attributes, ex:
$('some-button-here).attr('data-active','false') // This sets the attribute for that button
You can then check this attribute everytime one of the buttons is clicked.

Javascript function only executing one line

I've got a div that starts out as hidden, and shows up when a button is clicked. There is another button on the div, and the onclick event calls this function:
function popuppage2OK() {
alert("you clicked ok!");
var x = new Object();
x.name = $("#boxforname").val(); //this is a text input
x.option = $("#boxforoption").val();//this is a text input
alert("hiding newfactorpage2");
$("#popupform").hide(); //this is a div containing the text inputs and the button with the onlcick event that calls this function
alert("popupform hidden");
displaystuff(); //another function ive written that needs to be called
alert("this is after the display attempt");
}
My probelm is that the only line that seems to execute is the line to hide the div. None of the alert boxes appear, and the displaystuff() function doesn't get executed, but the div does go back to being hidden. Any thoughts on why lines of code might get skipped like that?

When do you attach the eventhandler to the button inside the div ?
You should do it after the page has done loading, so in Jquery you can do something like:
$(document).ready(function () {
//attach the eventhandler here
})

Usually this kind of behavior happens when you've got an error in your javascript. Check to ensure that all of your selectors are valid and that there aren't any errors elsewhere.

jQuery/Javascript confirm coming up twice

For some weird reason i'm getting my confirm box coming up twice. here is my code:
$(".DeleteComment").live("click", function(){
var CommentID = $(this).attr("rel");
var confirm
if (!confirm('Are you sure you want to permanently delete this comment?')){
return false;
}else{
$(this).html("loading").css("color", "#999");
//AJAX HERE
return false;
}
});

Do you load any content dynamically (via ajax)? It could be the case that the click event is bound to the same element twice resulting in the double confirmation.

It happens when we bind event on the elements which are loaded dynamically via AJAX
So for example we are loading some dynamic html content (e.g. dynamic content in modal) on click of the edit form button,
And in that content if we have binded click event on some button e.g. delete button, then every time we click on edit form button, it binds the click event to delete button every time,
And if you have set confirm box on click event of delete button then, it will ask you as many time as it was binded for that click event means here if we have clicked edit form button 5 times then it will asks for your confirmation 5 times.
So for solving that issue you can unbind the event every time before binding event to dynamically loaded element as following :
$(document).off('click', '.DeleteComment').on('click', '.DeleteComment', function () {
if (confirm('Are you sure you want to permanently delete this comment?')){
//Delete process
return true;
}
return false;
}
Or Another way to solve this problem is to add your script in main page, means static page not in dynamically loaded one.

try this:
$_blockDelete = false;
$(".DeleteComment").live("click", function(event){
event.preventDefault();
//event.stopPropagation(); // it is not necessary
if (!$_blockDelete)
{
$_blockDelete =true;
var rconfirm = confirm('Are you sure you want to permanently delete this comment?');
if (rconfirm)
{
$(this).html("loading").css("color", "#999");
var CommentID = $(this).attr("rel");
//AJAX HERE
//return the value "false" the variable "$_blockDelete" once again ajax response
}
}
});

Did you try removing that not-used var confirm?