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

Sorry i didn't mention this, Ajax call will simply load the next page in the gallery, I have a list of images in a div. — , Aug 02 '12 at 22:32
How to rerun it after the ajax call is done ? Just to point out I'm using Dajax not Ajax, it's Ajax for Django. It's a bit different, no if success or something. I'll check it out now if i can run a function after the call. — , Aug 02 '12 at 22:34
If it doesn't have a success function, that's a pretty bad ajax library :) — Sean Thompson, Aug 02 '12 at 22:38
You have a success function: `add_data(data,callback_function)` which: **Send data to the browser and call the callback_function with that data** https://github.com/jorgebastida/django-dajax/wiki — amiry jd, Aug 02 '12 at 22:47
Your `live` method is correct. For initial images test this one: `$(".gallery").delegate("ul li img.a", "load", function () { $(this).fadeTo("slow", 0.5); }` **OR** post your ajax call to help more. — amiry jd, Aug 02 '12 at 22:50
@Javad_Amiry I just checked it out, not sure thought how to make it work. I'll post the ajax call now. — , Aug 02 '12 at 22:54

dqhendricks · Answer 1 · 2012-08-03T16:04:32.463

0

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/

edited Aug 03 '12 at 16:04

answered Aug 02 '12 at 22:41

dqhendricks

19,030
11
50
83

Also, I'm not sure if the `on` event works as expected if you are not using jQuery to add the content to your page. Perhaps try using jQuery to do you ajax and loading of content into a div. – dqhendricks Aug 02 '12 at 22:45
Just to be clear, you don't have to pass a selector to `on()`. If you want to directly register a listener on an element you don't pass a selector. You pass a selector when you want a delegated event registration, which might be good for the OP in this case, although I really can't make sense of their code. – JMM Aug 03 '12 at 00:46

amiry jd · Accepted Answer · 2012-08-03T12:43:41.717

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>

I gave it try right now but it seems it didn't work, even dajax stopped working. — , Aug 03 '12 at 11:38
use `reBindStuffs` instead of `'reBindStuffs'` and test again — amiry jd, Aug 03 '12 at 12:11
I really don't know how to thank you. I simply don't know. Thanks a lot for all your help. — , Aug 03 '12 at 12:38

score 0 · Answer 3 · edited Jul 10 '18 at 12:15

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: '...',});});
        }
    }
});

Making jquery plugins work after an Ajax call

3 Answers3

Linked

Related