CODEWITHSUNDEEP
javascriptjquerycodeigniter
Sasha
Sasha

Reputation: 8705

Jquery, Codeigniter 2.1 - pagination issues

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?

Upvotes: 2

Views: 282

Answers (2)

soonji
soonji

Reputation: 79

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(); 
});

Upvotes: 1

Vishal
Vishal

Reputation: 1234

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

Upvotes: 3

Related Questions