Safari : jQuery functionality not working in ajax loaded content

Question

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...

Can you post code samples please? – Ant Jun 08 '11 at 08:01 — Ant, Jun 08 '11 at 08:01

score 1 · Answer 1 · answered Jun 08 '11 at 08:26

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.

Still nothing... no alert nadda. :\ – Chris Dowdeswell Jun 08 '11 at 08:47 — Chris Dowdeswell, Jun 08 '11 at 08:47

score 0 · Accepted Answer · answered Jun 08 '11 at 09:50

0

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.

answered Jun 08 '11 at 09:50

Chris Dowdeswell

858
2
11
25

Safari : jQuery functionality not working in ajax loaded content

2 Answers2