Develop Reference

Issue in clicking links with window.onbeforeunload

I have a parent div content_div which contain form elements inside a table where user selects multiple row elements(clickable rows),download link elements etc.
I have a warning pop up for the user changes done and then try to refresh without clicking save button.
When I select a row and tried to click a download link inside that row,I dont need to show the warning popup.I have the following code but its not working.
If I dont select any rows and tried to click any download links,its not showing any popup,means thats fine.
If I select any rows and then try to click any download links,its showing me the popup which is wrong in my case.
If a user clicks on some other links outside my #content_div,its showing the popup which is true for me.
$(function() {
var formmodified = 0;
//click event for each row inside the table
$(".course_row").click(function(e) {
-- -- -
formmodified = 1; //setting the variable to 1 means user
has changed something inside the page
});
//when form submits
$("#submit").click(function() {
formmodified = 0; //assuming that form is saved after form change
});
//function for warning popup
window.onbeforeunload = confirmExit;
function confirmExit() {
var element_clicked = 0;
//#content_div is the main parent which contain the entire
contents.
$('#content_div').children().on('click', function(e) {
console.log('clicked');
element_clicked = 1; //means the clicked element is inside the #content_div which can be a link or other things
});
console.log(element_clicked);
EDIT: I am always getting element_clicked value as 0 when I click any element inside the div.The value 'clicked'
is showing.I dont know why the value
for the variable is not setting to 1
if (element_clicked) {
//element_clicked = false;
return; // abort beforeunload
} else {
if ((!element_clicked) && (formmodified == 1)) {
return "The selected courses are not saved.
Do you wish to leave the page ? ";
}
}
}
});
Please help me in this case.Thanks in advance

Just add click() event to anchor elements and unbind onbeforeunload event.
$("a").on('click', function() {
window.onbeforeunload = null;
});
This is just an example. You can add a class or id to the selector so that the event is unbinded only when clicked on a specific anchor tag.
For example
$("#content_div a").on('click', function() {
window.onbeforeunload = null;
});
EDIT
If you want to add onbeforeunload to refresh, you either have to do it when any change is trriggered ir just add event when F5 button is pressed.
To be honest I think that first solution is better, necause then even if user clicks refresh button in a browser the popup will come out.
So you would have to change your functionality.
If you do not want to. Here is a quick add to F5 button.
$(document.body).on("keydown", this, function (event) {
if (event.keyCode == 116) {
window.onbeforeunload = true;
}
});

jQuery - Bind click to specific Ajax content element

I have this form that loads using jQuery $.ajax another form inside a container.
The list:
The loaded content within the container called form_load_dropdown_content:
On the left I have two small icons for edit and add. I want to use another ajax call to run specific PHP scripts to carry on the action desired.
I have the following problem:
when I click on each icon submit and respectively reset buttons display
when I click on the reset the both submit and reset are set to display: none
when I click on any the icon again, the click remains bind to the previous icon clicked before.
This is what I am doing:
form_load_dropdown_content.on("click", ".icon", function() {
// reusable selectors
var icon_box = $(".box_edit_icons");
var button_box = $(".box_buttons");
var submit_btn = $(".box_buttons input[type='submit']");
var reset_btn = $(".box_buttons input[type='reset']");
var option_value_input = $("input.option_value");
var option_order_input = $("input.option_order");
// common functions
button_box.show();
icon_box.hide();
if($(this).hasClass("ico_edit_small"))
{
// editing
form_load_dropdown_content.on("click", "input[type='reset']", function(event){
alert("reset from edit");
button_box.hide();
icon_box.show();
});
}
else if($(this).hasClass("ico_add_small"))
{
// adding
form_load_dropdown_content.on("click", "input[type='reset']", function(event){
alert("reset from add");
button_box.hide();
icon_box.show();
});
}
How can I differentiate between the two clicks, so that when I display the submit and reset from a specific icon type to run differentiated actions?
More clear:
when I click icon_add_small and then reset => output: 'reset from add'
then when I click icon_edit_small and then reset => output: 'reset from edit'... and so on without mixing the clicks.
I truly appreciate any help. I tried everything regarding stopping the propagation of the click... but nothing worked.
-----------------------------------------------------------
Edit:
I changed the if part to the following code and it works. Should I expect any problems for unbinding the click?
if($(this).hasClass("ico_edit_small"))
{
// editing
reset_btn.off("click");
reset_btn.click(function(event){
alert("reset from edit");
button_box.hide();
icon_box.show();
});
}
else if($(this).hasClass("ico_add_small"))
{
// adding
reset_btn.off("click");
reset_btn.click(function(event){
alert("reset from add");
button_box.hide();
icon_box.show();
});
}

jQuery form getting submitted multiple times

I've made a simple lightbox implementation in my code. By Clicking on #makePayment link a lightbox is opened, and within that lightbox there is a form. When user clicks on #paymentDetailsConfrimLB to submit the form, I've just displayed an alert.
Before I explain the problem, please have a look at the code I've written:
$("#makePayment").click(function() {
$("body").addClass("modalPrint");
var lb = new LightBox("paymentDetailsLB", "675", "500");
lb.htmlObjRef.style.height = "auto";
lb.show();
$("#paymentDetailsCloseLB, .hideBox").click(function() {
$("body").removeClass("modalPrint");
lb.hide();
});//paymentDetailsCloseLB
$("#paymentDetailsConfrimLB").click(function( event ) {
alert('form submission happened.');
event.preventDefault();
return false;
});//paymentDetailsConfrimLB
return false;
});//makePayment
Problem is, when I first load the page, and open the lightbox, and click the submit button, the alert is shown once (as it should), but if I close the lightbox, re-open it, and then submit the form, it is submitted twice and alert is shown twice. Similarly if I again close and re-open the lightbox, upon form submission the alert shows up 3 times, and it goes on like this.
Any idea on how I can resolve this?

Other than Kavin's approach, another solution also worked for me. I just added this line immediately after the event.preventDefault() method:
event.stopImmediatePropagation()
And it resolved the issue.

You're setting click callback every time you open lightbox. Try to move click callbacks out of #makePayment:
$("#makePayment").click(function() {
$("body").addClass("modalPrint");
var lb = new LightBox("paymentDetailsLB", "675", "500");
lb.htmlObjRef.style.height = "auto";
lb.show();
return false;
});//makePayment
$("#paymentDetailsCloseLB, .hideBox").click(function() {
$("body").removeClass("modalPrint");
lb.hide();
});//paymentDetailsCloseLB
$("#paymentDetailsConfrimLB").click(function( event ) {
alert('form submission happened.');
event.preventDefault();
return false;
});//paymentDetailsConfrimLB

You're binding a new handlers every time the submit button is clicked. You only need to define a handler once, and it will be executed whenever that action occurs. Otherwise, each handler you bind will execute.
If you absolutely needed to bind the handlers the way you are, then you could also use .one, which will only bind the handler the first time for each element.
jQuery .one() documentation
Attach a handler to an event for the elements. The handler is executed
at most once per element per event type.
Try something like this.
$(document).on('click', '#makePayment', function() {
$("body").addClass("modalPrint");
var lb = new LightBox("paymentDetailsLB", "675", "500");
lb.htmlObjRef.style.height = "auto";
lb.show();
return false;
}).on('click', '#paymentDetailsCloseLB, .hideBox', function() {
$("body").removeClass("modalPrint");
lb.hide()
}).on('click', '#paymentDetailsConfrimLB', function() {
alert('form submission happened.');
event.preventDefault();
return false;
});

The problem is:
$("#paymentDetailsConfrimLB").click(function( event ) {
alert('form submission happened.');
event.preventDefault();
return false;
});//paymentDetailsConfrimLB
it adds to the click queue, so to speak. So if you add multiple click events to something, all of them get added and all of them run by default. You don't notice it because all your other functions don't matter about being run multiple times.
A way to solve this is to put a check within the function.
$("#paymentDetailsCloseLB, .hideBox").click(function() {
$("body").removeClass("modalPrint");
lb.hide();
});//paymentDetailsCloseLB
pDCLB=$("#paymentDetailsConfrimLB");
if(!pDCLB.attr('alertc')); //check if the attribute exists, if not, we've never been here before.
pDCLB.attr('alertc',1); //adds the attribute so we can check it later.
$("#paymentDetailsConfrimLB").click(function( event ) {
alert('form submission happened.');
event.preventDefault();
return false;
});//paymentDetailsConfrimLB
}

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.

confirm box more than one time appears

I am using ajax using jquery, I am deleting a row using the following code snippet:
$('#example a.delete'). live('click', function (e) {
e.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{
alert("Hello World!")
}
});
When I click grid view show button, grid view appears without page refreshing due to ajax. If I click grid view show button more than one time, it refresh again grid view area, accordingly. But confirm box show more than one time,which is equal to my no. of clicks on grid-view show button, when I click on a single row delete button.
How can avoid this !
Edited
HTML CODE:
<td><a class="delete" href="#" style="margin-left: 10px"><img src="images/delete-icon.png" width="16px" height="16px" /></a></td>
Edited
Complete Code Snippet:
$('#example a.delete'). live('click', function (e) {
e.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{
$getCode = $(this).parent().parent().attr('id');
var oTable = $('#example').dataTable();
var index =oTable.fnGetPosition( document.getElementById($getCode) );
$.post("DeleteDepartment", {
depID:$getCode
}, function(data) {
if(data.result >0){
var oTable = $('#example').dataTable();
oTable.fnDeleteRow( index );
}else{
alert("Operation Fail");
}
});
}
});

$('#example a.delete').unbind('click').bind('click', function (e) {
e.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{
alert("Hello World!")
}
});

You appear to be attaching multiple events to the button. Are you sure you're only calling live() ONCE, and once only? If you call it multiple times, you get multiple handlers.
(Of course, this is why I prefer to just use .onclick = function() {...} personally)

It looks like the code is written to do the confirm once for each click.
If you want it to confirm only once you have to make the code remember that you already confirmed.
The row is not deleted until the server calls your success callback function. During that time you can keep clicking on the row and firing the click event.
You could set a variable or a property on the row when the user confirms and then check this variable each time they click. Only show the confirm message if the variable is not set.
Or you could change the state of the element you click, change its image, change style, set an attribute. You could both inform your code that it has been clicked and indicate to the user that the row is already marked for deletion.
Or you could try jquery's .one() method to attach the event.