Develop Reference

How to disable anchor tag onclick events inside div element?

I have html content as given below.
<div>
Link 1
Link 1
Link 1
Link 1
Link 1
</div>
Problem:
When I click on any link, in the onClick function I will make one ajax call.
I just want to disable all the onClick events of a tag(or disable the entire div and all of its child elements) till I get the ajax response after getting the response I need to re-enable all the a tag onclick events.
Is there any way achieve the same?

You can use beforeSend callback of jqXHR where you can disable all anchor tag and
jqXHR.always() callback where you will enable all anchor tag .
go through Jquery Ajax Documentation

Thanks for so many solutions.
I have found a very simple solution.
Solution:
You can use the CSS property pointer-events to disable the click event on any element:
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
// To disable:
document.getElementById('id').style.pointerEvents = 'none';
// To re-enable:
document.getElementById('id').style.pointerEvents = 'auto';
// Use '' if you want to allow CSS rules to set the value
Thanks,
Dixit

Link 1
someFunction(){
//some code here
$.get('test.aspx', function(data){
//do something here
})
return false;
}
Check This DEMO

You can use .ajaxStart() & .ajaxStop() JQUERY events to do this. You can create a different css to disable the anchor tag as below :
$('a[href]').each(function () {
var $this = $(this);
if ($this.attr('href') && $this.attr('href') != '') {
$(this).attr('data-href', $(this).attr('href'));
$(this).removeAttr('href');
}
});
and while enabling it back
$('a[data-href]').each(function () {
var $this = $(this);
if ($this.attr('data-href') && $this.attr('data-href') != '') {
$(this).attr('href', $(this).attr('data-href'));
$(this).removeAttr('data-href');
}
});
This will remove your href and create a custom attribute. So your click event will not work on anchor tag.

set a flag for active status
function someFunction(){
var status = $('#parentDiv').attr('data-active');
if(!status){
$("#parentDiv").attr('data-active',true);
//make ajax call
$.ajax("url", {
success: function(data) {
$("#parentDiv").attr('data-active',false);//make false when done
}
});
}
}
<div id="parentDiv" data-active="false">
Link 1
Link 1
Link 1
Link 1
Link 1
</div>
Note: This is an alternate solution. IMHO kedar kamthe's solution is the best way to solve this problem

You can try this:
1) Add class to div:
<div class="myDiv">
Link 1
Link 1
Link 1
Link 1
Link 1
</div>
2) Hide div when ajax starts and show div in success of ajax:
$(".myDiv").css('opacity','0.25');// blur div when ajax starts
$.ajax("test.php", {
success: function(data) {
$(".myDiv").css('opacity','1');// display div as ajax complete
},
error: function() {
alert('An error occurred');
}
});
});

you can use beforeSend to set a callback function to disable all elements. and enable them in success. You can add a function to disable/enable those element. add an id to the div.
$.ajax(
url: "your url",
beforeSend: function( xhr ) {
disabledFields(true);
},
success: function(){
disabledFields(false);
},
error: function(){
disabledFields(false);
});
//
function disabledField(isDisabled)
{
$("#myDiv").find("a").each(function(){
if (isDisabled)
{
$(this).attr("disabled", "disabled");
}
else
{
$(this).removeAttr("disabled");
}
});
}

Inline edit html table with ajax php checkbox & select

Final Edit: I abandoned trying to get checkboxes to work with this method. Instead, I'm just using a combo box with a 'Yes' and 'No'. Combos are working perfectly, thanks to some fantastic help from SE users :) It actually turns out to be better, IMO. Checkboxes with inline editing, the way I've implemented it could lead to accidentally checked or unchecked boxes. A combo is an extra 2 clicks but it's worth it to eliminate accidents. It also looks great because I'm just swapping a little red 'x' or green 'check' to indicate on and off. It looks really nice. Thanks again to everyone for your help!
I'm using the method from 9lessons.info to create a table with inline-editable rows. So far, it's working but not very well when it comes to selects and checkboxes. With selects, it does update the value, but when it hides the input (when clicking outside the tr) the value of the select shows (the fk id field), rather than the text in between opening and closing of the selected option tag (the name field). I can see in the jQuery where it shows the value, but how do I tell it to use the text from the option instead of the value?
the jQuery:
$(document).ready(function(){
$(".edit_tr").click(function(){
var ID=$(this).attr('id');
// hide
$("#name_"+ID).hide();
$("#position_"+ID).hide();
$("#parent_nav_"+ID).hide();
$("#is_disp_"+ID).hide();
// show
$("#name_input_"+ID).show();
$("#position_input_"+ID).show();
$("#parent_nav_input_"+ID).show();
$("#is_disp_input_"+ID).show();
}).change(function(){
var ID=$(this).attr('id');
var name=$("#name_input_"+ID).val();
var position=$("#position_input_"+ID).val();
var parent_nav = $("#parent_nav_input_"+ID).val();
var is_disp = $("#is_disp_"+ID).prop("checked") ? 1 : 0;
// data string
var dataString = 'id='+ ID +'&name='+name+'&position='+position+'&parent_nav='+parent_nav+'&is_disp='+is_disp;
if(name.length > 0 && position.length > 0 && parent_nav.length > 0) {
var parent_nav_txt = $("#parent_nav_input_"+ID+" option:selected").text();
$.ajax({
type: "POST",
url: "admin_nav_edit.php",
data: dataString,
cache: false,
success: function(html) {
$("#name_"+ID).html(name);
$("#position_"+ID).html(position);
$("#parent_nav_"+ID).html(parent_nav_txt);
$("#is_disp_"+ID).html(is_disp);
}
});
} else {
alert('Enter something.');
}
});
//edit input box click action
$(".editbox").mouseup(function(){
return false
});
//outsire click action
$(document).mouseup(function() {
$(".editbox").hide();
$(".text").show();
});
});
I know the 'is_disp' variables in script are not retrieving the right thing, but everything else works so I don't think I need to post the rest of my code, but I will if necessary.
So, what should I put to get it to recognize the checkbox is unchecked, and make sure a 0 gets sent to the db, or a 1 if checked? That's how I've been doing it
With the select, I'm not sure what do to, or how to target the value in between the select tags to show instead of the value="" value, while making sure the value="" value gets stored in the db.
Thanks very much for any help!

to get a select boxes option's text use the :selected selector along with .text()
var text = $("#selectID option:selected").text();
var value = $("#selectID option:selected").val();
for checkbox check the return of .prop("checked")
var check = $("#checkboxID").prop("checked") ? 1: 0;
EDIT:
var parent_nav_text = $("#parent_nav_input_"+ID+" option:selected").text();
Then in your ajax function
$.ajax({
type: "POST",
url: "admin_nav_edit.php",
data: dataString,
cache: false,
success: function(html) {
$("#name_"+ID).html(name);
$("#position_"+ID).html(position);
$("#parent_nav_"+ID).html(parent_nav_text);
$("#is_disp_"+ID).html(is_disp);
}
});

A call to .val() on a checkbox will always return the value it is set with in the DOM. You should instead do this:
var is_disp = $("#is_disp_input_"+ID).is(':checked');
the .is() jQuery function returns true if the element has the CSS selector, in this case :checked.
Also, on the server, you should check if the checkbox variable is true or false using if(!empty($_POST['myvar'])) {} instead of if(isset($_POST['myvar'])) {} because isset() will return true even if myvar is zero or false!

Set Chosen value from option text

I have a form which uses the Chosen dropdown. If the option the user wants is not available then they can show a modal with a form to add a new option. After the new option is submitted then the modal closes and the data stays in the fields and the chosen option is selected.
How do I set the chosen option selected by the text with jquery/JS. I wont know the value as its an id that is added in the database
$('#save_town').click(function(e){
e.preventDefault();
var town_name = $('#new_town').val();
var region_id = $('#new_region').val();
$.ajax({
type: 'POST',
data: {town_name: town_name, region_id: region_id},
url: '{/literal}{$base_url}{literal}settings/towns/do-add',
success: function(result){
$('.modal').modal('hide');
location.reload();
},
error: function(){
}
});
});

I´m not sure I understand your question correctly, but maybe thats an solution:
$('option').each(function(){
if($(this).html() == "goodby"){
$(this).attr('selected','selected');
}
});
with this, you can select an option by its text.
example: http://jsfiddle.net/TQnTy/

On submit, load a html popup file into a div

I am trying to redirect to a contact form on submit to a HTML file which I have made using.
header('Location: /dev/thanks.html');
However, this loads it to a different page and not to the page that I'm already on.
I already have the jQuery to make a popup for the contact form and information page, which is:
$('a.contact , a.contact_footer, a.contact_text').click(function() {
$("html, body").animate({ scrollTop: 0 }, 600);
$("#popup").load("/dev/contact.php");
// Getting the variable's value from a link
var show = $('#popup').css('display', 'block'),
popup = $(this).attr('href');
//Fade in the Popup and add close button
$(popup).fadeIn(300);
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
On submitting the contact form, I want to load a new file (thanks.html) to replace the popup (contact form) with a thank-you message. Similar to what I'm doing with the jQuery already, but I want it to only implement on submit:
<div class="submit">
<input type="submit" value="Submit"/>
</div>
What do I need to do to modify my jQuery so it implements on submit instead of on click?

Add the submit event to the contact form:
If you use jQuery 1.7+, use on:
$(document).on("submit", "form#submit_message", function() {
$('#popup').load('/dev/thanks.html');
return false;
});
If not, use live (or upgrade your jQuery version):
//live is old deprecated
$('form#submit_message').live('submit', function() {
$('#popup').load('/dev/thanks.html');
return false;
});

I'm assuming that the form will append directly in the "#popup", without that you will have to change the "var popup..." line.
$("#popup").on("submit", "form", function(event){
var popup = $(this).parent();
var data = $(this).serialize();
$.ajax({
type: "POST",
url: "my_url.php",
data: data
}).done(function(html){
popup.html(html);
});
return false;
});

jQuery .blur on input AND div classes

I have a form with multiple input fields. I'm using a blur function to trigger an AJAX request when ever an input field is clicked out of like so:
$(".innerItems input").blur(function() {
$.ajax({
// etc
});
});
However, I've also built a custom "select menu" using DIVs and jQuery like so:
http://jsfiddle.net/tctc91/gWS2L/
How can I simulate a "blur" so that when the value changes in my custom select menu, the AJAX request is triggered like it normally would if it were an input?

You can trigger events on elements programatically by using trigger():
$(".innerItems input").trigger("blur");
So in your code, it would be:
$(".currentMenu li").click(function(e){
e.preventDefault();
$(this).closest(".currentMenu").prev().html($(this).text());
$(this).closest(".currentMenu").prev().append('<span class="dd-arrow"></span>');
$(".innerItems input").trigger("blur");
});

You already have a listener on the click event just add the ajax to the bottom of that ?
$(".currentMenu li").click(function(e){
e.preventDefault();
$(this).closest(".currentMenu").prev().html($(this).text());
$(this).closest(".currentMenu").prev().append('<span class="dd-arrow"></span>');
// ajax here
doAjaxStuff();
});​
$(".innerItems input").blur(doAjaxStuff);
function doAjaxStuff() {
$.ajax({
// etc
});
}

You can create a custom event say customMenuChanged and trigger it whenever you change the value.
$(".currentMenu li").click(function(e){
e.preventDefault();
var $prev = $(this).closest(".currentMenu").prev();
//Check if the value actually changed or same item is selected
if($prev.text() != $(this).text()){
$(document).trigger('customMenuChanged', $(this).text());
}
$prev.html($(this).text() + '<span class="dd-arrow"></span>');
});
$(document).bind('customMenuChanged', function(e, data){
alert("Menu changed " + data);
//Code here to make ajax request
});
You can bind event to any element you want and trigger it.
Working demo - http://jsfiddle.net/gWS2L/6/