Question

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();
});