This week's book giveaway is in the Java in General forum.
We're giving away four copies of Beginning Java 17 Fundamentals: Object-Oriented Programming in Java 17 and have ishori Sharan & Adam L Davis on-line!
See this thread for details.
Win a copy of Beginning Java 17 Fundamentals: Object-Oriented Programming in Java 17 this week in the Java in General 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

Returning JavaScript via Ajax

 
Ranch Hand
Posts: 510
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have a div on a page. I make an AJAX call to a Struts Action that eventually forwards to a jsp which is returned in the AJAX response. I set this returned jsp (which is HTML at this point) the div's innerHTML. The div is rendered as a YUI Panel. The rendering works well but in the returned jsp (HTML) I also have some Javascript (functions and some event listeners that are wired to the jsp components such as onClick events).

My problem is that while the rendering works fine, the javascript does not seem to be functional. I get JavaScript errors taht say the functions are not defined.

Any ideas?
[ December 29, 2007: Message edited by: Bear Bibeault ]
 
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I think that your javascript functions need to be defined or attached to the page that contains the panel.
[ December 29, 2007: Message edited by: Jean-Philippe Toupin ]
 
Sheriff
Posts: 67620
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
The browsers will not parse and execute any JavaScript returned in an Ajax response on their own. You need to locate and cause the scripts to be evaluated.

Trying to get this to happen in a cross-browser fashion is nothing short of a nightmare and is one of the reasons that I, and Eric as well, always recommend using a library such as jQuery or Prototype to make Ajax calls for you. These libraries have already solved the knotty problems such as you are encountering.

For example, to load a div with the id of "targetDiv" from your action using jQuery would be as simple as:



Any script blocks in the response will automatically be located and evaluated on your behalf.
 
Michael Ku
Ranch Hand
Posts: 510
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Let me provide more detail. I had previously written a series of jsps for a user registration process (5 step process). Each jsp had javascript as part of the page. I was asked to make these steps appear in a YUI Panel instead of seperate pages. I am trying to re-use most of the existing code, so instead of posting from start to page1 then page 2 etc, I am on the start page that has a div with an id = register. In the YUI call, I still call page1, page2, etc but I do it with a YUI connection manager call and set the responseText to the innerHTML of the register div. The presentation is fine, but the JavaScript that is part of the page1, page2 does not work. I am starting have some success when I remove the JavaScript from page1, page2, etc and placing it in the start page. I was hoping to avoid doing this.
It seems that the DOM is refreshed when I set the innerHTML of the div but the page does not recognize that the streamed JavaScript even exists. The events and event handlers associated with say a button are recognized but the fucntions that execute on say an onClick cannot be found. If the streamed jsp had a button with an onClick event that called the doME function and the doMe function was part of the page1 jsp the JavaScript error is that the doMe function is not defined unless I place it in the start page. Now some of the javascript has EL code that is resolved serverside then streamed back to the browser as part of the AJAX call, I cannot place this in the start page since these values are dependent on whcih step I am executing and the values are not available until I go thru my Struts Action for that step.

Is there a way to tell the browser to re-evaluate the page for the JavaScript in a way similar to the way the page re-evaluates and re-builds the DOM when I set the innerHTML of the div?
 
Bear Bibeault
Sheriff
Posts: 67620
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
How did my response not address your question?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Setting the JavaScript code with innerHTML does not work. The browser does not put the new script code into memory unless you do it manually.

As Bear said, the JavaScript needs to be run with eval. I am not sure if the YUI library has something like evalScripts in Protoype.js. Take a look at their api.

Eric
 
Michael Ku
Ranch Hand
Posts: 510
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

How did my response not address your question?



It only partially addressed my question. You pointed out the need but not the way.

I need to try and do this using YUI. I was hoping that someone might know how to do it using YUI.

If I need to do it manually, would you please explain how I could do this? Is there a JavaScript call or function that would do this for me. If Protoype.js can do it, then there should be an equivalent "raw" way (however messy or difficult) to do it. If there is, I would like to know what it is.
[ December 29, 2007: Message edited by: Michael Ku ]
 
Bear Bibeault
Sheriff
Posts: 67620
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
Are you using YUI to do your Ajax? If not, then "finding a YUI way" makes no sense. If so, then you need to look into the YUI docs to find out if it will do this for you.

Originally posted by Michael Ku:
then there should be an equivalent "raw" way (however messy or difficult) to do it. If there is, I would like to know what it is.



If you are doing the Ajax outside YUI, then employing one of the libraries is your best bet and there's no reason not to use one. If you want the "raw way" I doubt anyone here is going to go into the nuances necessary to implement this in a cross-browser way. You'd be best off downloading one of the libraries and seeing how they did it. Of course, if you're going to lift library code, you might as well just use the library.
 
Michael Ku
Ranch Hand
Posts: 510
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Yes, Bear, I am using YUI. This is the solution upon which ideally I would like to focus. I tried to provide all the details to make it clear.

Thanks for trying
 
Bear Bibeault
Sheriff
Posts: 67620
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
The YUI docs are your best bet then.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic