CODEWITHSUNDEEP
javascriptjqueryajax
jayhendren
jayhendren

Reputation: 4518

jQuery/Javascript: HTML pulled in by AJAX request does not include <script> elements

I have a dynamic page which uses an AJAX request kicked off by jQuery to pull in HTML elements from the server and insert them into the DOM.

The problem is that when I have elements within the response, they are stripped out.

For instance, if I request the following from the server:

<!-- content.html -->
<div>
    There is some content here!
    <script>
        manipulateContent();
    </script>
</div>

What actually gets injected into my dynamic page is the following:

<!-- content.html -->
<div>
    There is some content here!
</div>

I have tested in Chrome, Firefox, and Safari with identical results.

The relevant Javascript which creates the AJAX request is here:

function loadContent(url){
    var a = document.createElement('a');
    a.href = url;
    if (a.search == ""){ 
        url = url + "?trim=true";
    } else {
        url = url + "&trim=true";
    }

    var ch = $('#content-container').height();
    // var wh = $(window).height();

    $("#content").animate({top: '-='+ch+'px'}, 500, function(){
        $.get(url, function(data){
            $("body").scrollTop(0);
            $("#content").html(data);
            $("#content").css({top: ch+'px'});
            $("#content").animate({top: '0px'}, 500);
        });
    });
}

$(document).ready(function(){

    // get the current path and save it for later
    var currentPage = location.pathname+location.search;

    $(".content-link").live("click", function(){
        // using the HTML5 history API, add the requested path
        // to the browser history, then load the new content
        history.pushState({ path: this.path }, '', this.href);
            // because the page is not reloaded, $(document).ready()
            // is not called, so the currentPath must be updated manually
                currentPage = this.href;
        loadContent(currentPage);

        return false;

    });

    window.addEventListener('popstate', function() {
        // compare the current path to the one being loaded
        // if they are different, then load the content
        // else, nothing happens
        if (currentPage != location.pathname+location.search){
            // because the page is not reloaded, $(document).ready()
            // is not called, so the currentPath must be updated manually
            currentPage = location.pathname+location.search;
            loadContent(currentPage);
        }
    });

});

How can I tell jQuery to include the tags in the response? I've tried browsing through the jQuery docs without much luck, or even mention of the fact that the tags are stripped out. Perhaps I'm just not looking in the right places.

Upvotes: 1

Views: 1003

Answers (2)

Ilia Frenkel
Ilia Frenkel

Reputation: 1977

According to jQuery documentation (http://api.jquery.com/jQuery.ajax/) if dataType option is html:

Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

By default this option is set to Intelligent Guess, so you may want to check the type of response from the server.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

You need to use load, since the whole purpose here is to load hml content to a element.

function loadContent(url) {
    var a = document.createElement('a');
    a.href = url;
    if (a.search == "") {
        url = url + "?trim=true";
    } else {
        url = url + "&trim=true";
    }

    var ch = $('#content-container').height();
    // var wh = $(window).height();

    $("#content").animate({
        top : '-=' + ch + 'px'
    }, 500, function() {
        $("#content").load(url, function() {
            $("body").scrollTop(0);
            $("#content").css({
                top : ch + 'px'
            });
            $("#content").animate({
                top : '0px'
            }, 500);
        });
    });
}

Upvotes: 1

Related Questions