Databases
StackOverflow2013
Postsdbo
POMaking jquery plugins work after an Ajax call
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking jquery plugins work after an Ajax call
    text
    copied!<p>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.</p> <p><strong>First:</strong></p> <p><code>fade.js</code>:</p> <pre><code>$(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 }); }); </code></pre> <p>The problem here is after the ajax call of the next page, the fade stops working. So what I did is </p> <pre><code>$(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 }); }); </code></pre> <p>But this will only work when I hover over the image then the image will fade out. If I do the same for <code>$(".gallery ul li img.a").fadeTo</code> to <code>.live(...)</code> nothing happens, it simply doesn't work.</p> <ul> <li>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.</li> </ul> <p><strong>Second:</strong> </p> <p>I have a small slider that slides up on the image, <code>slider.js</code>:</p> <pre><code>$(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}); }); }); </code></pre> <p>I changed <code>$('.gallery li').hover(...)</code> to <code>$('.gallery li').live("hover", function(){...})</code> but still it didn't work. Also I used <code>.on</code> instead of <code>.live</code> because it's deprecated.</p> <p>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.</p> <p>Ajax:</p> <pre><code>@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() </code></pre> <p>Edit2:</p> <pre><code>&lt;a href="#" onclick="Dajaxice.gallery.gallerypages(Dajax.process, {'p': {{ items.previous_page_number }},})" class="btn_prev"&gt;&lt;b&gt;&amp;lt;&lt;/b&gt;&lt;/a&gt; </code></pre> <p>and </p> <pre><code>$(document).on("keydown", "#pagenumber", function(e) if ( e.which === 13 ) { Dajaxice.gallery.gallerypages(Dajax.process, {'p': this.value}); }}); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload