ansaurus

Question

JavaScript returned by AJAX is not working. How to work with JavaScript?

Answer 1

A:

Use an absolute URI instead of a relative URL.

Josh Stodola 2009-12-15 17:48:40

Answer 2

A:

By default JavaScript contained with AJAX responses is not executed.

There is no point in building an Ajax handler from scratch when this problem has already be solved in various libraries just as jQuery and Prototype.

Diodeus 2009-12-15 17:48:47

Actually, I disagree. I have built a lot of AJAX handlers from scratch, and it has taught me more than if I had simply included one from a library. From a learning perspective, there is great value in doing something manually, at least once.

Jeff B 2009-12-15 17:55:56

Your first point is valid. Your second point is valid except in cases where one is trying to acquaint her/himself with the finer points of the technology.

Justin Johnson 2009-12-15 17:57:23

Answer 3

+1 A:

In HTML inserted by Javascript does not execute automatically (at least in IE for sure). The only solution to this is to gather each of the script blocks in the loaded HTML and evaluate them each.

EDIT

I am using YUI here... the Dom class can collect all script tags from within the given block.

var domElement = document.getElementById("Alex");
var scriptBlocks = YAHOO.util.Dom.getElementsBy(function() {return true;},'script',domElement);
for (var i = 0 ; i < scriptBlocks.length ; ++i){
    eval(scriptBlocks[i].innerHTML);
}

Simple as that. Also becareful about Internet Explorer... if you load in HTML using ajax, and it comes back with the script block as one of the first elements, it will, for some odd reason, ignore the script block and not include it in the response. To fix it, put a div above the script block with text in it with a style attribute of display:none;

If this is the HTML returned to IE, it will not include the script block in the response

<div>
   <script type="text/javascript">
     /* Some javascript */
   </script>
</div>

This will fix the issue

<div style="display:none;">some text</div>
<div>
   <script type="text/javascript">
     /* Some javascript */
   </script>
</div>

Very weird, but thats how IE rolls.

Zoidberg 2009-12-15 17:51:09

can u give me aexample?

Alex 2009-12-15 17:52:52

There, I gave some more details, I also included a quirk of IE that you may want to be careful of. If you use a good strict doctype the quirk may not be an issue

Zoidberg 2009-12-15 18:12:03

Answer 4

A:

Adding a <script> element into a document via innerHTML doesn't(*) execute its contents as a script.

You're also trying to insert the entire HTML document, including <html>, <head> and <body> inside a <div>, which is quite invalid.

If you need to return both HTML and some script to execute, better to return a JSON object, eg.:

{
    "html": "<div id="Mathew"></div>",
    "js": "document.getElementById(\"Mathew\").innerHTML='ajax is working';"
}

then parse the JSON object, set the innerHTML to obj.html and eval the js. (Though it's generally questionable to be returning and executing arbitrary, scripts, there can sometimes be a use for it.)

(*: Well, doesn't generally. Exactly when a <script> element's contents get executed is browser-dependent. For example Firefox executes script when you append/insert a DOM HTMLScriptElement or ancestor into an element that is part of the document, whereas IE executes it when you insert the element into any parent for the first time, whether inside the document or not. In general, avoid inserting JavaScript-in-HTML content into HTML.)

bobince 2009-12-15 17:56:58

is it work... but in my real test2.asp is working woth more javascript functions( passing different values)

Alex 2009-12-15 18:03:56

Answer 5

A:

Your methodology is slightly amiss. Typically, AJAX is used to send and receive data in non-HTML formats, such as XML, JSON, or sometimes even CSV (however, HTML is sometimes returned to the client, but usually as pieces of a page, not entire pages as in your example).

Logic is rarely transmitted and is usually maintained on the respective sides of the transmission. In other words, the client/request side has all of its own logic and already knows what to do with the data returned from the server/response side (which also doesn't accept or require any logic generated from the client side). Further, the use of eval, which is usually necessary to consistently execute the logic found in the response, is generally frowned upon and considered a bad practice, thus the saying, "eval is evil."

In some cases, it may be necessary, advantageous or just plain easier to receive logic as part of the response from the server. In these situations however, it is still considered a best practice to separate your data from your logic.

All that to nicely say that you're doing it wrong. I encourage you to read up on how AJAX works and how best to use it: w3schools walk-through, Mozilla MDC intro, AJAX and XML processing, updating a page (similar to what I think you're trying to do), and finally, AJAX API docs for jQuery, Prototype and Dojo.

Justin Johnson 2009-12-15 18:29:30

Answer 6

A:

Prototype has a nice way of handling this. See their stripScripts, extractStrips, and evalScripts methods on the String object. If you just strip the scripts, put your text into a div and then evalScripts, that'll work across all brwosers so scripts get executed exactly once.

Bialecki 2009-12-16 02:11:42

ansaurus

tags:

views:

answers:

JavaScript returned by AJAX is not working. How to work with JavaScript?

related questions