Jquery : Do a function only once in ajax load

Question

Hi!

Im trying to do a simple fadeIn ONCE for the first div , but the problem is that this is a ajax load inside a everyTime(xxx sec), so it does the same thing everytime it loads again.

anyone got any ideas on how i can prevent the first div to fadeIn over and over again, but still do this function on the new div?

Not very familiar with Jquery.. so feed me with a spoon :)

Answer 1

You can bind the div to fadein on the first ajax request using .ajaxStop() if it is the first request, unbinding itself so it doesn't happen more than once, like this:

$("#myDiv").ajaxStop(function() {
  $(this).unbind("ajaxStop").fadeIn();
});

Otherwise, just bind this when actually calling the ajax loading the div so it executes when that comes back. Alternatively, in your success function, just show it only if it's current hidden using the :hidden selector, like this:

$.ajax({
 //options..
 success: function(data) {
   //stuff..
   $("#myDiv:hidden").fadeIn();
 }
});

Answer 2

There's a "one()" method in jQuery, that is similar to "bind()" but removes the event after execution. I would suggest giving it a try.

http://api.jquery.com/one/#typedatafn

Answer 3

It depends a bit how your ajax request chain looks like. But If you know it's always the first call. You can just add a class to the div. ie. class="fadeIn" and the remove it once it's faded in.

$('.fadeIn').fadeIn(function () { $(this).removeClass('fadeIn') };

..fredrik

Answer 4

how about using the data store, simply set a value to true once its been shown and check before showing in future. something like...

if(!$('div#yourDiv').data('hasShow')){
     $('div#yourDiv').data('hasShown', true).fadeIn();
}

Edit-

From the code you have posted I have come up with the following;

$(document).ready(function(){

    // Hide the chat line div on load.
    $('div#chatline').hide();

    $("div#chatref").everyTime(3000,function(i){ 
        $.ajax({url: "chatx.php", cache: false, success: function(updated){
            $('div#chatref').html(updated);
            $('div#chatline').is(':hidden').fadeIn('slow');
        }});
    });
});

You need your PHP page to output a div as follows for the chat line.

<div id="chatline"></div>

For the chatref

<div id="chatref"></div>

Hope this helps.

Answer 5

Been trying out all of your suggestions! Really appreciate you help, but im still stuck.. havent got the .one to work ..tried $("#chatline:first").one(function(){ $(this).fadein()}); but major failure from Jquery :p as i said.. im pretty noob in Jq.

also tried adding and removing classes, but cannot make jquery remember that the class is removed.. so it fades in and out etc..

Heres the script, sligtly shorted..

...

j(document).ready(function(){

//reloads every 3sec

j(".chatref").everyTime(3000,function(i){ j.ajax({url: "chatx.php", cache: false, success: function(html){ j(".chatref").html(html);

// These for testing

if($('div#chatline').hasClass('first')){ j("#chatline").fadeIn('slow'); }

snipped... End of jquery

PHP(part of chatx.php):

div class='chatref' <- This one is only for Jquerys everytime function, e.g where to show the stuff. Dont know other ways to do this.

//first div i added classname first and hidden with php

div class='chatline hidden first'

div class='chatline'

div class='chatline' div class='chatline'

.... etc

snipped... End php

Hope i have explained good enough! Thanx for the help guys!!