-2

I searched for similar questions but no luck.

If I add an element to DOM with ajax, I can't control it. I know, live method will works for events but I just want to show/fade it.

Is there a way to control those ?

$("#menu > div > ul > li > a").click(function(){
    var page = $(this).attr("href").replace('#','');
    $.ajax({
        url: page + '.php',
        beforeSend: function() { $("#page").fadeOut(); $('#loader').fadeIn("slow"); },
        complete: function() { $('#loader').fadeOut(); },
        success: function(data){
            $('body').append(data);
            $(data).show();
        }
    });
});

The data contains following and Its a string;

<div id="container-01"> <div class="left"> left </div> <div class="right"> right </div> </div>

Thank you.

Tim
  • 699
  • 8
  • 27
  • 2
    Post your code, hard to help you when we don't know what you've done. – Anthony Grist Sep 06 '11 at 08:36
  • 1
    You are probably trying to manipulate the element before it is loaded. Try doing your animation in the callback function of the load() (or other AJAX-method) and see if this helps. Just a guess though. – m90 Sep 06 '11 at 08:39
  • The question is pretty basic and the problem is pretty common actually. Anyway, I added the code sample. Thanks for minus btw. – Tim Sep 06 '11 at 08:46
  • can you tell whats in the `data` – Rafay Sep 06 '11 at 08:49
  • 3nigma, I edited the original message again. You can see the content. – Tim Sep 06 '11 at 08:59

2 Answers2

1

I think you'd be better off if you put all your loaded content into a wrapper element and try to toggle this wrapper. Sth like:

...
success: function(data){
            $('#mywrapper').html(data);
            $('#mywrapper').show();
        }
...

This assumes that your data is HTML, btw.

EDIT: seeing your passed data you could easily do it like this:

...
success: function(data){
            $('body').append(data);
            $('#container-01').show();
        }
...

This will need an #container-01{display:none;} style rule, but I guess that should be ok.

m90
  • 11,434
  • 13
  • 62
  • 112
  • Yay, this works. I was tried this actually but I guess I did typo or something. Thank you. – Tim Sep 06 '11 at 09:08
0

Yea you need to do this on the callback function, you will get your data and then do fadein. But you may need to hide the content first before you fade it in. You could also hide a container div and do .load to load the html and then fadein on the callback.

So try this:

wrapper = $('<div class="wrapper">')
$("body").append(wrapper)
$(wrapper).hide().html(data).show();

For some reason it's not getting anything from jsfiddle, as far as data goes. So, i just add some text in there as well. http://jsfiddle.net/G9Sa3/

Matt
  • 7,049
  • 7
  • 50
  • 77
  • @Tim, yea i was going to just say you need a selector. You will need to wrap it. Ill update my post right now. – Matt Sep 06 '11 at 08:59
  • Yes, thanks to m90, I figure out. But I was assume that I can use the data as selector cuz I can get it's attributes with $(data).attr(...). – Tim Sep 06 '11 at 09:11