We Keep Coding

Jquery doesn't remove class when holding backspace

I have a function that uses Ajax to get search results in real time, as the user types. It has a check if the input field's length is 1 or more, and if it is then it adds the class 'open' to display the dropdown for the search results. It also has an else statement, where if the length is 0 it removes open. This works fine on my localhost, but on my website if i hold backspace on more than two characters, it won't remove open (If i tap backspace it always works).
$(document).ready(function() {
$("#search").on('input', function() {
if ($('#search').val().length >= 1) {
$.ajax({
type: "POST",
url: "/url",
data: {
"json_str": $('#search').val()
},
dataType: "json",
success: function(data) {
if (!$("#searchbar").hasClass("open")) {
$("#searchbar").addClass("open")
}
if (data.length == undefined) {
$('#display').html("No results")
} else {
for (var i = 0; i < data.length; i++) {
console.log(data[i].username)
$('#display').append("<some html>")
}
}
}
});
} else {
$("#searchbar").removeClass("open")
}
});
})

I have found a solution, I am now aborting the last AJAX call if a new one is made before a response comes in.
var request = null;
$("#search").on('input', function() {
if (request){
request.abort()
}
if ($('#search').val().trim().length >= 1) {
request = $.ajax({.........

Try to trim the input value
if($('#search').val().trim().length)

jQuery - preventDefault() in .each function

I want to use preventDefault() in .each function for collection of buttons and its not working. When I use it with one .click function it works fine but inside .each is not
Whan am I doing wrong?
Here is my .js code
$(document).ready(function() {
var findingStatus = $('#findingStatus').attr('finding-status-type');
var findingLike = $('#finding_like_btn');
var findingDislikeBox = $('.finding_dislike_add');
var findingDislikeCollection = $('.finding_dislike_add_btn')
var findingUnlike = $('#finding_unlike_btn');
var findingDislikeRemoved = $('#finding_dislike_removed');
var alertBox = $('.alert-box').hide();
if (findingStatus == 0) {
findingDislikeBox.show();
findingUnlike.hide();
findingDislikeRemoved.hide();
}
else if (findingStatus == 1) {
findingDislikeBox.hide();
findingUnlike.show();
findingDislikeRemoved.hide();
}
else if (findingStatus == 2) {
findingDislikeRemoved.show();
findingUnlike.show();
findingDislikeBox.hide();
findingLike.hide();
}
findingDislikeCollection.each(function() {
var findingDislike = $(this).clone();
var url = findingDislike.attr("href");
findingDislike.click(function(event) {
event.preventDefault();
$.ajax({
url: url,
type: "POST",
dataType: "json",
success: function(data) {
if (data.profileState == 1) {
$('#dislike_count_btn').text('Odrzuć' + data.DislikeCount);
findingDislikeBox.hide();
findingDislikeRemoved.show();
findingUnlike.show();
//findingUnDislike.show();
//findingUnDislike.attr('disabled', false );
//findingUnDislike.text('Cofnij');
}
else {
alertBox.show();
if ($('.alert-box-msg').length==0) {
$('.alert-area').prepend('<p class="alert-area alert-box-msg">Żeby korzystać z tej funkcji musisz być zalogowany.</p>');
}
findingDislike.attr('disabled', false );
}
},
error: function() {
alert('Problem z serwerem, spróbuj ponownie za kilka minut.');
findingDislike.attr('disabled', false );
}
});
});
});
$('html').click(function (e) {
if (!$(e.target).hasClass('alert-area')) {
$('.alert-box').hide();
findingDislike.attr('disabled', false );
}
});
});
Thanks for answer

You are cloning the element with .clone which means you're not actually attaching an event listener to anything in the DOM. Cloned elements must be manually inserted into the DOM with JavaScript for them to have any effect.

This is not a correct way. Following should work:
findingDislikeCollection.click(function(event){
var findingDislike = $(this);
var url = findingDislike.attr("href");
//AJAX call
event.preventDefault();
});
More details on click event are given here:
https://api.jquery.com/click/

My jQuery ajax if/else on click is not working

So I've been stuck at this problem for quite a long time. Basically I have a button (#action) located in index.html. I have a second page : number.html. I'm trying to get in the .receiver span from index.html either .success content or .failure content from number.html, depending if #action was clicked in less than 2 seconds.
Here is the code :
$(function() {
var ajaxRetrieve = function(callback) {
$.ajax({
url: 'number.html',
method: 'POST',
success: function(responseData) {
callback(responseData);
},
error: function(responseData) {
alert('Check yourself');
}
});
}
var flag = 0;
$('#action').on('click', function() {
flag = 1;
});
if (flag == 1) {
ajaxRetrieve(function(data) {
$('.receiver').html($(data).find('.success'));
});
} else {
setTimeout(function() {
ajaxRetrieve(function(data) {
$('.receiver').html($(data).find('.failure'));
});
}, 3000);
};
});
Problem : on click, I never get the .success content, and I have no error message. But after 2 seconds, the .failure actually shows up. I tried several ways to make it work but it doesnt. I also checked if the flag value was changed on click with an alert box, and it was

You need to include the ajax calls within the on click function, otherwise the if logic will only be called when the page is loaded and never again.
$(function() {
var ajaxRetrieve = function(callback) {
$.ajax({
url: 'number.html',
method: 'POST',
success: function(responseData) {
callback(responseData);
},
error: function(responseData) {
alert('Check yourself');
}
});
}
var flag = 0;
$('#action').on('click', function() {
flag = 1;
flagCheck();
});
var flagCheck = function() {
if (flag == 1) {
ajaxRetrieve(function(data) {
$('.receiver').html($(data).find('.success'));
});
} else {
setTimeout(function() {
ajaxRetrieve(function(data) {
$('.receiver').html($(data).find('.failure'));
});
}, 3000);
};
}
});

jQuery / Ajax Add Class to an LI not working

jQuery / Ajax Add Class to an LI not working. Trying to add the 'open' class to a LI, that opens my 'floating cart' area when an item has been added to the cart. However, the 'open' class just. won't. apply. Not sure why.
I'm also using the Bootstrap framework, and jQuery.
My Code is:
function ShoppingCartAddAJAX(formElement, productNumber) {
formElement = $(formElement);
$.ajax({
type: "POST",
url: "dmiajax.aspx?request=ShoppingCartAddAJAX",
data: formElement.serialize(),
dataType: "json",
success: function (response) {
if (response.Status == "WishListSuccess") {
var url = "productslist.aspx?listName=" + response.listName + "&listType=" + response.listType;
$(location).attr('href', url)
} else if (response.Status == "Success") {
if (response.Status == "Success") {
$.ajax({
type: "GET",
url: "dmiajax.aspx?request=FloatingCart&extra=" + rnd(),
dataType: "html",
success: function (response) {
$('#floating').addClass('open');
var floatingCart = $("ul.dropdown-menu.topcartopen");
if (floatingCart.length == 0) {
floatingCart = $('<ul class="dropdown-menu topcart open"></ul>').insertBefore("#floating-cart");
floatingCart.hoverIntent({
over: function () {},
timeout: 200,
out: function () {
$(this).stop(true, true).filter(":visible").hide("drop", {
direction: "down"
})
}
})
}
floatingCart.html(response);
$("html, body").scrollTop(0);
var floatingCartTbody = floatingCart.find("tbody");
floatingCartTbody.find("tr").filter(":last").effect("highlight", {
color: "#B3B3B3"
}, 3500);
floatingCart.fadeIn()
}
});
if (response.CartItemCount) {
if (response.CartItemCount == "0") {
$("a.cart-tools-total").html("Shopping Cart<span class=\"label label-orange font14\">0</span> - $0.00")
} else {
$("a.cart-tools-total").html("Shopping Cart <span class=\"label label-orange font14\"> " + response.CartItemCount + " Item(s) </span> - " + response.CartItemTotal + " <b class=\"caret\"></b>")
}
}
formElement.find("select option").attr("selected", false);
formElement.find("input:radio").attr("checked", false);
formElement.find("input:checkbox").attr("checked", false);
formElement.find("input:text").val("");
if (formElement.find(".personalization-toggle").length > 0) {
formElement.find(".person-options").hide()
}
if (formElement.find(".attribute-wrap.trait").length > 0) {
formElement.find(".stock-wrap").remove()
}
} else if (response.Error) {
alert(response.Error)
}
}
}
})
}
The line where I'm tring to add it to the LI is:
$('#floating').addClass('open');
The LI is:
<li id="floating" class="dropdown hover carticon cart">
The LI's ID is floating, I figured that'd add the class of 'open' to it. NOPE. For some reason, just not happening.
And, just for the sake of including it, the live environment is here: http://rsatestamls.kaliocommerce.com/

Try changing it to:
$('#floating').attr("class", "open");

Try adding this to your ajax request. It maybe is getting an error:
$.ajax({
type: "GET",
url: "dmiajax.aspx?request=FloatingCart&extra=" + rnd(),
dataType: "html",
success: function (response) {
$('#floating').addClass('open');
var floatingCart = $("ul.dropdown-menu.topcartopen");
if (floatingCart.length == 0) {
floatingCart = $('<ul class="dropdown-menu topcart open"></ul>').insertBefore("#floating-cart");
floatingCart.hoverIntent({
over: function () {},
timeout: 200,
out: function () {
$(this).stop(true, true).filter(":visible").hide("drop", {
direction: "down"
})
}
})
}
floatingCart.html(response);
$("html, body").scrollTop(0);
var floatingCartTbody = floatingCart.find("tbody");
floatingCartTbody.find("tr").filter(":last").effect("highlight", {
color: "#B3B3B3"
}, 3500);
floatingCart.fadeIn()
}
error: function(objAjax,state,exception){
console.log('exception: '+exception+'. State: '+state);
},
});
Then, you will be able to check (at Firebug or other app) if your request is working right.

I suspect you are not correctly selecting the #floating element. Sometimes the element is not visible with only the ID and you must be a little more specific with the selectors.
We would need to see exactly the source for the rendered page to be sure what to put, but try doing this:
Add a button onto the page that you can use to test if you found the correct selector:
<input id="mybutt" type="button" value="Tester Click">
Next, add this javascript/jquery code and -- one at a time -- comment the test selector that failed, and uncomment the next attempt:
$('#mybutt').click(function() {
var test = $("#floating");
//var test = $("li #floating");
//var test = $("ul li #floating");
//var test = $("ul > li #floating");
if ( test.length > 0 ) {
alert('Found this: ' + test.attr('id') );
}
});
Once you are certain that you have the correct selector, then your original code -- using the correct selector -- should work:
$('#the > correctSelector').addClass('open');
Note: the above code uses jQuery, so ensure you are including the jQuery library on the page (usually between the <head> tags, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

Not work true my function?

I want after click on link show alert box with tow option ok and cancel, if user click on button ok return it function is true and if click on button cancel return it function is false, problem is here that after click on link always return is true. How can fix it?
Example: http://jsfiddle.net/MaGyp/
function myalert() {
var result = true;
var $alertDiv = $('<div class="alert">Do you want to delete this item?<button class="ok">ok</button><button class="cancel">cancel</button></div>');
$('body').append($alertDiv);
$('.ok').click(function () {
$('.alert').fadeOut(100);
$('#appriseOverlay').css('display', 'none');
result = true;
});
$('.cancel').click(function () {
$('.alert').fadeOut(100);
$('#appriseOverlay').css('display', 'none');
result = false;
});
$alertDiv.fadeIn(100);
$('#appriseOverlay').css('display', 'block');
return result;
};
$('.iu').click(function () {
alert(myalert());
if (myalert() == true) {
alert('ok')
} else {
alert('no')
}
});
Update:
...
$('.iu').click(myalert)
function callback(result) {
//
if(result){
alert(result);
$('.image_upbg').each(function(){$(this).removeClass().addClass(unique())});
var get_class = '.'+$(this).closest('div').attr('class');
var get_val = $(this).closest('a').find('input').attr('value');
//alert(get_val);
var val = 'val_upimg1=' + get_val;
$(get_class).fadeOut('slow');
$.ajax({
type: "POST",
dataType: 'json',
url: 'delete_upimg',
data: val,
cache: false,
success: function (data) {
$(get_class).fadeOut('slow');
},
"error": function (x, y, z) {
// callback to run if an error occurs
alert("An error has occured:\n" + x + "\n" + y + "\n" + z);
}
});
}else{
alert('no')
}
}

If you want to keep it structured like this, you could use a callback after the user responds.
http://jsfiddle.net/MaGyp/2/
function myalert() {
...do stuff here
$('.ok').click(function () {
callback(true); // callback when user clicks ok
});
$('.cancel').click(function () {
callback(false); // callback when user clicks cancel
});
}
$('.iu').click(myalert);
function callback(result) {
alert(result);
}
As suggested by Ben you could improve this by making the callback function a parameter to the first function to remove the tight coupling.

myalert() returns before result is set to true or false. To fix it I suggest having myalert() take a callback function as a parameter, and calling it inside the click() handlers within myalert(). The .iu event handler will then need to be split into two functions, one of which is the callback passed into myalert().

you are not waiting for the ok and cancel clicks so would always return true.
Modified the fiddle - http://jsfiddle.net/MaGyp/3/
function myalert() {
var result = true;
//var hide = $('.alert').fadeOut(100);
//var css = $('#appriseOverlay').css('display','none');
var $alertDiv = $('<div class="alert">Do you want to delete this item?<button class="ok">ok</button><button class="cancel">cancel</button></div>');
$('body').append($alertDiv);
$alertDiv.fadeIn(100);
$('#appriseOverlay').css('display','block');
return result;
};
$(document).ready(function(){
$('.ok').live('click',function () {
$('.alert').fadeOut(100);
$('#appriseOverlay').css('display','none');
alert('ok');
});
$('.cancel').live('click',function () {
$('.alert').fadeOut(100);
$('#appriseOverlay').css('display','none');
alert('cancel');
});
$('.iu').click(function() {
myalert();
});
})