Win a copy of Rust Web Development this week in the Other Languages forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Junilu Lacar
  • Rob Spoor
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Jesse Silverman
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Piet Souris
  • Frits Walraven

Execute JavaScript function present in HTML fragment loaded using AJAX

 
Ranch Hand
Posts: 1211
Mac IntelliJ IDE
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi All,

I have an HTML fragement loaded using AJAX and placed in a div using its innerHTML property.
This fragment contains a JavaScript function that must be executed when the fragment has finished loading. How to do this since body onload event handler cannot be used in this case.

The fragment is something like


When loading this directly from the browser, the call foo() is executed, but not when loading using AJAX.

Any ideas??
 
Sheriff
Posts: 67618
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Just blatting out script into innerHTML will not cause it to execute.

I'd remove the call to foo from the generated script and call it explicitly from the change handler after the innerHTML has been set.
[ May 23, 2006: Message edited by: Bear Bibeault ]
 
Ranch Hand
Posts: 413
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
1. if you put a script there, it should be in <script language=javascript tag.

2. The following code will set innerHTML of an element to some value, and than execute all scripts (I tested this in Firefox only):

[ May 23, 2006: Message edited by: Yuriy Fuksenko ]
 
Sonny Gill
Ranch Hand
Posts: 1211
Mac IntelliJ IDE
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by Bear Bibeault:
Just blatting out script into innerHTML will not cause it to execute.

I'd remove the call to foo from the generated script and call it explicitly from the change handler after the innerHTML has been set.

[ May 23, 2006: Message edited by: Bear Bibeault ]



Thanks for the response, Bear.
Unfortunately that is not an option. The page making AJAX call is a very generic page, that loads different HTML fragments depending on the context, it knows nothing about the page it is loading.

Although, I could set a convention where the page being loaded has to define a JS function with a given name say onHTMLOnLoad or something, and that function gets executed when it finishes loading.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You need to parse out the script, and eval it or add it to ascript tag and append it.

look at prototype, it has some exec feature built in.

Eric
 
Sonny Gill
Ranch Hand
Posts: 1211
Mac IntelliJ IDE
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by Yuriy Fuksenko:

2. The following code will set innerHTML of an element to some value, and than execute all scripts (I tested this in Firefox only):


[ May 23, 2006: Message edited by: Yuriy Fuksenko ]



Thanks Yuriy.
That worked like a charm on both Firefox and IE.
I had to go, find and install IE before I could test it out. I had forgotten how hard that is

@Eric
Thanks Eric. I am already using Prototype for AJAX and some other simple stuff, this tip should come in really handy.

Sonny
 
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi all, I found this thread and it half solves a problem I'm having. Maybe someone can help me solve the other half...

I'm using the code above to set and evaluate some javascript. Problem is, the javascript is called in via src=.. So technically there's no javascript to evaluate, and the function is finishing without doing anything. Here's an example:



There are no errors, but there's nothing to execute either..

anyone have any ideas?
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Play with this:



Eric
 
Mike Willis
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
hmm, no luck.. I end up with the code printed on the page.. will keep tinkering
 
Mike Willis
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
just want to give this a bump..
 
Bear Bibeault
Sheriff
Posts: 67618
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
https://coderanch.com/t/118824/HTML-JavaScript/HTML-AJAX-response-embedded-js
[ October 03, 2006: Message edited by: Bear Bibeault ]
 
Ranch Hand
Posts: 119
Oracle Opera Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
just want to give this a bump..
good work !!
 
Bear Bibeault
Sheriff
Posts: 67618
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Wow! Old info.

But both Prototype and jQuery will execute script in Ajax responses.
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic