[jQuery] Re: Creating custom attributes in html
I was using custom attributes, I just discovered that when using live
() to bind events to HTML elements coming in via AJAX would
mysteriously stop working. I searched around the bugs DB and found
that it was the custom attributes I was using to select the elements
to bind to that was causing things to stop working. I removed the
custom attributes and use a class instead and it started working
again.
So now I will be removing all the custom attributes.
On Apr 14, 1:56 pm, seasoup seas...@gmail.com wrote:
I was wondering what jquery developers opinion of adding custom
attributes to html tags is, and what your basis is for these
opinions? Why is it a good idea, or why is it a bad idea? What I
mean is this:
div href= myType=foocontent/div
where 'myType' isn't in any specifications. I've run into developers
who think this is a good idea, and those who think this is a bad idea
and I'd like to get a better sense of both sides of the argument.
Personally, I use them all of the time. They are a great way to
preserve information for use with .live() in jQuery, among other
things, and since I append a long string to the DOM instead of
creating lots of little DOM nodes, I generally cannot use .data() to
save information on the individual nodes.
Example of a usage:
div name=foo myType=barclick/div
...
$('div[name=foo]').live('click', function () {
console.log($(this).attr('myType'));
});
Example of why I cannot use .data():
var htmlString = 'table';
for (var a = 0; a 100; a++) {
htmlString += 'trtd name=clickme nodeId=filter'+ a
+'click/td/tr';}
htmlString += '/table';
$('div[name=foo]').append(htmlString);
$('td[name=clickme]').live('click', function() {
console.log($(this).attr('nodeId'));
});
To debate the merits of using this kind of append, please go
to:http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-cor...
What I'm looking for instead is a discussion of using custom
attributes in html.
Thanks,
Josh Powell
[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 r...@whitestonemedia.com 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: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
[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 r...@whitestonemedia.com 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 r...@whitestonemedia.com 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
[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 gars...@gmail.com 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 jbeck...@gmail.com 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 r...@whitestonemedia.com 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 r...@whitestonemedia.com 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.
