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");
Related
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();
},
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
i want to simply show the content after load not fadeIn how is it possible?
$(function() {
$('.hovers').click(function(event) {
var target = $(this).attr('href');
window.location.hash = target;
$.ajax({
url: target,
success: function(data) {
$('#allcontent')
.fadeOut('slow', function() {
$(this).html(data).fadeIn('slow');
});
}
});
return false;
});
});
maybe i use .show() ?
Thanks for help
success: function(data) {
$('#allcontent').html(data).show();
}
Just fadeIn 0 , which happens immediately
$(this).html(data).fadeIn(0);
also you might want to do this
$(this).html(data).delay(2000).fadeIn(0);
adding a delay of 2 seconds or however much you want, and then show immediately
I tried the following methods:
1) Show/Hide
$('button').ajaxStart(function() {
$(this).hide();
});
$('button').ajaxStop(function() {
$(this).show();
});
2) Visible/Hidden
$('button').ajaxStart(function() {
$(this).css({visibility, 'hidden'});
});
$('button').ajaxStop(function() {
$(this).css({visibility, 'visible'});
});
3) Add/Remove Class
$('button').ajaxStart(function() {
$(this).addClass('invisible');
});
$('button').ajaxStop(function() {
$(this).removeClass('invisible');
});
4) Enable/Disable
$('button').ajaxStart(function() {
$(this).attr('disabled','disabled')
});
$('button').ajaxStop(function() {
$(this).removeAttr('disabled');
});
So far, only the Show/Hide method is responsive enough to be executed under 1s. The rest took between 1-2s, which is noticeably long. However, I would like the button to be displayed but disabled with some noticeable CSS change. Is there a more responsive way to enable and disable the submit button temporarily?
Try this:
$("button").click(function() {
// disable the submit button before the ajax call...
$(this).attr('disabled','disabled');
$.ajax({
url: 'yoururl.html',
data: {},
type: 'post',
success: function(response){
// enable the submit button after ajax call success...
$(this).removeAttr('disabled');
},
error: function(){
// error process here
$(this).removeAttr('disabled');
},
dataType: 'json'
});
});
The code i current have is this.
function update (){
latest_id = $('#image:first').data('position'); /* == 12 */
$.ajax({
type: "POST",
url: "../web/update/" + latest_id + "",
success: function(data) {
$('#my_like').after(data);
$('.newly-added').animate({"margin-left": "+=66px"}, "fast");
},
error: function(response) {
alert("failed");
},
});
}
setInterval(function() {
update();
}, 4000);
But because the element has been newly added it doesn't receive the new animate part. I done some research and found .live but that needs something to start it, e.g a click.
Fixed, there was a issue with jquery I was including.