jQuery Loads .aspx Page But Doesn't Execute the Script Inside

Question

i'm trying to load .aspx page using jquery like this;

        $('ul#menu li ul.collapse').on('click', 'li a', function (e) {
            e.preventDefault();
            var div = $('#content .container-fluid .row-fluid .span12');

            var url = $(this).attr('href');
            setTimeout(function () {
                var htmlPage = div.load(url + ' #MainContentHolder',
                    function () {
                         //other stuff
                    });
            }, 1000);

        });

However, my .aspx page does have javascript embedded like this;

<div id="MainContentHolder">
    <h1>Test Aspx Content</h1>
    <div>
        <script type="text/javascript">
            alert("hello");
        </script>
    </div>
</div

When, i see the resulted HTML, i can see the it is loaded (using firebug). But it's not showing the alert() message
I have also read all other questions on stackoverflow but it's not helpful on this to me;

UPDATE:

As suggested in asnwer, following code only works for the first time. I tried to turn off the cache:false and also tried from GET to POST;

 $.ajax({
         url:url,
         success:function(data){
         div.html(data);
    }
});

load the aspx using `$.ajax` and then use `$.html` to insert the result. `$.html` will execute embedded scripts — Khanh TO, Jun 21 '13 at 08:40
@Aristos, yes you are right but i want that script should be executed — Idrees Khan, Jun 21 '13 at 09:36

score 1 · Answer 1 · edited May 23 '17 at 10:25

var htmlPage = div.load(url + ' #MainContentHolder', function () { //other stuff });

As per the documentation of .load(),

If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

Instead you may want to take your script in js file and use $.getScript(), which will load a JavaScript file from the server using a GET HTTP request, then execute it.

Edit:

Alternate way is to have only script in your page and load that page as shown in below link

jQuery .load() call doesn't execute javascript in loaded html file

OR

As already suggested use $.ajax() and in success callback function, you need explicitly execute your JS code as shown in this post. Use eval.

OR

You can load your dynamic page using .load and in success callback function use $.getScript as already suggested earlier.

I hope it helps!

i cant use `$.getScript()` becuase, as soon as the page is loaded, i want the script to be executed (which are inside that page). The pages are dynamic — Idrees Khan, Jun 21 '13 at 14:42

Khanh TO · Accepted Answer · 2013-06-21T09:46:09.017

1

$('ul#menu li ul.collapse').on('click', 'li a', function (e) {
            e.preventDefault();
            var div = $('#content .container-fluid .row-fluid .span12');

            var url = $(this).attr('href');
            setTimeout(function () {
                $.ajax({
                        url:url,
                        success:function(data){
                                    div.html(data);
                                    //other stuff
                                }
                        });  

            }, 1000);

        });

edited Jun 21 '13 at 09:46

answered Jun 21 '13 at 08:47

Khanh TO

48,509
13
99
115

the script is executed now but it's not filtering the `#MainContentHolder`. It returns the whole page. However, i want just a `Div` inside the page which is name as `MainContentHolder` – Idrees Khan Jun 21 '13 at 09:35
@DotNet Dreamer: for better performance, the server should return only what is needed and we don't need to filter it on client side – Khanh TO Jun 21 '13 at 09:40
i tried your updated code. it's not appending the html. i did `alert(MainContentHolder)` and i m getting `object object` – Idrees Khan Jun 21 '13 at 09:43
ok, dear, thanks for the performance tip. I just `stripped` out the things that i didn't need and then tried your code. But the previous code worked, please update back your answer and please also remove the filtering code – Idrees Khan Jun 21 '13 at 09:47
@DotNet Dreamer: if you stripped out your unneccesary things. You can reuse your `load` method without selector. Like this: `var htmlPage = div.load(url,function(){});` – Khanh TO Jun 21 '13 at 09:49
one more question. why this code works for the first time. i mean i don't see the `alert()` message for the second time when i clicked – Idrees Khan Jun 21 '13 at 09:56
@DotNet Dreamer: check if the browser caches the response (if you're using IE, it's very likely) – Khanh TO Jun 21 '13 at 09:57
@DotNet Dreamer: open your browser built-in network capture to ensure that the response is 200 (not 304) – Khanh TO Jun 21 '13 at 10:12
yeah, i tried it 2 times and it's returning `200` code (using google chrome) – Idrees Khan Jun 21 '13 at 10:16
@DotNet Dreamer: I did not run into this problem before. But my best guess is `$.html` detects the same html string and does nothing. Try `div.html("");` and then `div.html(data);` – Khanh TO Jun 21 '13 at 10:19
the html is loading but the script isn't working. i typed there `alert()` and i'm not getting alert() for the second time. However, i'm getting the html; – Idrees Khan Jun 21 '13 at 10:23
Did you try `div.html("");` and then `div.html(data);` ? @DotNet Dreamer – Khanh TO Jun 21 '13 at 10:25

jQuery Loads .aspx Page But Doesn't Execute the Script Inside

UPDATE:

2 Answers2