How to make the Execution of the javascript in an ajax response page?

Question

I am having the ajax call, which gets the whole page from that page, I am getting the portion of the page(Which has the javascript). When I append that portion of the html page, javascript is not executed.

If I append the ajax response directly, the script is executed and working fine. My issue is, why javascript is not executed, when I try to append the portion of the page from ajax response ? I want to make it work. Any suggestions ?

Javascript function :

function showUsers(pageNumber) {
    $.ajax({
        url : '/ajax/users/show_users',
        data : {
            pageNumber : pageNumber == null ? 1 : pageNumber
        },
        type : 'get',
        cache : false,
        dataType: 'text',
        success : function(response, textStatus, xhr) {
            var resultData = '<div>' + response + '</div>';
            var todo = $(resultData).find("#todo");
            console.log(todo.text());
            $('#users').html(todo);
        }
    });
};

show_users.html page :

<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/resources/js/jquery.js"></script>
</head>
<body>
    <h1 id="kalees">My First Heading Kalees</h1>
    <div id="todo">
        <h1>My First Heading</h1>

        <p>My first paragraph.</p>

        <script>
            $(document).ready(function() {
                alert("Hello world from ajax html page");
            });
        </script>
    </div>
</body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 12:28

I think your violating "Same Origin Policy" http://en.wikipedia.org/wiki/Same_origin_policy So if that is the correct problem this should explain why.

"In computing, the same-origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The policy permits scripts running on pages originating from the same site – a combination of scheme, hostname, and port number[1] – to access each other's DOM with no specific restrictions, but prevents access to DOM on different sites.[1] Same-origin policy also applies to XMLHttpRequest and to robots.txt.[2]"

The concept and solution is also explained in this post by Ben Everard How to call external url in jquery?

. . .

JSONP is his suggested solution: "Without using JSONP you're hitting the same-origin policy which is blocking the XmlHttpRequest from getting any data back" so you need to give it the same protocol and host so it can trust to load this.

If you find the time it sounds like you are probably facing a pretty standard issue with AJAX not calling things in an intuitive way so maybe take some time to look at how the Async calls work.

There are several good answers to AJAX calls in other posts. How do I return the response from an asynchronous call?

FelixKing gives two solutions here that explain the problem AND how to code a solution in a proper way.

Also if none of those work you could try adding the error function and seeing what it tells you:

     success : function(response, textStatus, xhr) {
         var resultData = '<div>' + response + '</div>';
         var todo = $(resultData).find("#todo");
         console.log(todo.text());
         $('#users').html(todo);
     },
     error: function(e) {
         alert('Error: '+e);
     }

Hope this helps!

How to make the Execution of the javascript in an ajax response page?

Javascript function :

1 Answers1