I am creating pagination using Codeigniter, and I want to add ajax functionality. JS is working when pagination link is clicked first time. When it is clicked for the second time JS doesn't work and pagination is working via PHP controller (this part is working without any problem). This is JS code:
var pag = $('#pagination a');
pag.on('click', function(e){
var pagination =
{
target : $(this).attr('href') + ' .mali_oglasi',
content : $('.mali_oglasi'),
container: $('.mali_oglasi_wrapper')
};
pagination.content.animate({'opacity':0, scrollTop: 0}, 400, function(){
pagination.container.load(pagination.target, function(){
pagination.content.animate({'opacity':1}, 400);
});
});
e.preventDefault();
});
Also scrollTop doesn't work. What am I doing wrong?
Probably that's because your DOM gets manipulated everytime, and hence the handler for the click event is lost.
try this way :
$('body').on('click', '#pagination a', function(e) {
var pagination =
{
target : $(this).attr('href') + ' .mali_oglasi',
content : $('.mali_oglasi'),
container: $('.mali_oglasi_wrapper')
};
pagination.content.animate({
'opacity':0,
scrollTop: 0
}, 400, function(){
pagination.container.load(pagination.target, function(){
pagination.content.animate({
'opacity':1
}, 400);
});
});
e.preventDefault();
});
this will ensure rebinding the click event on each DOM manipulation
try this bro..
maybe the element was not yet loaded...
var pag = $('#pagination a');
pag.on('click', 'a', function(e){
var pagination =
{
target : $(this).attr('href') + ' .mali_oglasi',
content : $('.mali_oglasi'),
container: $('.mali_oglasi_wrapper')
};
pagination.content.animate({'opacity':0, scrollTop: 0}, 400, function(){
pagination.container.load(pagination.target, function(){
pagination.content.animate({'opacity':1}, 400);
});
});
e.preventDefault();
});
Related
I have an ajax transition which is this:
function fadeTransition(href = window.location.href) {
$('.fader').css({
'position': 'fixed',
// 'height': h,
'height': '100vh',
'width': '0',
'left': '0',
'top': '0',
'color': 'black',
'background-color': 'black',
'z-index': '300'
}).animate({
'width': '100vw',
}, 400, function() {
$('.slider-transition').load(href + ' .slider-transition', function() {
// EXECUTES ON CALLBACK
// $('.slider-transition').children('.slider-transition').unwrap();
// h = $(document).height();
$('.fader').animate({
'left': '100vw'
}, 400, function() {
slideShowInit();
initParalax();
$('.woocommerce-product-gallery').each(function() {
$(this).wc_product_gallery();
});
$('.slider-transition').children('.slider-transition').unwrap();
// $('.slider-transition').parents('.slider-transition').unwrap();
});
});
});
}
It's a simple transition that loads the element from the next page into the element of the current page and by attaching all of the click events to the body as such:
$('body').on('click', '.main-menu li a, nav a, a.button, a.square, a.grow', function(event) {
event.preventDefault();
event.stopPropagation();
});
$("li").on("click", "a", function(event) {
var _href = $(this).attr("href");
history.pushState(null, null, _href);
fadeTransition(_href);
});
I've been able to circumnavigate the problem of click events being destroyed after the transition. The only problem that with the Woocommerce plugin in Wordpress, I can't possibly hope to traverse the entire assets folder of JS and replace
$('.a').on('click', function() {});
with
$('.body').on('click', 'a', function() {});
and attach all of the DOM events to the body like this and even then I'm only 70% sure this is the problem, does anyone know a way around this?
Remove an event handler with jQuery using off()
With jQuery to stop/remove existing "click" delegated event that interfere with your own custom click event, you could try to use off(), which is likely the contrary of on().
So with your code it should be:
jQuery(function($){
$(document.body).off('click', 'a');
$("li").on("click", "a", function(event) {
var _href = $(this).attr("href");
history.pushState(null, null, _href);
fadeTransition(_href);
});
});
It could solve your issue.
In my wordpress site I'm loading my posts via ajax.
But for some reason every other post the page chooses to refresh instead of loading through ajax.
So when I click on Next, the next post loads in perfectly. Then in the second post when I click Next again the page refreshes.
Any ideas why it only refreshes every second post?
JS:
jQuery(document).ready(function() {
jQuery('.arrows a').click(function() {
var url = jQuery(this).attr('href');
jQuery('#main-content').html('<h4>Loading...</h4>').load(url+ ' #main-content');
return false;
});
});
jQuery(document).ready(function() {
var clickHandler = function() {
var url = jQuery(this).attr('href');
jQuery('#main-content').html('<h4>Loading...</h4>').load(url+ ' #main-content', function() {
jQuery('.arrows a').click(clickHandler);
});
return false;
};
jQuery('.arrows a').click(clickHandler);
});
Delegate the click so that you aren't removing the element with the click handler.
For jQuery >= 1.7, use on.
jQuery(document).ready(function() {
jQuery('#main-content').on('click', '.arrows a', function(e) {
e.preventDefault();
var url = jQuery(this).attr('href');
jQuery('#main-content').html('<h4>Loading...</h4>').load(url+ ' #main-content');
});
});
For jQuery 1.4.2-1.7, use delegate instead of on.
jQuery(document).ready(function() {
jQuery('#main-content').delegate('.arrows a', 'click', function(e) {
e.preventDefault();
var url = jQuery(this).attr('href');
jQuery('#main-content').html('<h4>Loading...</h4>').load(url+ ' #main-content');
});
});
I have this function in my global.js file, code below:
$("a.dialog-page").click(function(event) {
event.preventDefault();
$this = $(this);
var URL = $(this).attr('href');
var dialogbox = document.getElementById('dialog');
var dialogOptions = {
width: 500,
height: 200,
modal: true,
close: function(event, ui){
$('#dialog').empty();
}
};
if(dialogbox==null) {
$this.after("<div id=\"dialog\"></div>");
}
jQuery('#dialog').load(URL + " #content").dialog(dialogOptions);
});
I have dynamically generated HTML with the following markup:
<div id="dynamic-id">
<a class="dialog-page" href="/test/test.php">Link to test</a>
</div>
Here is the click trigger for that link coming from my local.js file:
$('#dynamic-id').on('click', 'a.dialog-page', function(event){
event.preventDefault;
});
The problem is when clicking on the link, it is not calling ("a.dialog-page").click event which would load up my modal window.
How can I address this?
Thanks
Cheers
Since #dynamic-id is also generated dynamically, you need to use other static parent like body:
$('body').on('click', 'a.dialog-page', function(event){
event.preventDefault;
});
Element #dynamic-id is also generated dynamically.
So when you are binding the element the element #dynamic-id doesnot exist in DOM while you are binding the event to it .
TO fix this you can use as follows
$(document).on('click', 'a.dialog-page', function(event){
alert("Link clicked");
event.preventDefault;
});
Try this -
$('#dynamic-id').on('click', 'a.dialog-page', function(event){
event.preventDefault;
$this = $(this);
var URL = $(this).attr('href');
var dialogbox = document.getElementById('dialog');
var dialogOptions = {
width: 500,
height: 200,
modal: true,
close: function(event, ui){
$('#dialog').empty();
}
};
if(dialogbox==null) {
$this.after("<div id=\"dialog\"></div>");
}
jQuery('#dialog').load(URL + " #content").dialog(dialogOptions);
});
Reason for not working -
$("a.dialog-page").click(function(event) {
and
$('#dynamic-id').on('click', 'a.dialog-page', function(event){
are basically the same. so when you are executing the second line you are overriding the previous onclick event. You can use any one of them and you should be just fine. Here is the fiddle.. http://jsfiddle.net/KytV8/
You just need to target an element that exists on pageload and use the on() function
$('#container').on('click', '.element', function(){ });
The way you were originally trying to do it, the click listener doesn't get set since when it's applied, it can't find the element it's trying to listen to.
To me it looks like you are defining the click event statically, which will never be triggered by the A tag since it's not being attached to the dynamic content, then defining and attaching a new click after the dynamic data is loaded that only stops the event. I would change it to this, as also alluded to by Pointy's comment:
<div id="dynamic-id">
<a class="dialog-page" href="/test/test.php">Link to test</a>
</div>
$('#dynamic-id').on('click', 'a.dialog-page', function(event){
event.preventDefault();
$this = $(this);
var URL = $(this).attr('href');
var dialogbox = document.getElementById('dialog');
var dialogOptions = {
width: 500,
height: 200,
modal: true,
close: function(event, ui){
$('#dialog').empty();
}
};
if(dialogbox==null) {
$this.after("<div id=\"dialog\"></div>");
}
jQuery('#dialog').load(URL + " #content").dialog(dialogOptions);
});
When a user clicks on the "Contact Me" button, i want the screen to slide to the #contact element, however cannot figure out how to do it. I've tried various different snippets of code and tried to tailor it to my needs, but nothing seems to work.
The site is here; http://dombracher.com/
Simply want the screen to slide to the div mentioned above, rather than quickly snap to it.
Thanks in advance.
$(document).ready(function() {
$("a[href^='#']").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}
You can animate window scroll by yourself
$(".menu2").click(function(){
$(document.body).animate({
"scrollTop": $("#contact").offset().top
}, 2000, "swing"); // animation time and easing
return false; // preventing default jump
});
Fiddle: http://jsfiddle.net/M8JE2/
Or use jquery plugin like http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html to make any/all local links work with animation.
Here it is , scrolls to the bottom of the page since your contact form is there:
jQuery(function () {
jQuery('#nav1 li.menu2').click(function (e) {
jQuery("html, body").stop().animate({
scrollTop: jQuery(document).height()
}, 1000);
e.preventDefault();
return false;
});
});
I have this function:
$('body').on('click', '.kategorija_izbor ul a, .mali_oglas a[role=pretraga]', function(e){
var mgl_wrapper = $('.mali_oglasi_wrapper'),
mgl = $(".mali_oglasi"),
mgl_space = $(this).attr('href').replace(/\s+/g, '-').toLowerCase();
link = mgl_space + ' .mali_oglasi';
mgl.animate({'opacity' : 0}, 400, function(){
mgl_wrapper.load(link, function(){
mgl.animate({'opacity' : 1}, 400);
});
});
e.preventDefault();
});
It is working, but I would like to know is there another way to do it. It seems to me that this way is time consuming and resource inefficient. Every time page is clicked script is going through DOM and search for specific elements. Is there a way to store .kategorija_izbor ul a and .mali_oglas a[role=pretraga] (they are bout loaded via load function )?
EDIT I
.kategorija_izbor ul a and .mali_oglas a[role=pretraga] are children of mgl_wrapper *( $('.mali_oglasi_wrapper')), and they are dynamically created every time they are clicked.
If the elements are only being loaded into mgl, just restrict the click handler's scope so jQuery doesn't have to search through the entire body:
var $mgl_wrapper = $('.mali_oglasi_wrapper');
var $mgl = $('.mali_oglasi');
$mgl.on('click', '.kategorija_izbor ul a, .mali_oglas a[role=pretraga]', function(e) {
var mgl_space = this.href.replace(/\s+/g, '-').toLowerCase();
$mgl.animate({'opacity' : 0}, 400, function() {
$mgl_wrapper.load(mgl_space + ' .mali_oglasi', function() {
$mgl.animate({'opacity' : 1}, 400);
});
});
e.preventDefault();
});