AJAX and Javascript with JQuery

[Jacob Wills <ja...@gmail.com>]

Hi,

I'm having problems getting javascript to run properly on pages I load with
JQuery's .load() function. I have a modal window that I want to populate
with a Click page, so I use .load() to grab its template .htm file and then
Click's automapping runs the associated Java class.

The problem is, any controls on the page that use javascript (like
Click-Calendar's CalendarField) don't work, since the external .JS files
aren't being passed in along with everything else. The CSS transfers just
fine, but $jsImports is always empty and when I tried to make use of
getHtmlImports() I found that it isn't even being called during the process.
Even if I try to hack around things and include the .JS files in the
container's page, the controls within the AJAX'ed page still won't work.

Is there a way to make this work, or am I going about this the wrong way?
Would ClickClick's JQuery controls make things any simpler?

Thanks,

--Jacob Wills

RE: AJAX and Javascript with JQuery

["Ozakca, Muzaffer" <mo...@indiana.edu>]

I’d suggest you use Firebug with Firefox if you are not already. It would tell you why your JS doesn’t work in the second case you describe below where you embed the JS into HTML.

When accessing the page directly (not inside a modal dialog), does your JS work OK?

Muzaffer

From: Jacob Wills [mailto:jacob.wills@gmail.com]
Sent: Thursday, April 02, 2009 11:17 AM
To: click-user@incubator.apache.org
Subject: AJAX and Javascript with JQuery

Hi,

I'm having problems getting javascript to run properly on pages I load with JQuery's .load() function. I have a modal window that I want to populate with a Click page, so I use .load() to grab its template .htm file and then Click's automapping runs the associated Java class.

The problem is, any controls on the page that use javascript (like Click-Calendar's CalendarField) don't work, since the external .JS files aren't being passed in along with everything else. The CSS transfers just fine, but $jsImports is always empty and when I tried to make use of getHtmlImports() I found that it isn't even being called during the process. Even if I try to hack around things and include the .JS files in the container's page, the controls within the AJAX'ed page still won't work.

Is there a way to make this work, or am I going about this the wrong way? Would ClickClick's JQuery controls make things any simpler?

Thanks,

--Jacob Wills

Re: AJAX and Javascript with JQuery

[Bob Schellink <sa...@gmail.com>]

Jacob Wills wrote:
> I could indeed get my JS to work by accessing the page directly outside 
> of AJAX. Bob's suggestion got me thinking though, and I tried removing 
> the $(document).ready that was wrapping my JS and suddenly everything 
> worked! So it WAS pulling in the scripts from the page I AJAX'ed in, but 
> it wasn't activating the ready event so nothing was happening.
> 
> Then I added Bob's code snippet to the AJAX'ed page's script and its 
> CalendarField started working. Everything looks good! Thanks a lot for 
> the help, you two!


That's good to know. I've also logged a JIRA [1] to enhance Click's 
addLoadEvent function to automatically enable the "ready" variable for 
Ajax requests.

[1]: https://issues.apache.org/jira/browse/CLK-517

Re: AJAX and Javascript with JQuery

[Jacob Wills <ja...@gmail.com>]

I could indeed get my JS to work by accessing the page directly outside of
AJAX. Bob's suggestion got me thinking though, and I tried removing the
$(document).ready that was wrapping my JS and suddenly everything worked! So
it WAS pulling in the scripts from the page I AJAX'ed in, but it wasn't
activating the ready event so nothing was happening.

Then I added Bob's code snippet to the AJAX'ed page's script and its
CalendarField started working. Everything looks good! Thanks a lot for the
help, you two!

--Jacob Wills

Re: AJAX and Javascript with JQuery

[Bob Schellink <sa...@gmail.com>]

Bob Schellink wrote:
> 
> As a workaround you can try to add the following JavaScript script 
> snippet in your container Page:
> 
> if (typeof(Click) != 'undefined')");
>     script.append("if (typeof(Click.domready) != 'undefined')");
>         script.append("Click.domready.ready = true;
> 

Sorry the snippet should be:

if (typeof(Click) != 'undefined')
     if (typeof(Click.domready) != 'undefined')
         Click.domready.ready = true;

Re: AJAX and Javascript with JQuery

[Bob Schellink <sa...@gmail.com>]

Hi Jacob,

Jacob Wills wrote:
> 
> The problem is, any controls on the page that use javascript (like 
> Click-Calendar's CalendarField) don't work, since the external .JS files 
> aren't being passed in along with everything else. The CSS transfers 
> just fine, but $jsImports is always empty and when I tried to make use 
> of getHtmlImports() I found that it isn't even being called during the 
> process.


So $cssImports is populated but $jsImports is not? This is strange 
because both variables are set and processed at the same time.


  Even if I try to hack around things and include the .JS files
> in the container's page, the controls within the AJAX'ed page still 
> won't work.


Some Click controls such as CalendarField makes use of the 
addLoadEvent function in the script, control.js. addLoadEvent is fired 
when the page DOM is ready which is similar to JQuery's "ready" 
function. In other words a component such as CalendarField can 
register itself to receive a callback when the DOM is ready. What 
might be happening here is that the Ajax call is made after the page 
DOM is ready, thus when CalendarField registers itself with 
addLoadEvent it never receives the callback because the DOM ready 
event is not fired again.

As a workaround you can try to add the following JavaScript script 
snippet in your container Page:

if (typeof(Click) != 'undefined')");
     script.append("if (typeof(Click.domready) != 'undefined')");
         script.append("Click.domready.ready = true;

The above snippet will programmatically set the "ready" variable to 
true so when CalendarField registers itself with addLoadEvent its 
callback should occur immediately.

Let us know if this works or not.

kind regards

bob