We Keep Coding

Checking the visibility of a div not working inside ajax success function

Well long story short, I am trying hide a div inside Ajax success function depending on whether its visible or not. But don't understand why it isn't working. I can set it to hide simply and which works but in the console when I check I find that it keeps on setting the div to display:none even if it is already hidden.
JS
$(document).ready(function() {
$('#loading').show();
setInterval(function () {
$.ajax({
type: "GET",
url: "generate_list.php",
success: function (result) {
//$('#loading').hide();
$('#loading:visible').hide();
if(result != '') {
$('#empty_storage').hide();
$('#file_list').html(result);
}
else {
$('#file_list').html('');
$('#empty_storage').show();
}
}
});
}, 1700);
});

Toggle visibility
$(document).ready(function() {
$('#loading').css('visibility': 'visible');
setInterval(function () {
$.ajax({
type: "GET",
url: "generate_list.php",
success: function (result) {
if ($('#loading').css('visibility') == 'visible') {
$('#loading').css('visibility','hidden');
}
if(result != '') {
$('#empty_storage').hide();
$('#file_list').html(result);
}
else {
$('#file_list').html('');
$('#empty_storage').show();
}
}
});
}, 1700);
});
CSS : Initially loader will be hidden
#loading {
visibility : hidden;
}
So go with visibility property if you want to check the visibility. But if you want to use .hide() or .show() then it depends on display property
Visibility : http://www.w3schools.com/cssref/pr_class_visibility.asp
Display : http://www.w3schools.com/cssref/pr_class_display.asp
Sample Demo : https://jsbin.com/jiluren/11/edit?html,css,js,output
Hope this helps. Thanks !

Your problem might be that you misplaced the call of showing the loading indicator. You call $('#loading').show(); only once, before starting the setInterval iteration. So the first time your #loading gets hidden, it will stay hidden forever. You should call $('#loading').show(); before each ajax call like this.
$(document).ready(function() {
setInterval(function () {
$('#loading').show();
$.ajax({
type: "GET",
url: "generate_list.php",
success: function (result) {
//$('#loading').hide();
$('#loading:visible').hide();
if(result != '') {
$('#empty_storage').hide();
$('#file_list').html(result);
}
else {
$('#file_list').html('');
$('#empty_storage').show();
}
}
});
}, 1700);
});
Also, note that for such a loading indication it's better to hide it in the always callback of the promise returned by $.ajax. That way the loading panel will be hidden also when an error occures, and the success callback is not called. I mean something like thi.
$("#loading").show();
$.ajax({ ... })
.always(function() {
$("#loading").hide();
});

If i understand your requirement , you need to show the loading icon before ajax call and hide it once ajax call completes
In that case there are predefined callback functions avialable
beforeSend: function (xhr) {
$("#loaderforsearch").show()
},
complete: function()
{
$("#loaderforsearch").hide();
},

jQuery .on click event doesn't always fire on Ajax loaded content

I have a page where I dynamically load contents. Inside the $(document).ready I have similar event handlers:
$(document).on("click", ".content_button", function(e){
e.preventDefault();
e.stopPropagation();
// content
});
The problem is that the mouse click only recognised at around 90% of the clicks. It seems totally random. At other times I have to push the same button 4-5 times, and then it works. I have no error in the console, even the CSS part works every time:
div.content_button:active {
top: 2px;
}
I can't seem to find a solution. I use jQuery 1.11, it works like this on Win10, Win7, inside Firefox, and even on iPad or Android.
Do you have any ideas about what can be the problem?
Edit:
data.control contains the .content_button divs (buttons) in HTML.
And here is the part, which loads the buttons:
$.ajax({
url: 'worker.php',
async: false,
cache: false,
type: "POST",
data: { action:"update" },
dataType: "json",
success:function(data) {
if(data.actionresult == 1)
{
$('div#container').hide("slide", { direction: "down" }, 500);
$('div#container').promise().done(function() {
$('div#container').html(data.control);
$('div#container').show();
});
}
else
{
// handle error
}
}
});

$(document).ready(function(){
$(".content_button").on("click", function(e){
e.preventDefault();
e.stopPropagation();
// content
});
});
It must be done like this.

Have you tried with
$(function() {
var count = 0;
$('body').on('click', '.content_button', function() {
count++;
$('#count').html(count);
});
});
https://jsfiddle.net/byexstpq/

Ok, I have found the problem, it is this:
div.content_button:active {
top: 2px;
}
On mouseDown it moves 2 pixels, so it is possible that the link won't be there after a mouseUp - so technically the click event won't fire as the mouseUp happens over another element.
I hope this will help others.

How to call jQuery Lightbox with AJAX

How can I call jQuery Lightbox2 with AJAX.
I am using this function for my project.
$(document).ready(function() {
$(".paylasimi-goster").click(function() {
event.preventDefault();
var id = $(this).data("id");
$.ajax({
url: "gonderiyi_goster.php?msg_id=" + id,
type: 'get',
beforeSend: function() {
$("#loader").fadeIn(100);
},
}).done(function(data) {
$("#loader").fadeOut(100);
$(".sidebar").fadeIn().find(".sidebar-content").animate({
"right": 0
}, 200).html(data);
imgResize(jQuery, 'smartresize');
});
});
$(".sidebar").click(function() {
$(".sidebar-content").animate({
"right": "-565px"
}, 200, function() {
$(".sidebar").fadeOut();
})
});
$(".sidebar-content").click(function(e) {
e.stopPropagation();
});
});
Also I have created this DEMO from jsfiddle. In this jsfiddle you can see there white div. Click any white div then see the right sidebar. So in the sidebar have one image. The problem is here : Lightbox2 does not work when you click on the image.
How can I call Lightbox2 with ajax.

The issue here is the e. stopPropagation() on the .sidebar-content click event which is preventing the lightbox from triggering. You can remove that altogether and inside the .sidebar click event instead call:
$(".sidebar").click(function(e){
var preventClick = $(".sidebar-content");
if (!preventClick.is(e.target) && preventClick.has(e.target).length === 0){
//run the hide animate function + callback
$(".sidebar-content").animate({"right":"-200px"},200,function(){
$(".sidebar").fadeOut();
});
};
});
FIDDLE

Javascript dialog box won't open

I've got a jqGrid that when a user edits a row, they need to click a button to apply the changes. This button should create a dialog box, which should trigger an ajax call with the option selected.
However, the dialog box never opens. Firebug will stop at breakpoints within the function that creates it, but never does what it's supposed to.
function confirm_dialog(rowData){
$("#dialog").dialog({
modal:true,
buttons: {
"Yes": function(){
ajax_call(rowData, "yes");
$(this).dialog("close");
},
"No": function(){
ajax_call(rowData, "no");
$(this).dialog("close");
},
"Cancel": function(){
$(this).dialog("close");
}
}
});
}
function ajax_call(rowData, option){
$.ajax({
url: '{{django_base}}',
data: {'data':rowData, 'option':option},
type: 'POST',
error: function(){
window.alert("There was an error!");
},
success: function(){
window.alert("Changes made successfully!");
}
});
}
$(function(){
//...
baseGrid = new BaseGrid("#the-jqGrid", opts);
//...setting grid format
baseGrid.addButton("edit",
{ caption:'Confirm Changes', onClickButton:confirm_dialog() });
}
I've placed a breakpoint at the beginning of confirm_dialog and ajax_call. It will hit the confirm_dialog break during page load, but not when the button is clicked. The break in ajax_call is never reached.

If is this your production code, then you missed a comma:
function ajax_call(rowData, option){
$.ajax({
url: '{{django_base}}',
data: {'data':rowData, 'option':option},
type: 'POST',
error: function(){
window.alert("There was an error!");
}, **<-------missed comma**
success: function(){
window.alert("Changes made successfully!");
}
});
}
EDIT
I made a fiddle http://jsfiddle.net/94cfma4m/ I think everything is OK with the code itself, maybe the rowData source is invalid?

jQuery pagination - Applying class to items

I am trying to design a pagination system in jQuery. The bit I am stuck on is when I click on different page number links, I want it to move the "active" class to the newly clicked page.
In the example page "1" has the active class. When I click "2" I want the active class to move to "2" and be removed from "1".
http://jsfiddle.net/qKyNL/24/
$('a').click(function(event){
event.preventDefault();
var number = $(this).attr('href');
$.ajax({
url: "/ajax_json_echo/",
type: "GET",
dataType: "json",
timeout: 5000,
beforeSend: function () {
$('#content').fadeTo(500, 0.5);
},
success: function (data, textStatus) {
// TO DO: Load in new content
$('html, body').animate({
scrollTop: '0px'
}, 300);
// TO DO: Change URL
// TO DO: Set number as active class
},
error: function (x, t, m) {
if (t === "timeout") {
alert("Request timeout");
} else {
alert('Request error');
}
},
complete: function () {
$('#content').fadeTo(500, 1);
}
});
});
I'm quite new to jQuery and could do with some help. Can anyone please give me some guidance on how to do this?

You could check addClass method here and removeClass method here

Remove the current active li and add the active class to the one you clicked.
Add those two lines in your click event handler
$('#pagination li.active').removeClass("active");
$(this).parent().addClass("active");