CODEWITHSUNDEEP
ajaxjquery
Sasha
Sasha

Reputation: 8705

Jquery, ajax, fadeIn, fadeOut

I have this function:

  function update_page(html){
    $('#pagg').html(html);
}

   $(function(){
    $('#pagg > a').live('click', function(event){
         event.preventDefault();
           var link = $(this).attr('href');

       $('.news').fadeOut(2000, function(){                    
          $.ajax({
                 url: link,
                 type: 'get',
                 success: function(html){
                     update_page(html).fadeIn(2000);
                 }
            });
        });
        return false;
    });         
});

fadeOut is working, but fadeIn is not working. What seems to be the problem?

Upvotes: 0

Views: 4755

Answers (6)

user1413147
user1413147

Reputation: 21

function carga_sector(contenedor,url,parametros)
{
    var contenedor="#"+contenedor;
    var url,parametros;
        $(contenedor).html('<div><img src="images/load.gif"/>Cargando...</div>');
        $(contenedor).fadeOut('slow',function()
            {
                    $.ajax(
                    {
                        url:url,
                        type:'post',
                        data:parametros,
                        async:true,
                        success: function(data) 
                                {
                                    $(contenedor).html(data);
                                    $(contenedor).fadeIn('fast');
                                },
                        contentType: "application/x-www-form-urlencoded",
                        dataType: "html",
                        global: true,
                        ifModified: false,
                        processData:true
                     }
                );
            }
        )
}

<a href="javascript:void(0)" 
onclick="javascript:carga_sector('div_nombre','pagina.php','&par1=valor1&valor2=valor2')">Envia Datos < /a>

to

<a href="javascript:void(0)" 
onclick="javascript:carga_sector('div_nombre','pagina.php',$("#form").serialize())">Envia Formulario < /a>

Upvotes: 1

Mark Schultheiss
Mark Schultheiss

Reputation: 34176

Rewritten using delegate:

$(function(){     
    $('#pagg').delegate('a', 'click', function(event){
         event.preventDefault();
         var link = $(this).attr('href');
         $('.news').fadeOut(2000).remove(this);
         $.ajax({
             url: link,
             type: 'get',
             success: function(html){
                 $('#pagg').html(html).find('.news').fadeIn(2000);
             }
         });
     });
     return false; 
});

Upvotes: 0

Mark Schultheiss
Mark Schultheiss

Reputation: 34176

Two issues: one is the chain the other is the call:

function update_page(html){
     $('#pagg').html(html).fadeIn(2000);
}
$(function(){
    $('#pagg > a').live('click', function(event){
        event.preventDefault();
        var link = $(this).attr('href');
        $('.news').fadeOut(2000, function(){
             $.ajax({ 
                 url: link,
                 type: 'get',
                 success: function(html){
                     update_page(html);
                  }
             });
         });
    return false;
    });
});

EDIT: This code does bother me a bit in that IF you are fading from one class of .news to another NEW class, the old one will still BE there and they BOTH will fade back in.

If that is also an issue you may want to remove the old one prior to fade in of the new one...or even prior to the new insertion of new content.

Upvotes: 0

rgin
rgin

Reputation: 2311

update_page() is not a jQuery object.

try: 

function update_page(html){
    $('#pagg').html(html).fadeIn(2000);
}

Upvotes: 0

Billy Moon
Billy Moon

Reputation: 58551

I think your update_page needs to return the jQuery object so it can be chained

function update_page(html){
    return $('#pagg').html(html);
}

Upvotes: 0

Kevin B
Kevin B

Reputation: 95027

modify the update_page function to this:

function update_page(html){
  return $('#pagg').html(html);
}

so that .fadeIn() gets called on a jquery object.

Upvotes: 0

Related Questions