CODEWITHSUNDEEP
jqueryajax
Cameron
Cameron

Reputation: 28783

jquery doesn't work in page called by ajax

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

Upvotes: 1

Views: 590

Answers (4)

Adeel
Adeel

Reputation: 1

The reason alert doesn't come up on ajax request is because the "document" has already executed the "ready" state.

Remove $(document).ready() from the js file (leave alert() on its on in there) and try loading it via ajax. It should work.

Upvotes: 0

fdfrye
fdfrye

Reputation: 1099

When you say you are "calling" a page via Ajax, do you mean you are requesting some HTML(dynamic or otherwise) from the server that happens to contain this JavaScript with it?

If so, that snippet should run, but not until you insert it into the DOM.

If you are using jQuery, the most typical way of getting HTML from a server and replacing the contents of a DOM element with it is the "load" method:

jQuery .load()

Upvotes: 0

Mika Andrianarijaona
Mika Andrianarijaona

Reputation: 1647

Your remote js code is not executed when you call AJAX but you can return a js script as text and execute it on your page using the eval() function

Upvotes: 0

Pablo Fernandez
Pablo Fernandez

Reputation: 105210

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.

Upvotes: 2

Related Questions