Develop Reference

Prevent double click of some element

I have a clickable <td> which does some action. However, strange things happen when I quickly make double click. Thus, I want to prevent it and make sure it is only single clickable event.
$.each(response, function(index) {
$('#myID').append('<tr><td onclick="select(this)" >'+ response[index] +'</td></tr>');
});
function select(element){
...
}
I tried to use jQuery's .one() function, but this code above is a product of another event. So, I cannot use $(document).ready(); here. In my knowledge I have to make it like onclick="select(this)"... And it works. But here I need to disable double clicking.
Any help?

So add a check that the Ajax request is active....
function select(element){
var elem = $(element);
if(elem.hasClass("active")) { // is ajax call active?
return false;
}
elem.addClass("active"); // set it that it is active
$.ajax({
url: "foo"
})
.done(function(){})
.always(function(){
elem.removeClass("active"); // call is done, so remove active state
})
}

You can simply disable button until ajax finishes its operation
function select(element){
$(element).prop('disabled', true);
$.ajax({
url'url',
success:function(response){
$(element).prop('disabled', false);
}
});
}

Cannot disable Twitter bootstrap button with jQuery?

I am doing some AJAX when a button is clicked
$btn.button('loading');
$.ajax({
type: 'PUT',
url: 'event/',
data: put_data,
dataType: 'json',
success: function(data){
if (data.redirect) {
window.location = data.redirect;
}
else {
$btn.button('reset');
if ($btn.is('#my-btn')) {
console.log('disabling button');
$btn.prop('disabled', true);
}
}
}
});
disabling button shows up in the console, but the button does not get disabled. Loading and resetting the button works just fine. I tried .addClass('disabled') and .attr('disabled','disabled'), but those also don't work.
See here: http://codepen.io/anon/pen/Wvbeeg

The problem is that button('reset') is asynchronous. You can watch the changes live in the html an see they aren't immediate
A short delay after reset resolves the problem, but personallly i would just code this whole process myself instead of using the bootstrap API
$(document).ready(function() {
$('#mybutton').click(function() {
var $btn = $(this);
$btn.button('loading');
setTimeout(function() {/// mimic ajax delay
$btn.button('reset');
setTimeout(function() {// short delay after reset
$btn.prop('disabled', true);
}, 200);
}, 1000);
});
});
DEMO

Remove:
$btn.button('reset');
For some reason, this doesn't evaluate until after you disable it. (It's asynchronous)
Rather than resetting the button using the 'reset' code, it might be better to just remove the disabled property if it exists. That will effectively enable the button if it should be active.
Modified code:
$btn.button('loading');
$.ajax({
type: 'PUT',
url: 'event/',
data: put_data,
dataType: 'json',
success: function(data){
if (data.redirect) {
window.location = data.redirect;
}
else {
if ($btn.is('#my-btn')) {
console.log('disabling button');
$btn.prop('disabled', true);
} else {
$btn.prop('disabled', false);
}
}
}
});
Bonus tip: Don't use .removeProp() to re-enable the button. That will completely remove the property and you won't be able to use it again. More about prop() here: https://api.jquery.com/prop/

It's because you are using jQuery to bind a click event to the button. So the disable property won't be able to stop it. In your code you will need to add this:
$('#mybutton').off('click');
That will unbind the event from the button.

jQuery .on not working after ajax delete and div refresh

On a page with a tab control, each tab contains a table, each tr contains a td with a button which has a value assigned to it.
<td>
<button type="button" class="btn" name="deleteEventBtn" value="1">Delete</button>
</td>
This code below works for the first delete. After the AJAX call & the refresh of the div, no further delete buttons can be clicked. The .on is attached to the document. The same happens if I attach it to the body or anything closer to the buttons.
function deleteRecord(url, id, container) {
$.ajax({
type: "POST",
url: url,
data: { id: id },
success: function (data) {
$('#delete-popup').hide();
$(container).trigger('refresh');
}
});
}
$(document).ready(function () {
$(document).on('click', '[name^="delete"]', function (e) {
e.preventDefault();
var id = $(this).val();
$('#current-record-id').val(id);
$('#delete-popup').modal('show');
});
$('#delete-btn-yes').on('click', function (e) {
e.preventDefault();
var recordId = $('#current-record-id').val();
var recordType = location.hash;
switch (recordType) {
case "#personList":
deleteRecord(url, recordId, recordType);
break;
}
});
});
Any ideas? Could it be related to the wildcard for starts with [name^="delete"]? There are no other elements where the name starts with 'delete'.
EDIT
When replacing
$(container).trigger('refresh');
with
location.reload();
it "works", however that refreshes the whole page, loses the users position and defeats the point of using AJAX.

As the button click is firing at first attempt, there is no issue in that code. All you have to do is, put the button click event in a method and call it after the refresh. This way, the events will be attached to the element again. See the code below,
function deleteRecord(url, id, container) {
$.ajax({
type: "POST",
url: url,
data: { id: id },
success: function (data) {
$('#delete-popup').hide();
$(container).trigger('refresh');
BindEvents();
}
});
}
$(document).ready(function () {
BindEvents();
});
function BindEvents()
{
$(document).on('click', '[name^="delete"]', function (e) {
e.preventDefault();
var id = $(this).val();
$('#current-record-id').val(id);
$('#delete-popup').modal('show');
});
$('#delete-btn-yes').on('click', function (e) {
e.preventDefault();
var recordId = $('#current-record-id').val();
var recordType = location.hash;
switch (recordType) {
case "#personList":
deleteRecord(url, recordId, recordType);
break;
});
}

Apologies to all and thanks for your answers. The problem was due to the way the popup was being shown & hidden.
$('#delete-popup').modal('show');
and
$('#delete-popup').hide();
When I changed this line to:
$('#delete-popup').modal('hide');
it worked. Thanks to LShetty, the alert (in the right place) did help!

If you are using Bootstrap Modal
After Ajax Request before Refreshing page add
$('.modal').modal('hide');
This Line will Close your Modal and reload your page. Before that it will complete all Ajax Request things.
But for google chrome there is no issues :) hope this help someone.

JQuery, how to access click object after ajax call?

this seems like it should be straightforward, but I'm having trouble getting it to work.
I have a .click bind to many buttons of a certain class. When that button is clicked, it passes its id to a $.post call for processing.
When the $.post call returns successfully, I'd like to remove the button and add a message to the container, but I can't seem to even access the button at that point.
Here is the .click bind:
$('.button').click(function() {
$.post('process.php', {
action: 'checkit'
},
function(result) {
if (result == 'win') {
// Access the button that was pressed with jQuery
}
else {
alert("fail");
}
});
});
I've tried, $(this), this, and also setting a variable like var trigger=this as I enter the initial click function, but none of these are working. I get undefined, or it points to the actual JQuery object, not the button.
Does anyone have any insight into how I can access the button that was clicked at that point, using a jQuery wrapper, essentially something like $( triggered button ).html() so that I can manipulate the correct button?
Thanks for your time.

$('.button').click(function() {
var clicked = $(this);
....
Use a local variable for temporary storage.

try this
$('.button').click(function() {
var $button = $(this);
$.post('process.php', {
action: 'checkit'
},
function(result) {
if (result == 'win') {
$button.doStuff();
}
else {
alert("fail");
}
});
});

It's quite easy to do:
$(this).foo('bar');

Is
$('.button').click(function() {
$.post('process.php', {
action: 'checkit'
},
function(result) {
if (result == 'win') {
$(this).html('something');
}
else {
alert("fail");
}
}.bind(this));
});
working?

jsfiddle example of what you are attempting. Click on the text. Just keep a local variable.

Removing javascript created content

I have some java script that work behind a navigation menu, the user clicks the nav button, and some AJAX fires and brings in some HTML, what I want is for if that same link is clicked again then the content that was loaded in by that specific button is removed from the markup.
Does anyone have ideas? My code currently stands at
$("#Blog").click(function (ev) {
ev.preventDefault()
var url = $(this).attr("href");
$.ajax ({
url: "index.php/home/category",
type: "GET",
success : function (html) {
//alert("Success");
$("#accordion").append(html);
}
});
});

Try using .toggle instead of .click:
This would allow you to add a second function which removes the content when the button is clicked again.
$("#Blog").toggle(function (ev) {
ev.preventDefault();
var url = $(this).attr("href");
$.ajax ({
url: "index.php/home/category",
type: "GET",
success : function (html) {
//alert("Success");
$("#accordion").append(html);
}
});
},
function (ev) {
// remove content from accordion here
});

$("#accordion").append(
$("<div class='AJAXContend' />").append(html)
);
And then you can easily do $('.AJAXContend').remove();.
Another option is to do $('#accordion :last-child').remove();, but this is a little hacky.

$("#Blog").click(function (ev) {
ev.preventDefault();
Missing the comma after preventDefault.

So I don't know jQuery enough to answer in that way, but why not use a simple boolean switch?
// Pseudo:
If clicked and the switch is false, show the HTML, and set the Switch to True
If clicked and the switch is true, hide the HTML, and set the Switch to False
That should solve the problem.
The following code is probably horribly wrong, but I will use it to explain my thinking:
//Global Variables
var switch = false;
//Function
if(!switch)
{
$("#Blog").click(function (ev) {
ev.preventDefault()
var url = $(this).attr("href");
$.ajax ({
url: "index.php/home/category",
type: "GET",
success : function (html) {
//alert("Success");
$("#accordion").append(html);
}
});
});
switch = true;
}
else
{
$("#accordion").innerHTML = "";
switch = false;
}