Question

If I have the following in a page:

$(document).ready(function () {
                    alert('moo');
                });

It will show the alert when I view that page BUT if that page is called via Ajax then the alert will not show… Any ideas why? Or how to get around this?

Note: This is test javascript and i’m not actually showing an alert in my real app

Thanks

Ajax jazz as requested:

$(document).ready(function ()
    {
        $('ul#ui-ajax-tabs li a').click(function (e)
        {
            e.preventDefault();
            $("ul#ui-ajax-tabs li").removeClass("selected");
            $(this).parents('li').addClass("loading");
            var url = $(this).attr("href");
            var link = $(this);
            $.ajax({
                url: url,
                success: function (responseHtml)
                {
                    //$('div#ui-tab-content').html($(responseHtml));
                    $('div#ui-tab-content').html($(responseHtml).find('div#ui-tab-content > div#ui-ajax-html'));
                    $(link).parents('li').addClass('selected');
                    $("ul#ui-ajax-tabs li").removeClass("loading");
                    History.pushState(null, $(responseHtml).filter('title').text(), url)
                },
                error: function (responseHtml)
                {
                    $('div#ui-tab-content').html('<div class="message error"><p><strong>Something went wrong...</strong> Please contact the Administrator!</p></div>');
                    $(link).parents('li').addClass('selected');
                    $("ul#ui-ajax-tabs li").removeClass("loading");
                    History.pushState(null, $(responseHtml).filter('title').text(), url)
                },
                statusCode:
                {
                    404: function (responseHtml)
                    {
                        $('div#ui-tab-content').html('<div class="message error"><p><strong>Error 404 (Not Found)</strong> Please contact the Administrator!</p></div>');
                        $(link).parents('li').addClass('selected');
                        $("ul#ui-ajax-tabs li").removeClass("loading");
                        History.pushState(null, 'Error 404 (Not Found)', url)
                    },
                    500: function (responseHtml)
                    {
                        $('div#ui-tab-content').html('<div class="message error"><p><strong>Error 500 (Internal Server Error)</strong> Please contact the Administrator!</p></div>');
                        $(link).parents('li').addClass('selected');
                        $("ul#ui-ajax-tabs li").removeClass("loading");
                        History.pushState(null, 'Error 500 (Internal Server Error)', url)
                    }
                }
            });
        });
    });

Answer 1

Your web page is text. The browser you use happens to interpret it when you request it from your servers.

If you’re doing an ajax request, the content will be on a variable as a string waiting for you to do something. It doesn’t matter if it has scripts on it, it won’t auto execute.

You would have to create a script element with that as innerText and append it to the DOM to have it executed by the browser.