[jQuery] Re: Managing scripts in AJAX applications
On Apr 1, 1:39 pm, JMan wrote:
> One thing I have been struggling with is AJAX applications is managing
> the js code that powers them.
>
> For example if you have a page that loads content from an AJAX call to
> the server and that content also has js code associated with it in
> order to function how do I manage that code? If I have 20 pages that
> get loaded from the server via AJAX at one point or another I do not
> want to have one huge js file with a bunch of code for each page in
> it.
JMan,
Consider letting your server side framework manage your scripts for
you. Instead of using $.getScript to include required scripts on the
fly on the client side, I push them into a list as needed on the
server side, and then a process combines all of the individual scripts
into one large one, runs it through YUI Compressor, writes it to disk,
and inserts a link to it in the final assembled HTML. Everything gets
cached, too, so that process is only repeated when a script is added,
modified, or removed in the mix for a particular request.
This lets me manage all of my scripts which are specific to single
screens/pages in their own organized, easy to find, external
little .js files, but still take advantage of the performance gains
provided from externalizing the scripts, reducing the total number of
HTTP requests, and using compression and minification. It works for
CSS files, too!
I've been using some variation of this system for a couple of years
now on various sites, and have been very pleased with the performance
and productivity gains. It's written in Lasso, but the concepts are
straightforward enough that it should be easy to implement in other
languages.
The gist of it is this: There's an "asset_manager" class that you
initialize up front. It grabs whatever items you deem "global" (i.e.,
the base jQuery library, a CSS reset, etc.) automatically. Then, as
the rest of the request is processed, you can add additional scripts
and styles either implicitly or explicitly. The implicit method
replaces a normal server side 'include' with one that checks for the
existence of matching .js and .css files, so instead of this:
include('/path/to/include.inc')
...I do this:
asset_manager->load('/path/to/include.inc')
...and if these files exist on disk:
/path/to/include.js
/path/to/include.css
...they are automatically included. If there are additional plugins,
etc. that I need to add for a particular include, I add them
explicitly within the include like so:
asset_manager->add('/path/to/plugins/jquery.plugin.js')
I presented the system as part of a talk on client-side optimization
last year at the Lasso Developer Conference in Chicago. It covers the
13 original rules from the Yahoo! Exceptional Performance Team that
became the basis of the tests used by the YSlow plugin for Firebug,
and then explains how this system automates adherence to many of those
rules. The paper, slides, and sample code that I presented are
available here:
http://devblog.jasonhuck.com/2008/09/23/an-asset-management-system-for-lasso-powered-sites/
- jason
[jQuery] Re: Managing scripts in AJAX applications
This is interesting not sure I would create an entire document with it
but would be fun for certain areas of code.
Personally I try not to create too much of my DOM on the fly with js
as it has it's own set of challenges with accessibility, automated QA
tools and such..
hsjn does make me wonder if one could use json to define DOM elements?
Your idea is similar to json.
On Apr 9, 7:45 pm, Eric Garside wrote:
> I put together a pretty basic DOMBuilder tool for this purpose, called
> HSJN (HTML Snippet Javascript Notation). You can view/get the source
> here:http://code.google.com/p/hsjn
>
> It gives you the ability to specify jQuery chains within it's syntax,
> and will parse it out into dom nodes you can insert.
>
> As for the managing scripts, I tend to include what I need when I need
> it. Any basic page will only include javascript required for initial
> functionality. If I then want to create, on the fly, a tabbed area, I
> will use:
>
> $.getScript() to include the Javascript I need if I haven't, then
> perform my AJAX call when it's done.
>
> Something like:
>
> function tabbedInterface(){
> if ($.fn.tabs) loadAjax();
> else $.getScript('/path/to/tabs', function(){ loadAjax() });
>
> }
>
> That's not an actual implementation, more of a pseudo-code to
> illustrate the idea.
> On Apr 9, 7:30 pm, JBeckton wrote:
>
> > Hey...
>
> > I am using ColdFusion as well on the FuseBox Framework.
>
> > I have somewhat of a slick way to handle the js resources, it was
> > great at first but the more screen/interfaces I have the more
> > difficult it becomes to manage the js. I basically have a .cfm page
> > with html and dynamic data with none of the HTML Doc tags, that I pull
> > in via AJAX and inject into a div. I use get jQuery.getScript( url,
> > callback ) to pull the supporting script in for the HTML I got from
> > the server.
>
> > I'de be interested in learning how your transferring variables between
> > functions.
>
> > Thanks
>
> > On Apr 2, 5:39 am, "Rick Faircloth" wrote:
>
> > > Hi, JMan...
>
> > > Did you get any answers to your questions?
>
> > > I've been working a lot with jQuery/ajax/ColdFusion
> > > lately. It's all new to me and I've been learning a lot.
> > > Perhaps some of what I've learned may be of use to you.
>
> > > I haven't been injecting HTML into the DOM of the ajax
> > > calling page, but creating HTML to display ajax results.
>
> > > And I've also learned some about being able to transfer
> > > variables between functions.
>
> > > Does any of this sound like what you're looking for?
>
> > > Let me know. I'll be glad to share some code samples
> > > with you.
>
> > > What's you backend language?
>
> > > Rick
>
> > > -Original Message-
> > > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> > > Behalf Of JMan
> > > Sent: Wednesday, April 01, 2009 1:40 PM
> > > To: jQuery (English)
> > > Subject: [jQuery] Managing scripts in AJAX applications
>
> > > One thing I have been struggling with is AJAX applications is managing
> > > the js code that powers them.
>
> > > For example if you have a page that loads content from an AJAX call to
> > > the server and that content also has js code associated with it in
> > > order to function how do I manage that code? If I have 20 pages that
> > > get loaded from the server via AJAX at one point or another I do not
> > > want to have one huge js file with a bunch of code for each page in
> > > it.
>
> > > I was wondering if it's better to embed the js for each page loaded
> > > via AJAX or call it separately? Normally when I need chunks of HTML &
> > > js, like a data grid for example; that get loaded in via AJAX call I
> > > do not have this called code in the traditional HTML doc, in other
> > > words the HTML being loaded has no HTML head, body etc.. it's just
> > > HTML generated by the server and injected into a section of the
> > > calling page. So in this situation should I load the script that is
> > > required by the HTML via the success callback?
>
> > > Another delima is communicating events and such between chunks of
> > > loaded HTML/js, like if I have a Tabs widget and an accordion on the
> > > same page and each have content loaded via AJAX and the content in tab
> > > 1 needs to bind and interact with events in a section of the accordion
> > > content loaded via AJAX.
[jQuery] Re: Managing scripts in AJAX applications
Yeah, lack of communication between functions would be a problem.
Have you tried global variables as a solution?
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of JBeckton
Sent: Friday, April 10, 2009 6:26 PM
To: jQuery (English)
Subject: [jQuery] Re: Managing scripts in AJAX applications
It's the transferring variables between functions in separate js files
is the big problem. If the functions are in the same file it's no
problem.
On Apr 10, 5:02 pm, "Rick Faircloth" wrote:
> Look interesting! When you say that you can't communicate
> between two functions...are you talking about sharing
> variables? If so, then how do you currently get around
> send one variable and its value from one function to another?
>
> Thanks,
>
> Rick
>
> -Original Message-
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> Behalf Of JBeckton
> Sent: Friday, April 10, 2009 4:05 PM
> To: jQuery (English)
> Subject: [jQuery] Re: Managing scripts in AJAX applications
>
> I feel your pain... The project I am working on could have went faster
> had I not used AJAX so much, But the only way to get better at it is
> to use it more and more. Then you have to deal with the browser
> support issues, but that.s another topic.I should have used Adobe
> Flex!
>
> Looking at your code snippet the if statement is a bit redundant, in
> the success callback you will always have "Success". This is the
> benefit of the jQuery Framework. So in your Success callback you
> should not have to check to see if the request was successful because
> the framework already does that. You have a Success and Error option
> so you can run code on either event. Below is an example of my ajax
> request.
>
> var loadCaseView = function(targetURL) {
> var url = targetURL;
> $.ajax({
> url: url,
> type: "get",
> dataType: "html",
> cache: false,
> success: function(html){
> viewCaseDialog.html(html);
> $.getScript("lib/js/cmWorkbench.js",
> function(){});
> },
> error: function(XMLHttpRequest,textStatus,
> errorThrown){
>
> viewCaseDialog.html(XMLHttpRequest.statusText);
> }
> });
> }
>
> For each remote "Chunk of HTML" I get via AJAX I will have some js to
> go with it if it's needed, so I load the supporting js file in the
> success callback after injecting the HTML into the DOM element. So for
> each interface I load from the server via AJAX I'll also load the js
> for that interface. Or you could embed your js in the interface HTML
> as jQuery knows to evaluate that embedded js as long as you specify
> the data type option in your AJAX options, I try to avoid embedding my
> js because that can get ugly.
>
> This technique keeps me from having huge js files to manage but also
> provides it's own set of challenges as well. The problem with this is
> that you cannot communicate between two scripts or I have not learned
> how to yet. I think using name spaces is the way to solve that but not
> sure.
>
> On Apr 10, 1:29 pm, "Rick Faircloth" wrote:
> > Hi, JB...
>
> > I never did get back to your question about transferring variables
> > between functions, but took up this question in another thread.
> > Here's what I posted in answer to another poster's question:
>
> > Also, since I've having the same problem with too much jQuery/AJAX/HTML
> > going into a single page, I'd like to know more about how you're
> > structuring your code with the includes and pulling your needed
> > code into a DIV.
>
> > Can you give an example that demonstrates this "framework" that you use?
>
> > Thanks,
>
> > Rick
>
> > Here's the response to transferring variables...
>
> > -
>
> > Here's a method that I'm using to pass data from
> > an ajax response to another function: (I'm starting
> > with the success: section of an ajax call)
>
> > success: function(response) {
> > if ( response.MESSAGE == 'Success' )
> > { populateStoryTable(response); }
>
> > else { alert(Rats! No good!); }
>
> > That makes all of the data sent back in "response"
[jQuery] Re: Managing scripts in AJAX applications
It's the transferring variables between functions in separate js files
is the big problem. If the functions are in the same file it's no
problem.
On Apr 10, 5:02 pm, "Rick Faircloth" wrote:
> Look interesting! When you say that you can't communicate
> between two functions...are you talking about sharing
> variables? If so, then how do you currently get around
> send one variable and its value from one function to another?
>
> Thanks,
>
> Rick
>
> -Original Message-
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> Behalf Of JBeckton
> Sent: Friday, April 10, 2009 4:05 PM
> To: jQuery (English)
> Subject: [jQuery] Re: Managing scripts in AJAX applications
>
> I feel your pain... The project I am working on could have went faster
> had I not used AJAX so much, But the only way to get better at it is
> to use it more and more. Then you have to deal with the browser
> support issues, but that.s another topic.I should have used Adobe
> Flex!
>
> Looking at your code snippet the if statement is a bit redundant, in
> the success callback you will always have "Success". This is the
> benefit of the jQuery Framework. So in your Success callback you
> should not have to check to see if the request was successful because
> the framework already does that. You have a Success and Error option
> so you can run code on either event. Below is an example of my ajax
> request.
>
> var loadCaseView = function(targetURL) {
> var url = targetURL;
> $.ajax({
> url: url,
> type: "get",
> dataType: "html",
> cache: false,
> success: function(html){
> viewCaseDialog.html(html);
> $.getScript("lib/js/cmWorkbench.js",
> function(){});
> },
> error: function(XMLHttpRequest,textStatus,
> errorThrown){
>
> viewCaseDialog.html(XMLHttpRequest.statusText);
> }
> });
> }
>
> For each remote "Chunk of HTML" I get via AJAX I will have some js to
> go with it if it's needed, so I load the supporting js file in the
> success callback after injecting the HTML into the DOM element. So for
> each interface I load from the server via AJAX I'll also load the js
> for that interface. Or you could embed your js in the interface HTML
> as jQuery knows to evaluate that embedded js as long as you specify
> the data type option in your AJAX options, I try to avoid embedding my
> js because that can get ugly.
>
> This technique keeps me from having huge js files to manage but also
> provides it's own set of challenges as well. The problem with this is
> that you cannot communicate between two scripts or I have not learned
> how to yet. I think using name spaces is the way to solve that but not
> sure.
>
> On Apr 10, 1:29 pm, "Rick Faircloth" wrote:
> > Hi, JB...
>
> > I never did get back to your question about transferring variables
> > between functions, but took up this question in another thread.
> > Here's what I posted in answer to another poster's question:
>
> > Also, since I've having the same problem with too much jQuery/AJAX/HTML
> > going into a single page, I'd like to know more about how you're
> > structuring your code with the includes and pulling your needed
> > code into a DIV.
>
> > Can you give an example that demonstrates this "framework" that you use?
>
> > Thanks,
>
> > Rick
>
> > Here's the response to transferring variables...
>
> > -
>
> > Here's a method that I'm using to pass data from
> > an ajax response to another function: (I'm starting
> > with the success: section of an ajax call)
>
> > success: function(response) {
> > if ( response.MESSAGE == 'Success' )
> > { populateStoryTable(response); }
>
> > else { alert(Rats! No good!); }
>
> > That makes all of the data sent back in "response"
> > available to reference in the function "populateStoryTable".
>
> > It's transferred to the populateStoryTable function by using
>
> > populateStoryTable(response) {
>
> > ...whatever code I want to run...
>
> > That's just a way to directly link the functions with the
> &g
[jQuery] Re: Managing scripts in AJAX applications
Look interesting! When you say that you can't communicate
between two functions...are you talking about sharing
variables? If so, then how do you currently get around
send one variable and its value from one function to another?
Thanks,
Rick
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of JBeckton
Sent: Friday, April 10, 2009 4:05 PM
To: jQuery (English)
Subject: [jQuery] Re: Managing scripts in AJAX applications
I feel your pain... The project I am working on could have went faster
had I not used AJAX so much, But the only way to get better at it is
to use it more and more. Then you have to deal with the browser
support issues, but that.s another topic.I should have used Adobe
Flex!
Looking at your code snippet the if statement is a bit redundant, in
the success callback you will always have "Success". This is the
benefit of the jQuery Framework. So in your Success callback you
should not have to check to see if the request was successful because
the framework already does that. You have a Success and Error option
so you can run code on either event. Below is an example of my ajax
request.
var loadCaseView = function(targetURL) {
var url = targetURL;
$.ajax({
url: url,
type: "get",
dataType: "html",
cache: false,
success: function(html){
viewCaseDialog.html(html);
$.getScript("lib/js/cmWorkbench.js",
function(){});
},
error: function(XMLHttpRequest,textStatus,
errorThrown){
viewCaseDialog.html(XMLHttpRequest.statusText);
}
});
}
For each remote "Chunk of HTML" I get via AJAX I will have some js to
go with it if it's needed, so I load the supporting js file in the
success callback after injecting the HTML into the DOM element. So for
each interface I load from the server via AJAX I'll also load the js
for that interface. Or you could embed your js in the interface HTML
as jQuery knows to evaluate that embedded js as long as you specify
the data type option in your AJAX options, I try to avoid embedding my
js because that can get ugly.
This technique keeps me from having huge js files to manage but also
provides it's own set of challenges as well. The problem with this is
that you cannot communicate between two scripts or I have not learned
how to yet. I think using name spaces is the way to solve that but not
sure.
On Apr 10, 1:29 pm, "Rick Faircloth" wrote:
> Hi, JB...
>
> I never did get back to your question about transferring variables
> between functions, but took up this question in another thread.
> Here's what I posted in answer to another poster's question:
>
> Also, since I've having the same problem with too much jQuery/AJAX/HTML
> going into a single page, I'd like to know more about how you're
> structuring your code with the includes and pulling your needed
> code into a DIV.
>
> Can you give an example that demonstrates this "framework" that you use?
>
> Thanks,
>
> Rick
>
> Here's the response to transferring variables...
>
> -
>
> Here's a method that I'm using to pass data from
> an ajax response to another function: (I'm starting
> with the success: section of an ajax call)
>
> success: function(response) {
> if ( response.MESSAGE == 'Success' )
> { populateStoryTable(response); }
>
> else { alert(Rats! No good!); }
>
> That makes all of the data sent back in "response"
> available to reference in the function "populateStoryTable".
>
> It's transferred to the populateStoryTable function by using
>
> populateStoryTable(response) {
>
> ...whatever code I want to run...
>
> That's just a way to directly link the functions with the
> data they need.
>
> Michael, this is the method you're referring to which calls
> the next function that's needed when the data is ready.
>
> I've used this method of putting variables inside the () after
> a function call to pass data all around.
>
> If I do an inline function call, I can use "myFunction(story_id)"
> to pass a story_id to the "myFunction" function.
>
> I'm just learning about this stuff, really, so I'm sharing how
> I'm managing to make some of the jQuery and especially ajax stuff
> work.
>
> I've been working for a month trying to get
[jQuery] Re: Managing scripts in AJAX applications
I feel your pain... The project I am working on could have went faster
had I not used AJAX so much, But the only way to get better at it is
to use it more and more. Then you have to deal with the browser
support issues, but that.s another topic.I should have used Adobe
Flex!
Looking at your code snippet the if statement is a bit redundant, in
the success callback you will always have "Success". This is the
benefit of the jQuery Framework. So in your Success callback you
should not have to check to see if the request was successful because
the framework already does that. You have a Success and Error option
so you can run code on either event. Below is an example of my ajax
request.
var loadCaseView = function(targetURL) {
var url = targetURL;
$.ajax({
url: url,
type: "get",
dataType: "html",
cache: false,
success: function(html){
viewCaseDialog.html(html);
$.getScript("lib/js/cmWorkbench.js",
function(){});
},
error: function(XMLHttpRequest,textStatus, errorThrown){
viewCaseDialog.html(XMLHttpRequest.statusText);
}
});
}
For each remote "Chunk of HTML" I get via AJAX I will have some js to
go with it if it's needed, so I load the supporting js file in the
success callback after injecting the HTML into the DOM element. So for
each interface I load from the server via AJAX I'll also load the js
for that interface. Or you could embed your js in the interface HTML
as jQuery knows to evaluate that embedded js as long as you specify
the data type option in your AJAX options, I try to avoid embedding my
js because that can get ugly.
This technique keeps me from having huge js files to manage but also
provides it's own set of challenges as well. The problem with this is
that you cannot communicate between two scripts or I have not learned
how to yet. I think using name spaces is the way to solve that but not
sure.
On Apr 10, 1:29 pm, "Rick Faircloth" wrote:
> Hi, JB...
>
> I never did get back to your question about transferring variables
> between functions, but took up this question in another thread.
> Here's what I posted in answer to another poster's question:
>
> Also, since I've having the same problem with too much jQuery/AJAX/HTML
> going into a single page, I'd like to know more about how you're
> structuring your code with the includes and pulling your needed
> code into a DIV.
>
> Can you give an example that demonstrates this "framework" that you use?
>
> Thanks,
>
> Rick
>
> Here's the response to transferring variables...
>
> -
>
> Here's a method that I'm using to pass data from
> an ajax response to another function: (I'm starting
> with the success: section of an ajax call)
>
> success: function(response) {
> if ( response.MESSAGE == 'Success' )
> { populateStoryTable(response); }
>
> else { alert(Rats! No good!); }
>
> That makes all of the data sent back in "response"
> available to reference in the function "populateStoryTable".
>
> It's transferred to the populateStoryTable function by using
>
> populateStoryTable(response) {
>
> ...whatever code I want to run...
>
> That's just a way to directly link the functions with the
> data they need.
>
> Michael, this is the method you're referring to which calls
> the next function that's needed when the data is ready.
>
> I've used this method of putting variables inside the () after
> a function call to pass data all around.
>
> If I do an inline function call, I can use "myFunction(story_id)"
> to pass a story_id to the "myFunction" function.
>
> I'm just learning about this stuff, really, so I'm sharing how
> I'm managing to make some of the jQuery and especially ajax stuff
> work.
>
> I've been working for a month trying to get an ajax app finished
> that I could have completed in a day with standard "page-to-page"
> processing, passing variables through url's and session, but I'm
> bound and determined to make this work. I keep writing and re-writing
> the app as I learn more.
>
> -Original Message-
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> Behalf Of JBeckton
> Sent: Thursday, April 09, 2009 7:3
[jQuery] Re: Managing scripts in AJAX applications
Hi, Eric...
Can you give me an actual working example of how you include
you're using $getScript to include jQ/js files dyanamically
as you need them?
I need to get some system of code management working that just
including it all the in the page at once. I think if I can get
code into various templates for includes, I can better think
about what my code is doing rather than scrolling up and down
pages, trying to track functions and variables and HTML changes, etc.,
all on one page.
Thanks,
Rick
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Eric Garside
Sent: Thursday, April 09, 2009 7:46 PM
To: jQuery (English)
Subject: [jQuery] Re: Managing scripts in AJAX applications
I put together a pretty basic DOMBuilder tool for this purpose, called
HSJN (HTML Snippet Javascript Notation). You can view/get the source
here: http://code.google.com/p/hsjn
It gives you the ability to specify jQuery chains within it's syntax,
and will parse it out into dom nodes you can insert.
As for the managing scripts, I tend to include what I need when I need
it. Any basic page will only include javascript required for initial
functionality. If I then want to create, on the fly, a tabbed area, I
will use:
$.getScript() to include the Javascript I need if I haven't, then
perform my AJAX call when it's done.
Something like:
function tabbedInterface(){
if ($.fn.tabs) loadAjax();
else $.getScript('/path/to/tabs', function(){ loadAjax() });
}
That's not an actual implementation, more of a pseudo-code to
illustrate the idea.
On Apr 9, 7:30 pm, JBeckton wrote:
> Hey...
>
> I am using ColdFusion as well on the FuseBox Framework.
>
> I have somewhat of a slick way to handle the js resources, it was
> great at first but the more screen/interfaces I have the more
> difficult it becomes to manage the js. I basically have a .cfm page
> with html and dynamic data with none of the HTML Doc tags, that I pull
> in via AJAX and inject into a div. I use get jQuery.getScript( url,
> callback ) to pull the supporting script in for the HTML I got from
> the server.
>
> I'de be interested in learning how your transferring variables between
> functions.
>
> Thanks
>
> On Apr 2, 5:39 am, "Rick Faircloth" wrote:
>
> > Hi, JMan...
>
> > Did you get any answers to your questions?
>
> > I've been working a lot with jQuery/ajax/ColdFusion
> > lately. It's all new to me and I've been learning a lot.
> > Perhaps some of what I've learned may be of use to you.
>
> > I haven't been injecting HTML into the DOM of the ajax
> > calling page, but creating HTML to display ajax results.
>
> > And I've also learned some about being able to transfer
> > variables between functions.
>
> > Does any of this sound like what you're looking for?
>
> > Let me know. I'll be glad to share some code samples
> > with you.
>
> > What's you backend language?
>
> > Rick
>
> > -Original Message-
> > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> > Behalf Of JMan
> > Sent: Wednesday, April 01, 2009 1:40 PM
> > To: jQuery (English)
> > Subject: [jQuery] Managing scripts in AJAX applications
>
> > One thing I have been struggling with is AJAX applications is managing
> > the js code that powers them.
>
> > For example if you have a page that loads content from an AJAX call to
> > the server and that content also has js code associated with it in
> > order to function how do I manage that code? If I have 20 pages that
> > get loaded from the server via AJAX at one point or another I do not
> > want to have one huge js file with a bunch of code for each page in
> > it.
>
> > I was wondering if it's better to embed the js for each page loaded
> > via AJAX or call it separately? Normally when I need chunks of HTML &
> > js, like a data grid for example; that get loaded in via AJAX call I
> > do not have this called code in the traditional HTML doc, in other
> > words the HTML being loaded has no HTML head, body etc.. it's just
> > HTML generated by the server and injected into a section of the
> > calling page. So in this situation should I load the script that is
> > required by the HTML via the success callback?
>
> > Another delima is communicating events and such between chunks of
> > loaded HTML/js, like if I have a Tabs widget and an accordion on the
> > same page and each have content loaded via AJAX and the content in tab
> > 1 needs to bind and interact with events in a section of the accordion
> > content loaded via AJAX.
[jQuery] Re: Managing scripts in AJAX applications
Hi, JB...
I never did get back to your question about transferring variables
between functions, but took up this question in another thread.
Here's what I posted in answer to another poster's question:
Also, since I've having the same problem with too much jQuery/AJAX/HTML
going into a single page, I'd like to know more about how you're
structuring your code with the includes and pulling your needed
code into a DIV.
Can you give an example that demonstrates this "framework" that you use?
Thanks,
Rick
Here's the response to transferring variables...
-
Here's a method that I'm using to pass data from
an ajax response to another function: (I'm starting
with the success: section of an ajax call)
success: function(response) {
if( response.MESSAGE == 'Success' )
{ populateStoryTable(response); }
else { alert(Rats! No good!); }
That makes all of the data sent back in "response"
available to reference in the function "populateStoryTable".
It's transferred to the populateStoryTable function by using
populateStoryTable(response) {
...whatever code I want to run...
That's just a way to directly link the functions with the
data they need.
Michael, this is the method you're referring to which calls
the next function that's needed when the data is ready.
I've used this method of putting variables inside the () after
a function call to pass data all around.
If I do an inline function call, I can use "myFunction(story_id)"
to pass a story_id to the "myFunction" function.
I'm just learning about this stuff, really, so I'm sharing how
I'm managing to make some of the jQuery and especially ajax stuff
work.
I've been working for a month trying to get an ajax app finished
that I could have completed in a day with standard "page-to-page"
processing, passing variables through url's and session, but I'm
bound and determined to make this work. I keep writing and re-writing
the app as I learn more.
-Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of JBeckton
Sent: Thursday, April 09, 2009 7:31 PM
To: jQuery (English)
Subject: [jQuery] Re: Managing scripts in AJAX applications
Hey...
I am using ColdFusion as well on the FuseBox Framework.
I have somewhat of a slick way to handle the js resources, it was
great at first but the more screen/interfaces I have the more
difficult it becomes to manage the js. I basically have a .cfm page
with html and dynamic data with none of the HTML Doc tags, that I pull
in via AJAX and inject into a div. I use get jQuery.getScript( url,
callback ) to pull the supporting script in for the HTML I got from
the server.
I'de be interested in learning how your transferring variables between
functions.
Thanks
On Apr 2, 5:39 am, "Rick Faircloth" wrote:
> Hi, JMan...
>
> Did you get any answers to your questions?
>
> I've been working a lot with jQuery/ajax/ColdFusion
> lately. It's all new to me and I've been learning a lot.
> Perhaps some of what I've learned may be of use to you.
>
> I haven't been injecting HTML into the DOM of the ajax
> calling page, but creating HTML to display ajax results.
>
> And I've also learned some about being able to transfer
> variables between functions.
>
> Does any of this sound like what you're looking for?
>
> Let me know. I'll be glad to share some code samples
> with you.
>
> What's you backend language?
>
> Rick
>
> -Original Message-
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> Behalf Of JMan
> Sent: Wednesday, April 01, 2009 1:40 PM
> To: jQuery (English)
> Subject: [jQuery] Managing scripts in AJAX applications
>
> One thing I have been struggling with is AJAX applications is managing
> the js code that powers them.
>
> For example if you have a page that loads content from an AJAX call to
> the server and that content also has js code associated with it in
> order to function how do I manage that code? If I have 20 pages that
> get loaded from the server via AJAX at one point or another I do not
> want to have one huge js file with a bunch of code for each page in
> it.
>
> I was wondering if it's better to embed the js for each page loaded
> via AJAX or call it separately? Normally when I need chunks of HTML &
> js, like a data grid for example; that get loaded in via AJAX call I
> do not have this called code in the traditional HTML doc, in other
> words the HTML being loaded has no HTML head, body etc.. it's just
> HTML generated
[jQuery] Re: Managing scripts in AJAX applications
I put together a pretty basic DOMBuilder tool for this purpose, called
HSJN (HTML Snippet Javascript Notation). You can view/get the source
here: http://code.google.com/p/hsjn
It gives you the ability to specify jQuery chains within it's syntax,
and will parse it out into dom nodes you can insert.
As for the managing scripts, I tend to include what I need when I need
it. Any basic page will only include javascript required for initial
functionality. If I then want to create, on the fly, a tabbed area, I
will use:
$.getScript() to include the Javascript I need if I haven't, then
perform my AJAX call when it's done.
Something like:
function tabbedInterface(){
if ($.fn.tabs) loadAjax();
else $.getScript('/path/to/tabs', function(){ loadAjax() });
}
That's not an actual implementation, more of a pseudo-code to
illustrate the idea.
On Apr 9, 7:30 pm, JBeckton wrote:
> Hey...
>
> I am using ColdFusion as well on the FuseBox Framework.
>
> I have somewhat of a slick way to handle the js resources, it was
> great at first but the more screen/interfaces I have the more
> difficult it becomes to manage the js. I basically have a .cfm page
> with html and dynamic data with none of the HTML Doc tags, that I pull
> in via AJAX and inject into a div. I use get jQuery.getScript( url,
> callback ) to pull the supporting script in for the HTML I got from
> the server.
>
> I'de be interested in learning how your transferring variables between
> functions.
>
> Thanks
>
> On Apr 2, 5:39 am, "Rick Faircloth" wrote:
>
> > Hi, JMan...
>
> > Did you get any answers to your questions?
>
> > I've been working a lot with jQuery/ajax/ColdFusion
> > lately. It's all new to me and I've been learning a lot.
> > Perhaps some of what I've learned may be of use to you.
>
> > I haven't been injecting HTML into the DOM of the ajax
> > calling page, but creating HTML to display ajax results.
>
> > And I've also learned some about being able to transfer
> > variables between functions.
>
> > Does any of this sound like what you're looking for?
>
> > Let me know. I'll be glad to share some code samples
> > with you.
>
> > What's you backend language?
>
> > Rick
>
> > -Original Message-
> > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> > Behalf Of JMan
> > Sent: Wednesday, April 01, 2009 1:40 PM
> > To: jQuery (English)
> > Subject: [jQuery] Managing scripts in AJAX applications
>
> > One thing I have been struggling with is AJAX applications is managing
> > the js code that powers them.
>
> > For example if you have a page that loads content from an AJAX call to
> > the server and that content also has js code associated with it in
> > order to function how do I manage that code? If I have 20 pages that
> > get loaded from the server via AJAX at one point or another I do not
> > want to have one huge js file with a bunch of code for each page in
> > it.
>
> > I was wondering if it's better to embed the js for each page loaded
> > via AJAX or call it separately? Normally when I need chunks of HTML &
> > js, like a data grid for example; that get loaded in via AJAX call I
> > do not have this called code in the traditional HTML doc, in other
> > words the HTML being loaded has no HTML head, body etc.. it's just
> > HTML generated by the server and injected into a section of the
> > calling page. So in this situation should I load the script that is
> > required by the HTML via the success callback?
>
> > Another delima is communicating events and such between chunks of
> > loaded HTML/js, like if I have a Tabs widget and an accordion on the
> > same page and each have content loaded via AJAX and the content in tab
> > 1 needs to bind and interact with events in a section of the accordion
> > content loaded via AJAX.
[jQuery] Re: Managing scripts in AJAX applications
Hey... I am using ColdFusion as well on the FuseBox Framework. I have somewhat of a slick way to handle the js resources, it was great at first but the more screen/interfaces I have the more difficult it becomes to manage the js. I basically have a .cfm page with html and dynamic data with none of the HTML Doc tags, that I pull in via AJAX and inject into a div. I use get jQuery.getScript( url, callback ) to pull the supporting script in for the HTML I got from the server. I'de be interested in learning how your transferring variables between functions. Thanks On Apr 2, 5:39 am, "Rick Faircloth" wrote: > Hi, JMan... > > Did you get any answers to your questions? > > I've been working a lot with jQuery/ajax/ColdFusion > lately. It's all new to me and I've been learning a lot. > Perhaps some of what I've learned may be of use to you. > > I haven't been injecting HTML into the DOM of the ajax > calling page, but creating HTML to display ajax results. > > And I've also learned some about being able to transfer > variables between functions. > > Does any of this sound like what you're looking for? > > Let me know. I'll be glad to share some code samples > with you. > > What's you backend language? > > Rick > > -Original Message- > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On > > Behalf Of JMan > Sent: Wednesday, April 01, 2009 1:40 PM > To: jQuery (English) > Subject: [jQuery] Managing scripts in AJAX applications > > One thing I have been struggling with is AJAX applications is managing > the js code that powers them. > > For example if you have a page that loads content from an AJAX call to > the server and that content also has js code associated with it in > order to function how do I manage that code? If I have 20 pages that > get loaded from the server via AJAX at one point or another I do not > want to have one huge js file with a bunch of code for each page in > it. > > I was wondering if it's better to embed the js for each page loaded > via AJAX or call it separately? Normally when I need chunks of HTML & > js, like a data grid for example; that get loaded in via AJAX call I > do not have this called code in the traditional HTML doc, in other > words the HTML being loaded has no HTML head, body etc.. it's just > HTML generated by the server and injected into a section of the > calling page. So in this situation should I load the script that is > required by the HTML via the success callback? > > Another delima is communicating events and such between chunks of > loaded HTML/js, like if I have a Tabs widget and an accordion on the > same page and each have content loaded via AJAX and the content in tab > 1 needs to bind and interact with events in a section of the accordion > content loaded via AJAX.
[jQuery] Re: Managing scripts in AJAX applications
Hi, JMan... Did you get any answers to your questions? I've been working a lot with jQuery/ajax/ColdFusion lately. It's all new to me and I've been learning a lot. Perhaps some of what I've learned may be of use to you. I haven't been injecting HTML into the DOM of the ajax calling page, but creating HTML to display ajax results. And I've also learned some about being able to transfer variables between functions. Does any of this sound like what you're looking for? Let me know. I'll be glad to share some code samples with you. What's you backend language? Rick -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of JMan Sent: Wednesday, April 01, 2009 1:40 PM To: jQuery (English) Subject: [jQuery] Managing scripts in AJAX applications One thing I have been struggling with is AJAX applications is managing the js code that powers them. For example if you have a page that loads content from an AJAX call to the server and that content also has js code associated with it in order to function how do I manage that code? If I have 20 pages that get loaded from the server via AJAX at one point or another I do not want to have one huge js file with a bunch of code for each page in it. I was wondering if it's better to embed the js for each page loaded via AJAX or call it separately? Normally when I need chunks of HTML & js, like a data grid for example; that get loaded in via AJAX call I do not have this called code in the traditional HTML doc, in other words the HTML being loaded has no HTML head, body etc.. it's just HTML generated by the server and injected into a section of the calling page. So in this situation should I load the script that is required by the HTML via the success callback? Another delima is communicating events and such between chunks of loaded HTML/js, like if I have a Tabs widget and an accordion on the same page and each have content loaded via AJAX and the content in tab 1 needs to bind and interact with events in a section of the accordion content loaded via AJAX.
