CODEWITHSUNDEEP
javascriptjqueryxhtmlsafari
Chris Dowdeswell
Chris Dowdeswell

Reputation: 868

Safari : jQuery functionality not working in ajax loaded content

I have a page dashboard.asp It opens a dialog and using ajax loads... profile.asp

Within profile.asp there are various jquery functions relating to the functionality of the profile. All is well accept Safari will not not load $(document).ready in the loaded content.

A secondary question would be should I be including <script src="jquery.js"></script> in the ajax loaded page as well as the parent page.

Code within dashboard.asp

<script language="javascript">
    $(document).ready(function(){              
        $("a[rel=profile]").live('click',function() {                                 
            var profileURL = $(this).attr('href');
            var title = $(this).attr('title');
            $.ajax({
                url: profileURL,
                cache: false,
                success: function(data) {
                    $( 'html, body' ).animate( { scrollTop: 0 }, 0 );
                    $("#overlayer").fadeIn();
                    $('#profile_menu_wrapper').load('/profile.asp',{a:title},function(){
                        $('#profile_menu_wrapper').fadeIn(1000);
                        $("#profile").html(data);
                        $("#profile").fadeIn(1000);                                                                              
                    });
                  }
            });                                   
            return false;
        });
    });
</script>

Which works fine and opens a dialog as I wanted...

But the code within profile.asp

<script language="javascript">
    $(document).ready(function(){
        alert("Ready")
    });
</script>

Does not run...

Upvotes: 0

Views: 1644

Answers (2)

Chris Dowdeswell
Chris Dowdeswell

Reputation: 868

Argh!

I had left <html><body> etc in the Ajax loaded content which was messing everything up!

Thank you for your answers, upvoting them as they were correct in the context.

Upvotes: 0

GregL
GregL

Reputation: 38161

Change the code in profile.asp as follows:

<script language="javascript">
    $(document).ready(InitProfileJqueryFunctionality);

    function InitProfileJqueryFunctionality() {
        alert("Some stuff");
    }
</script>

Then change the code in Dashboard.asp to invoke that function within the loaded page if it exists.

<script language="javascript">
    $(document).ready(function(){              
        $("a[rel=profile]").live('click',function() {
            $("#profile").hide();                                     
            var profileURL = $(this).attr('href');
            var title = $(this).attr('title');
            $.ajax({
                url: profileURL,
                cache: false,
                success: function(data) {
                    $( 'html, body' ).animate( { scrollTop: 0 }, 0 );
                    $("#overlayer").fadeIn();
                    $('#profile_menu_wrapper').load('/profile.asp',{a:title},function(){
                        $('#profile_menu_wrapper').fadeIn(1000);
                        $("#profile").html(data);
                        $("#profile").fadeIn(1000);        
                        if (typeof(InitProfileJqueryFunctionality) != 'undefined')
                            InitProfileJqueryFunctionality();                                          
                    });
                  }
            });                                   
            return false;
        });
    });
</script>

I would say it is a good idea to keep the reference to load jQuery.js in the profile.asp page, as that then gives you the flexibility to open that page normally (e.g. not via AJAX) and have it still work.

Upvotes: 1

Related Questions