ansaurus

Question

Injecting javascript and HTML using AJAX

Answer 1

A:

No matter what anyone says, do not use EVAL. It's evil and will give you memory issues if used more than a few times on a page.

See my soluition here: trying to call js code that is passed back from ajax call

Basically, create a div with the ID of "codeHolder" and voila. You'll basically want to pass your HTML and JS back to the AJAX receiver (separated by a separator), parse it on the JS side, display the HTML and put the JS Code in your javascriptCode variable.

//Somehow, get your HTML Code and JS Code into strings
var javascriptCode="function test(){.....}";
var htmlCode="<html>....</html>";

//HTML /////////////////////////////////////////
  //Locate our HTML holder Div
  var wndw=document.getElementById("display");

  //Update visible HTML
  wndw.innerHTML = htmlCode;

//Javascript ///////////////////////////////////
  //Create a JSON Object to hold the new JS Code
  var JSONCode=document.createElement("script");
  JSONCode.setAttribute("type","text/javascript");

  //Feed the JS Code string to the JSON Object
  JSONCode.text=javascriptCode;

  //Locate our code holder Div
  var cell=document.getElementById("codeHolder");

  //Remove all previous JS Code
  if ( cell.hasChildNodes() )
      while ( cell.childNodes.length >= 1 )
          cell.removeChild( cell.firstChild );

  //Add our new JS Code
  cell.appendChild(JSONCode);

//Test Call///////////////////////////////////////
test();

This code will replace all previous JS code you might have put there with the new JS Code String.

Dutchie432 2010-09-14 15:04:18

Answer 2

A:

It depends what your AJAX exactly does. Would you paste relevant parts of your code here?

Jan Turoň 2010-09-14 15:04:20

Answer 3

A:

thanks for the replys.

Dutchie thats exactly what I did. now the thing is the HTML is properly overwritten (i didnt use append i overwrote the entire div) and yes the javascript just keeps on caching... I tryed to disable browser cach and still the problem persists i get multiple context menu per item the more i ran the ajax function...

Jan, My AJAX function builds a div tag and script tags and places them into another container div tag in the page.

what suppoes to happen is that every time the AJAX runs the code inside the container div is overwritten and you get an updated version. the div insisde the container div is overwritten yet the script tags somehow are cached into the memory and now each time the out jqeury function calls the context menu i get multiple menus...

I dont think code is needed but I will post it tomorrow.

Any ideas?

Nadav Y. 2010-09-14 17:42:12

Well, here's the catch... are you putting the original JS code in that div as well, overwriting it each time the AJAX is called? if the orig. JS code is in a JS File, and you are simply duplicating that code, rather than replacing it, you'll have a problem. I would make sure your original JS code is being pulled in exactly the wame way it's being called on a secondary call. IE.. load the page with not menu or JS, and then load it on page load. If you get that working, the refreshing should also work fine! I do the exact same thing on a site of mine. Looking forward to seeing some code.

Dutchie432 2010-09-14 18:09:34

Dutchie432 2010-09-14 18:13:02

mmm the code wont format for me in the reply this is annoting.

Nadav Y. 2010-09-15 06:21:38

However, this is what i got:so basicaly we got the ajax function to inject the html and code it looks liek thhis$.ajax({ type: "GET", url: "../../../Tier1/EditZone/Generate.aspx?Item=contentholder } });

Nadav Y. 2010-09-15 06:22:41

obviously the string that is injected containd both the script tags ad the html tags.question is why does the java script cach in the memory and not just replaces the existing code? btw, when i used view source i didnt see the java script code only the html yet the java script worked properly..

Nadav Y. 2010-09-15 06:24:50

one thing i noticed just now is that you used the JSON object i didnt, i just used plain string when i injeced the code could that be the reason for the problem? i mean to my best of knowldge JSON is a simple string object.

Nadav Y. 2010-09-15 07:05:40

You DO Want to use JSON. If you look at the code, the string variable that contains my final JS Code is fed to the JSONCode object and it is simply being used to hold the javascript code. Then, we find the code holder div, remove any previous code, and place our new JS Code in that div.

Dutchie432 2010-09-15 15:18:51

Check my post again, I've updated it with more detailed comments.

Dutchie432 2010-09-15 15:21:09

Answer 4

A:

Well after some head breaking i figured it out.. (the problem not the solution yet) this is the ajax function right?

$.ajax({
            type: "GET",
            url: "../../../Tier1/EditZone/Generate.aspx?Item=contentholder&Script=true",
            dataType: "html",
            success: function (data) {
                $('#CPH_Body_1_content_holder').html(data);
            }
        });

now they function uses a page with an event handler, that event handler reutnrs the data as followed response.write(answer) it just hit me that when you use response.write it sends the code after it's been compiled and ran in our case at page Generate.aspx.

so the script will run but not in the page i intended it to run and because of that i cannot overwrite it... how silly of me.

what i think ill do it return the data as an actualy string and then and only then inject the code into the container div.

ill let you folks know if that works out. cheers and thanks for the advice these forums rock.

Nadav Y. 2010-09-15 11:45:51

just a quick comment the problem was not solved. if you inject the string with ajax into the existing script tags the script will not run. my guess is that aftert the script tags are written they are compiled in a sort and thus when you inject code into it after they were created the code will not run..I'm open to suggestions :(

Nadav Y. 2010-09-15 13:22:47

ansaurus

tags:

views:

answers:

Injecting javascript and HTML using AJAX

related questions