开发者

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);                                                                        开发者_C百科      
                    });
                  }
            });                                   
            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...


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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜