jquery tabs ajax problem

Question

Hello,

This my javascript :-

<script type ="text/javascript">
    $(function()
    {
$("#tabs").tabs({ cache: true ,fx: { opacity: 'toggle' }});


    });

</script>

And this is my html which loads php file using ajax :-

  <ul>
            <li><a href="#tab1">General</a></li>
            <li><a href="<?php echo base_url() . 'Admin/Messages.php' ?>">Messages</a></li>
            <li><a href="<?php echo base_url() . 'Admin/Pics.php' ?>">Pics</a></li>
            <li><a href="<?php echo base_url() . 'Admin/Facilities.php' ?>">Facilities</a></li>

        </ul> 

The question i want to know is when Messages.php is loaded does the javascript onload event fire? I want to know because i want to take my textarea and convert it into editor. However i am not able to capture window.onload event :-

   window.onload = function(){
        alert('hello');
    }

and further if i write something in :-

 $(function(){
}

It works in Opera and IE but sometimes doesn't work sometimes. To sum, how do i capture window.onload in the above situation?

EDIT

Looks like $(function(){ } seems to be working, the problem is with fx: { opacity: 'toggle' }. When i remove effect, it works fine.

Thanks in advance :)

Answer 1

The window.onload event will not fire, in the document you're loading into it already fired earlier.

You should be able to use document.ready, e.g. $(function() { }); in the page you're fetching and it work, provided you're on at least jQuery 1.4.2+. Several issues were fixed with events in the 1.4.2 release, including one around this being inconsistent, if you're using 1.4.1 or below, I can't promise it being 100% consistent.

Alternatively, you can have the code in the main page instead of inside Messages.php and run the code in the load event of the tabs, like this:

$("#tabs").bind("tabsload", function(event, ui) {
  $('.myEditorClass', ui.panel).myEditorPlugin();
});

Answer 2

I've noticed in some browsers that if you use display:none it won't render anything inside that tag, it just ignores whatever's in there because it's not being displayed. I'm not sure if that fx setting is using .hide(), but that could part of the issue.

Also why not set up a function on the loaded pages called "init", then have ajax do a callback to trigger it?