Making jquery plugins work after an Ajax call

Question

It's gonna be a long post, but I really had enough of trying to fix this. I'm really looking for some help solving my case.

First:

fade.js:

$(document).ready(function(){
$(".gallery ul li img.a").fadeTo("slow", 0.5); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".gallery ul li img.a").hover(function(){
    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
    $(this).fadeTo("slow", 0.5); // This should set the opacity back to 30% on mouseout
});
});

The problem here is after the ajax call of the next page, the fade stops working. So what I did is

$(document).ready(function(){
$(".gallery ul li img.a").fadeTo("slow", 0.5); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".gallery ul li img.a").live("hover", function(){
    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
    $(this).fadeTo("slow", 0.5); // This should set the opacity back to 30% on mouseout
    });
});

But this will only work when I hover over the image then the image will fade out. If I do the same for $(".gallery ul li img.a").fadeTo to .live(...) nothing happens, it simply doesn't work.

• how can make this work even after an ajax call, which is supposed to fadeto when it loads then fadeout when i hover over it.

Second:

I have a small slider that slides up on the image, slider.js:

$(document).ready(function(){
    //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Full Caption Sliding (Hidden to Visible)
        $('.gallery li').hover(function(){
            $(".cover", this).stop().animate({top:'106px'},{queue:false,duration:160});
        }, function() {
            $(".cover", this).stop().animate({top:'153px'},{queue:false,duration:160});
        });
    });

I changed $('.gallery li').hover(...) to $('.gallery li').live("hover", function(){...}) but still it didn't work. Also I used .on instead of .live because it's deprecated.

What am I doing wrong ? I'm not a client side dude, most of my work is server side. I just need to make these 2 plugins work after the AJAX call happens.

Ajax:

@dajaxice_register
def gallerypages(request, p):

try:
    page = int(p)
except:
    page = 1

items = gallerylist(page)
html = render_to_string('gallery_content.html',
                                {'items': items,}, 
                                context_instance = RequestContext(request))

dajax = Dajax()
dajax.assign('#gallery-content', 'innerHTML', html)
return dajax.json()

Edit2:

<a href="#" onclick="Dajaxice.gallery.gallerypages(Dajax.process, {'p': {{ items.previous_page_number }},})" class="btn_prev"><b>&lt;</b></a>

and

$(document).on("keydown", "#pagenumber", function(e)
    if ( e.which === 13 ) {
    Dajaxice.gallery.gallerypages(Dajax.process, {'p': this.value});
}});

Answer 1

I'm not sure, but test this stuff:

JavaScript via jQuery

var initFade = function() {
    $(".gallery ul li img.a").fadeTo("slow", 0.5);
}

// your custom callback method
var reBindStuffs = function(data) {
    Dajax.process(data);
    // rebind your jquery event handlers here... e.g.
    initFade();
};

$(document).ready(function(){

    // initial first time loaded fade
    initFade();

    // hover live binder
    $(".gallery ul li img.a").live("hover", function(){
        $(this).fadeTo("slow", 1.0);
    },function(){
        $(this).fadeTo("slow", 0.5);
    });

    // document keydown listener 
    $(document).on("keydown", "#pagenumber", function(e)
        if ( e.which === 13 ) {
        Dajaxice.gallery.gallerypages('reBindStuffs', {'p': this.value});
    }});
});

HTML

<!-- a click listener -->
<a href="#" onclick="Dajaxice.gallery.gallerypages(reBindStuffs, {'p': {{ items.previous_page_number }},})" class="btn_prev"><b>&lt;</b></a>

Answer 2

You were headed in the right direction with live, but live is depreciated for the on event. With on, you can include the selector as one of the arguments. The initial jQuery selector is only the container of the objects you want to add handlers to.

<div id="content">
    <div class="sombutton"></div>
</div>

$( document ).ready( function() {
   $( '#content' ).on( 'click', '.somebutton', function() {
      alert( 'do something' );
   } );
} );

Now even if we replace the content within the #conent div, newly added content with the class .somebutton will also have a click handler attached.

http://api.jquery.com/on/

Answer 3

What you mention is a big problem, I refresh by hand. But I also use the .ajaxcomplete functionality. It runs every after every Ajax query

$(document).ajaxComplete(function(){ 
    // Carga tabs por defecto por clases.
    if (typeof jQuery.fn.wf_responsivetab == 'function')
    {
        if ($('#rbtt_1').length)
        {
            $('#rbtt_1').wf_responsivetab({text: '...',});
            $(window).on('resize', function() {$('#rbtt_1').wf_responsivetab({text: '...',});});
        }
    }
});