Ok, here's a simple code sample that demonstrates how to load jQuery and use it in a server callback.

The key to understanding what is happening with this, is to understand when the jaxer server instantiates a DOM.

Let's review, the flow from disk to browser is roughly this.

1. Get the page from disk
2. Spin up the server process and load the page. at this point you have a DOM(1) on the server that has not been passed to the client.
3. Complete the page processing (cache functions, run js etc) and serialize the DOM(1) to the client.
4. Client gets the page and renders its own DOM(2).
5. Client requests callback function
6. Jaxer creates environment for callback to execute within (including a DOM(3))
7. Callback runs and returns.

NOTE.

DOM(1) exists on the server during the page processing and is then discarded.
DOM(2) exists on the client and can be dynamically changed
DOM(3) exists on the server for the duration of the callback. it has no knowledge of the DOM inside the client browser.

It is important to understand these DOMs are not connected, in any way that would allow changes to be synchronized between them.

So this means that when we do a callback, we have to ensure that the environment is setup the way that we want it. To do this we have the special 'oncallback()' function that can be defined on a page.

One of the things you'll have to do here, is to load the jQuery lib (or whichever external lib/code you want) using the Jaxer.load method.

Now another difference during a callback is that the global object is not the window object (we will be fixing this, but for now...) so we have to pull the jQuery object from the window object and make it a global value.

<div id='sandbox'></div> <script runat='server'> Jaxer.Log.info(""); Jaxer.Log.info(Jaxer.request.current.url); document.getElementById('sandbox').innerHTML = "<B>Inserted by the server</B>"; /* * oncallback is a 'special' function name that is run in the context of * a callback prior to the requested data being exec'd. */ function oncallback() { Jaxer.Log.info("Setting up environment for the callback"); if (typeof $j == 'undefined') { /* * now we can load jquery */ Jaxer.load('jquery-1.2.2.min.js'); Jaxer.Log.info("loaded jQuery"); /* * jQuery is bound to the window object * so we need to fully qualify the name * to use it within the context of a callback */ $j = window.jQuery.noConflict(); } else { Jaxer.Log.info("jQuery already loaded."); } } </script> <script runat='server-proxy'> function doCallback(msg) { Jaxer.Log.info(msg+": OK I'm in the callback..."); // put something in the dom document.getElementsByTagName('BODY')[0].innerHTML = "<h1 id='test'>this was set during the "+msg+" callback</h1>" // use jquery to access the DOM node we inserted domCheck = $j('#test').text(); Jaxer.Log.info(msg+": ...callback completed"); // return the CONTENTS of the DOM node to the client. return domCheck; } </script> <script runat='client'> document.getElementById('sandbox').innerHTML = doCallback('first'); document.getElementById('sandbox').innerHTML = doCallback('second'); </script>

So when you run this code you should see something like the following in the log

16:11:52 01/28/2008 [  5332] [INFO] [JS Framework] [framework.] http://localhost:8081/test.html
16:11:53 01/28/2008 [  5332] [INFO] [JS Framework] [framework.] Setting up environment for the callback
16:11:53 01/28/2008 [  5332] [INFO] [JS Framework] [framework.] loaded jQuery
16:11:53 01/28/2008 [  5332] [INFO] [JS Framework] [framework.] first: OK I'm in the callback...
16:11:53 01/28/2008 [  5332] [INFO] [JS Framework] [framework.] first: ...callback completed
16:11:53 01/28/2008 [  5332] [INFO] [JS Framework] [framework.] Setting up environment for the callback
16:11:53 01/28/2008 [  5332] [INFO] [JS Framework] [framework.] jQuery already loaded.
16:11:53 01/28/2008 [  5332] [INFO] [JS Framework] [framework.] second: OK I'm in the callback...
16:11:53 01/28/2008 [  5332] [INFO] [JS Framework] [framework.] second: ...callback completed