We Keep Coding

jQuery Load And Ajax Forms Not Working Together

I've created a news system, where i should be able to edit articles dynamically without redirect, from a modal. Also, i should be able to delete and create articles.
When something is changed, jQuery Load is called, but the problem is when i have to edit the loaded content.
$("#toolbox-items").load('inc-toolbox');
The above code loads the articles (the file is called inc-toolbox on purpose and works fine).
$(function () {
$('form').on('submit', function(e) {
e.preventDefault();
var clicked = document.activeElement.getAttribute('name');
$.ajax({
type: 'post',
url: 'process-toolbox',
data: $(this).serialize() + "&" + clicked + "=success",
success: function (response) {
$("#toolbox-items").load('inc-toolbox');
$('.modal-backdrop').remove();
}
});
});
});
But, when ever something has to be edited or deleted, the whole page reloads and nothing changes, although i'm still able to add things.
The add-button is not loaded dynamically from the script, but is in there from the start.
What in the world might the problem be?

Try code like this
$(function () {
$(document).on('submit','form', function(e) {
e.preventDefault();
var clicked = document.activeElement.getAttribute('name');
$.ajax({
type: 'post',
url: 'process-toolbox',
data: $(this).serialize() + "&" + clicked + "=success",
success: function (response) {
$("#toolbox-items").load('inc-toolbox');
$('.modal-backdrop').remove();
}
});
});
});

AJAX async:true breaks site on mobile browsers

I am using this function to return search results via AJAX. However, it kills mobile browsers on search. It works if I set it to 'async:false' but this means that I can't have a loading icon.
I cant find anything online to indicate why this would not be working on mobile, when it works fine on desktop.
Any ideas?
(function($) {
$(document).ready(function() {
$("#filter").on('keyup input', function() {
delay(function() {
var input = $('#filter');
var query = input.val();
var content = $('#content')
$.ajax({
type: 'post',
url: myajax.ajaxurl,
async: true,
data: {
action: 'load_search_results',
query: query
},
beforeSend: function() {
input.prop('disabled', true);
content.addClass('loading');
},
success: function(response) {
input.prop('disabled', false);
content.removeClass('loading');
content.html(response);
myPluginsInit();
}
});
return false;
}, 700);
});
});
})(jQuery);

I was able to solve this problem by adding a separate 'loader' div with an ID of loader to my page, and add the loading class to this instead. The code now looks like this:
(function($) {
$(document).ready(function() {
$("#filter").on('keyup input', function(){
delay(function(){
var input = $('#filter');
var query = input.val();
var content = $('#content')
$.ajax({
type : 'post',
url : myajax.ajaxurl,
async: true,
data : {
action : 'load_search_results',
query : query
},
beforeSend: function() {
input.prop('disabled', true);
$('#loader').addClass('loading');
},
success : function( response ) {
input.prop('disabled', false);
$('#loader').removeClass('loading');
content.html( response );
myPluginsInit();
}
});
return false;
}, 700 );
});
});
})( jQuery );

You're problem is still in your keyup input handler. I'm not sure where the function delay is declared (I'm assuming it's some wrapper around setTimeout). However it doesn't really matter.
The issue is that the handler fires for every input and keyup event. The "delay" is inside that. All the "delay" is doing is "waiting" before it makes the ajax call but an ajax call is still being created for every keyup and input event.
This means that a lot of ajax calls are being created and on a mobile platform that's a problem. I'm not exactly certain when (or how often) you need to make the call to the server but to see what I'm talking about just add the line I've included below:
(function($) {
$(document).ready(function() {
$("#filter").on('keyup input', function() {
console.log('handling keyup or input') // add this line and watch them stack up
delay(function() {
var input = $('#filter');
var query = input.val();
var content = $('#content')
$.ajax({
type: 'post',
url: myajax.ajaxurl,
async: true,
data: {
action: 'load_search_results',
query: query
},
beforeSend: function() {
input.prop('disabled', true);
content.addClass('loading');
},
success: function(response) {
input.prop('disabled', false);
content.removeClass('loading');
content.html(response);
myPluginsInit();
}
});
return false;
}, 700);
});
});
})(jQuery);

How can I bind a onclick event to a checkbox INSTEAD of a change event?

Here is the problem I have.
I'm making a control panel for some devices. Now the user can enable/toggle an on/off switch (checkbox) and so can a remote device. This is reflected in the database.
However, I also want a confirm box whenever the user (NOT the device) toggles to enable the device (checkbox == checked). No confirmation box required for when the user disables (toggles off, checkbox==false) the device.
I check the database every few seconds to see the state of device (since the device can turn itself on or off)
This is what I have so far (It doesn't work correctly. Nothing is sent to the database. on click doeesn't fire on user click in checkbox)
$(function() {
$('#toggle').bootstrapToggle({
on: TR_Toggle_On,
off: TR_Toggle_Off
});
check_enable();
function check_enable() {
var timer = setInterval(function(result) {
$.ajax({
type: "get",
url: "checkState.php",
success: function(result) {
var enabled =parseInt(result);
if (enabled ===1) {
$( '#toggle').bootstrapToggle('on');
} else {
$( '#toggle').bootstrapToggle('off');
}
}
});
}, 5000);
}
$('#toggle').on('click',function(){
$('#toggle').change(function() {
if ($('#toggle').prop('checked') ===true) {
if(confirm("Sure?")){
$.ajax({
type: "get",
url: "setEnable.php",
data: "enable=1"
});
}else{
$('#toggle').prop('checked',false);
}
} else {
$.ajax({
type: "get",
url: "setEnable.php",
data: "enable=0"
});
}
})
})
})
How can I do this? When I try to register the on('click',func(){}) event, nothing fires. I assume it doesn't work for checkboxes? What am I doing wrong?

You're binding an event within another event..
$('#toggle').on('click',function(){
$('#toggle').change(function() {
...
}
}
You should only bind once, like this...
$('#toggle').on('click',function(){
if ($('#toggle').prop('checked') ===true) {
if(confirm("Sure?")){
$.ajax({
type: "get",
url: "setEnable.php",
data: "enable=1"
});
}else{
$('#toggle').prop('checked',false);
}
} else {
$.ajax({
type: "get",
url: "setEnable.php",
data: "enable=0"
});
}
}

Yes it works for checkboxes.
Tried a minimal example like this:
<input type="checkbox" class="toggle" name="dog" value="TinyDog" /> what does the dog say
$(document).ready(function() {
$('.toggle').on('click',function(){
alert("woff woff");
});
});
Try adding some console.log lines or alerts to see where your code fails.

Catching focus on a jQueryUI menu item with a listener broader than a click listener

I've defined a jQueryUI menu with id leftmenu and on its list elements, I have defined a function on clicking one item, as follows:
$('#leftmenu>li').click(function () {
var clickedId = this.id;
$.ajax({
type: "POST",
cache: false,
url: "/Session/Index/",
success: function (result) {
if (result.length > 0)
{
performListItemAction(clickedId);
}
else
{
window.location.href = '/Home/Index/'
}
}
});
});
This works fine, but now I want to change it so that instead of the click on the menu item, I want to capture focus and selection on that item in a more general way, such as using the keyboard. Currently, I can navigate through the menu using the up and down keys on the keyboard, but the inner code does not get called. I know this is because it is only supposed to happen on click, but the same thing happpened when I tried activate and focus in place of the click as well.
How can I get it to perform the same behavior as click in a more general way that captures selection and enter of the menu item?
Thank you.

This should be done in the select event. This way it catches both click or select from focused keyboard actions.
Example: https://jsfiddle.net/Twisty/v671x6ns/
jQuery
$(function() {
$('#leftmenu').menu({
select: function(e, ui) {
var selectId = ui.item.attr("id");
$.ajax({
type: "POST",
cache: false,
url: "/Session/Index/",
success: function(result) {
if (result.length > 0) {
performListItemAction(selectId);
} else {
window.location.href = '/Home/Index/'
}
}
});
console.log(e.type + " event, ID: " + selectId);
}
});
});

JQuery prevent links working whilst ajax is loading

I have a firework detonation system which uses JQuery to connect to a PHP script via AJAX to detonate the fireworks. The only problem is that if you click one launch button straight after another, there is a possibility of setting off more fireworks than you want.
I need a way to disable all other links on the page until the ajax has finished and received a response. I have tried:
//Prevent clicks
$("body").find("a").click(function (e) { e.preventDefault(); });
//Re-enable clickable links
$("body").find("a").unbind("click");
My current ajax script is:
$(document).ready(function() {
$(".button").on("click",function() {
//Disable all other links
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(e) {
//Re-enable other links once ajax is complete
}
});
return false;
});
});
What would be even better is, if the buttons were to grey out whilst waiting for the response. I have a demo script at http://joshblease.co.uk/firework/

One way using a variable disabled
$(document).ready(function() {
var disabled = false;
$('a').css('opacity','0.4');
$(".button").on("click",function() {
//Disable all other links
disabled = true;
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(e) {
//Re-enable other links once ajax is complete
disabled = false;
$('a').css('opacity','1');
}
});
return false;
});
});
$('a').click(function(event){
if(disabled)
event.preventDefault();
});
Update
Changed link opacity for a disabled effect.

I would use actual buttons, not links, and disable them when one is clicked. Use a class on the button distinguish it from other buttons that might be on the page.
<input type="button" class="launch" ... >
...
$(document).ready(function() {
$("input[type=button].launch").on("click",function(event) {
// We will handle the button, prevent the standard button press action.
event.preventDefault();
//Disable all other links
$('input[type=button].launch').disable();
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(e) {
//Re-enable other links once ajax is complete
$('input[type=button].launch').enable();
}
});
return false;
});
});
Further manage it with a flag as #MonkeyZeus suggests.

I'd manage this with a class (assuming there might be some links you want to work). All the links that you want to not work give them the class blockable.
You can also then style your a.disabled class in your css to grey out the links (or whatever you want)
$(document).ready(function() {
$(a.blockable).click(function(e) {
if($(this).hasClass('disabled'))
{
e.preventDefault();
}
}
$(".button").on("click",function() {
$('a.blockable').addClass('disabled');
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(e) {
$('a').removeClass('disabled');
}
});
return false;
});
});

I would approach this by declaring a variable and only allowing AJAX to fire if variable has not been tripped:
$(document).ready(function() {
var launch_processing = false;
$(".button").on("click",function() {
if(launch_processing === false){
launch_processing = true;
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(data) {
},
complete: function(){
launch_processing = false;
}
});
}
else{
alert('Are you mad?!?! Fireworks are in progress!');
}
});
});