[jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
Hello all, I am working on a new version for this plugin to tackle the problems mentioned here and those received by email. I created a new group for this plugin to better organise this project. Here I describe the current status and where it is going: http://groups.google.com/group/jqueryfinder/browse_thread/thread/62358226be1ff4fa Please post at the new group for all questions and feedback regarding this plugin. http://groups.google.com/group/jqueryfinder
[jQuery] A new take on form validation, need code review and feedback
Hello all,
I feel a bit guilty for posting this here as it may be considered as
spam, so if you do think that please ignore/delete.
For the last couple of days I've been working on a form validation
plugin and I've taken a completely different approach (I think, that
is) from what already exists. The result is a plugin with less than
300 lines of code that does absolutely no form validation at all.
WTF you may very well ask, and I explain: the core of the plugin
basically assigns/save 'rules' and callbacks on an object. One way to
save/create a rule is when extending the plugin, i.e. adding
validation rules, onerror/onsucces callbacks and the like. Another is
when you actually 'bind' validation on a form or element. And that is
all.
So here is an example:
The rules defined here are generic, they dont apply to specific dom
elements. This lets say is how I want my validation to behave.
I define a rule for the value of an element. I.e. what the value must
be.
$.user_input('value','required',function(elem,value,rule) {
return value value.length !== 0;
});
Then define an event that will trigger the validation:
$.user_input('event','blur',function(el) {
el.unbind('blur.user_input').bind('blur.user_input',function(e,event)
{
return $(this).check_user_input(e);
});
});
Then define some callbacks:
$.user_input('error','change_my_color',function(el) {
el.css('background-color','red');
});
$.user_input('success','change_my_color',function(el) {
el.css('background-color','');
});
At this stage these are the validation rules for this plugin. Now I
have to attach those rules to some elements that I want to validate.
$('.required').user_input({
value: 'required',
event: 'blur',
error: 'change_my_color',
success: 'change_my_color'
});
So when an input with class required is blurred, it validates its
value against the 'required' value rule. If it returns something other
than true, it triggers the 'change_my_colour' error callback. If it
returns true, it triggers the 'change_my_colour' success callback.
There's also another nice 'side effect' of the approach taken. If you
append a new input with class required in the dom, the script will
also validate that one (think of live validation). Even though this
depends on how you actually define your events (i.e. die/live, or
unbind/bind) you can also validate all elements (including the new
one) by doing:
$('.required').check_user_input('blur')
where the param passed is the name of the event to check (or leave
empty to check all binded events).
As I said, this is very flexible because it doesn't do much 'out of
the box'. I am posting it here because I would love to listen to what
the community thinks of this approach and get some feedback/code
review.
Thanks for reading this far, you can get the source (and a very simple
demo) at http://code.google.com/p/jqueryuserinput/
Cheers
[jQuery] Re: A new take on form validation, need code review and feedback
Rick,
as I said above, there are really no validation routines at the
moment. Think of it like jQuery itself which you can extend by
$.extend or $.fn but without its core methods. I know that its a bit
tricky to grasp mainly because it doesn't do much out of the box.
I'll try to explain a bit here and perhaps I'll do a wiki page on the
project's site (the source and test files at the trunk may also be of
use)
There are three main methods:
1) $.user_input(options) - set validation rules that you can reuse in
other projects or project-specific
2) $(selector).user_input(options) - attach validation rules to
selected elements
3) $(selector).check_user_input(option) - check selected elements for
validity
$.user_input(options) - has 3 options to be passed, all 3 are
required.
first is the type of rule you want to set (e.g. 'value', 'event',
'error' (callback), etc)
second is the name of the rule (e.g. 'required', 'blur',
'change_my_color', etc)
third argument is the callback function that will be called. ie. if
the type is 'value', the function is used to check the validity of an
element's value. if its an 'event', it is called when you attach
validation on an element (the 2nd methodabove). If its an 'error',
'cleanup', 'success', 'before', or 'complete' callback it is called
appropriately. (whatever your error callback returns, is passed on the
cleanup callback so that you can clean up error messages)
$(selector).user_input(options) - can accept two options, but for now
I'll focus on just one, the validation rules which is a key/value
object.
For example,
$('.required').user_input({
value: 'required',
event: 'blur',
error: 'change_my_color',
success: 'change_my_color',
cleanup: function(){ this.remove this.remove() }
});
When this method is called, the event you specified as 'blur' (using
the first method above) will be called. I assume that such a rule will
bind a blur event. So, the callback you defined above as 'blur' must
bind a blur event. When that event is triggered, it will check the
element's value against your 'required' value method (again specified
from method 1 above). If your 'required' value method returns TRUE,
it's value is considered as valid. Otherwise it's not valid. At that
point your error method named 'change_my_colour' is triggered. If
your error method returns jQuery elements, those elements will be
passed on the cleanup function once the element is re-validated and is
found to be valid. At that point the success callback is triggered.
The third and final method, $(selector).check_user_input(option), is
the method that actually triggers validation the selected elements.
The option parameter is the type of the event which you want to check
(e.g. blur). If you leave this empty it will check all events. This
method returns TRUE or FALSE according to whether the elements checked
are valid or not. You should call this method from your event rules
(e.g. blur event) so that validation actually occurs, otherwise it
does nothing.
Another useful feature is the fact that whenever a function is called
(either error callback, or value check etc) it is passed the original
key/value object you defined for that element (method 3). In this way
you can have some sort of generic callbacks that behave differently
according to the options you passed when you attached a validation to
some elements.
I hope this makes some sense. If you check this
http://code.google.com/p/jqueryuserinput/source/browse/trunk/jquery.user_input.js
at the bottom you can see how rules are applied (first and third
methods). This
http://code.google.com/p/jqueryuserinput/source/browse/trunk/test.js
shows how to attach validation on your elements and how to extend/
override existing rules.
On Jun 3, 7:42 pm, Rick Faircloth r...@whitestonemedia.com wrote:
Yes, it looks like a great idea. I've been writing my own validation
routines anyway,
preferring the ability to customize every aspect of the validation routines
and presentation.
I'm interested in learning more, especially about your specific validation
routines.
Rick
On Wed, Jun 3, 2009 at 11:51 AM, Penner, Matthew mpen...@valverde.eduwrote:
Hey Nicolas,
Great work! I really like this idea. Maybe you can put the explanation
and examples from your email onto the web site. I've bookmarked the
page for future reference but this email really gives a quick summary on
what you are trying to accomplish and how to use it.
Thanks,
Matt Penner
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Nicolas R
Sent: Wednesday, June 03, 2009 3:06 AM
To: jQuery (English)
Subject: [jQuery] A new take on form validation, need code review and
feedback
Hello all,
I feel a bit guilty for posting this here as it may be considered as
spam, so if you do think that please ignore/delete.
For the last couple of days I've been working
[jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
Tor,
To select an item when the finder is created you can use the public
method $('some').finder('select', URLS_ARRAY or URL_STRING or
DOM_ELEMENTS ). Call this method on the onInit callback.
There is no function that returns some sort of path for the current
page. I believe it would be easy to hack one yourself, something like:
var path = [];
$('div.ui-finder').find('li.ui-finder-list-item-active a').each
(function(){
path.push( $(this).attr('href') );
});
path // = [ 'level1.html', 'level2.html', 'level3.html' ]
So, you could store the array as a cookie (in string format of course)
on window.onunload and then on load..
$('some').finder({
onInit: function(){ $(this).finder('select',path_as_array) }
})
I'm sure there are many ways to achieve this, but the two main things
to keep in mind is that
1. you can pass an array of urls to .finder('select', ... ) and it
will select them in that order; and
2. you can select the current path by using the path function I
provided above
Hope this makes sense
On Apr 1, 1:06 pm, Tor torgeir.ve...@gmail.com wrote:
Am wondering if it would be possible to store the expanded state with
an anchor hash, to allow page reloads?
--
-Tor
[jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
OK fixed now thanks for the tip. onItemSelect should return undefined rather than false (default setting) to show info. Unfortunately the API displayed there is 1.2.6, its from http://api.jquery.com/lib/docs/api-docs.js and its hasn't been updated for a while. On Mar 13, 8:34 pm, Nikola nik.cod...@gmail.com wrote: Hi, I noticed that the API browser @http://www.nicolas.rudas.info/jquery/finder/api.html isn't displaying the info. Is it being updated for 1.7 maybe? Thanks... On Mar 5, 5:37 pm, Nicolas R ruda...@googlemail.com wrote: All right, I added IE6 support. Latest files (ui.finder.js,ui.finder-min.js, and ui-finder.ie.css) can be found at the trunk:http://code.google.com/p/jqueryfinder/source/browse/trunk Its not the same as in decent browsers but its good enough. On Mar 4, 7:41 pm, Nicolas R ruda...@googlemail.com wrote: Matt, I'll get back to you tomorrow with some code snippets. It's been a while since I did the bug fixing for IE and I can't remember right now what the issues were. And since I'm really smart I didn't save the code that fixed the issues. So, yeah, tomorrow I'll have a look and post back. Cheers On Mar 4, 4:47 pm, matt mathias.leimgru...@gmail.com wrote: Hi Nicolas first, its a great tool to work with! Currently I'm trying to use it in Plone CMS as a reference widget. It works great on nearly all browser (as you said) except on IE6. My approach was to give fixed height and width to the div's (.ui- finder-column, .ui-finder-wrapper): but without happy-end -.- I figured out how to make it work on IE6 (mostly), but as the changes are very specific I did not include them in the code. If anyone requires ie6 support just ask. So here I am and I'm asking for support :-) a few code snips should be enough. Thanks in advance best regards Matt
[jQuery] Re: Javascript search library
Khai, perhaps this may be useful to you: http://code.google.com/p/jdatastore/ If you find it excessive, perhaps just the filter method is what you're after: http://code.google.com/p/jdatastore/source/browse/trunk/store.js#375 On Mar 5, 4:00 am, Khai khaitd...@gmail.com wrote: I have a collection of DIVs (or a JSON array). Is there a javascript library that can search through a JSON array and return a collection of matched elements, and support advanced search with boolean operator? Thanks Khai
[jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
All right, I added IE6 support. Latest files (ui.finder.js,ui.finder-min.js, and ui-finder.ie.css) can be found at the trunk: http://code.google.com/p/jqueryfinder/source/browse/trunk Its not the same as in decent browsers but its good enough. On Mar 4, 7:41 pm, Nicolas R ruda...@googlemail.com wrote: Matt, I'll get back to you tomorrow with some code snippets. It's been a while since I did the bug fixing for IE and I can't remember right now what the issues were. And since I'm really smart I didn't save the code that fixed the issues. So, yeah, tomorrow I'll have a look and post back. Cheers On Mar 4, 4:47 pm, matt mathias.leimgru...@gmail.com wrote: Hi Nicolas first, its a great tool to work with! Currently I'm trying to use it in Plone CMS as a reference widget. It works great on nearly all browser (as you said) except on IE6. My approach was to give fixed height and width to the div's (.ui- finder-column, .ui-finder-wrapper): but without happy-end -.- I figured out how to make it work on IE6 (mostly), but as the changes are very specific I did not include them in the code. If anyone requires ie6 support just ask. So here I am and I'm asking for support :-) a few code snips should be enough. Thanks in advance best regards Matt
[jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
Matt, I'll get back to you tomorrow with some code snippets. It's been a while since I did the bug fixing for IE and I can't remember right now what the issues were. And since I'm really smart I didn't save the code that fixed the issues. So, yeah, tomorrow I'll have a look and post back. Cheers On Mar 4, 4:47 pm, matt mathias.leimgru...@gmail.com wrote: Hi Nicolas first, its a great tool to work with! Currently I'm trying to use it in Plone CMS as a reference widget. It works great on nearly all browser (as you said) except on IE6. My approach was to give fixed height and width to the div's (.ui- finder-column, .ui-finder-wrapper): but without happy-end -.- I figured out how to make it work on IE6 (mostly), but as the changes are very specific I did not include them in the code. If anyone requires ie6 support just ask. So here I am and I'm asking for support :-) a few code snips should be enough. Thanks in advance best regards Matt
[jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
Ok, first public version of jQuery Finder is now available. I've fixed a few bugs and added/changed some methods. Download from http://code.google.com/p/jqueryfinder/downloads/list Zip file contains all necessary scripts and styles. On Feb 20, 9:34 am, Nicolas R ruda...@googlemail.com wrote: Your welcome, glad you find it useful. To not display a new column, the onItemSelect callback must return false. So in that callback you check if the selected item was a pdf, and if yes, return false. If you dont return false, Finder will fetch the link via ajax, and display the contents in a new column. The weird characters is your pdf document being treated as text characters by the browser. Please note that this is not a stable release, in fact I found a bug the other day which I didnt have time to fix. On Feb 19, 11:08 pm, TiGeRWooD tigwod.e...@gmail.com wrote: Hi Nicolas, Is there a way, when it's a file link (like a pdf for example), to open the file and not display the new column ? Actually, if I put a link to a pdf in href attribute, the finder create a new column and display many special caracters Thanks for your reply and plugin !! p.s: sorry for my english :) On 11 fév, 19:18, Todd Parker fg.t...@gmail.com wrote: Hi Nicolas - I just wanted to say that you did a stellar job of using the new CSS framework. I'm the design lead for the jQuery UI team and was involved in the creation of the framework and this is the best example of leveraging the power of this system. Just curious, did you run into any issues or tips that you'd like to share with us? Anyone use the CSS framework that you'd like to share? I added links to this in the docs wiki in the ThemeRoller ready page:http://docs.jquery.com/UI/Theming/ThemeRollerReady On Feb 7, 2:04 pm, Nicolas R ruda...@googlemail.com wrote: IE 7 seems to be ok now, but there's a CSS bug I can't figure out (see the width of list items, it collapses to the width of the text they contain) I figured out how to make it work on IE6 (mostly), but as the changes are very specific I did not include them in the code. If anyone requires ie6 support just ask. Chrome is also ok. I also added some more data on the api. On Feb 6, 10:55 pm, Rick Faircloth r...@whitestonemedia.com wrote: Malformed in IE 7... -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Nicolas R Sent: Friday, February 06, 2009 1:33 PM To: jQuery (English) Subject: [jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns) v0.6a is out http://www.nicolas.rudas.info/jQuery/Finder/ Following up on Nikola's idea, I've also made this: http://www.nicolas.rudas.info/jQuery/Finder/v0.6a/api.html The jQuery API, finder style. It's doesn't give any API docs tho at the moment, just a list of methods (the json data provided by jquery are a bit messy and a bit of a hussle to translate to html)- Masquer le texte des messages précédents - - Afficher le texte des messages précédents -
[jQuery] Re: Loop through JSON data and check for each option specified
Hey Thomas, from what you're saying it seems that we're trying to tackle the same issue. Have a look at this it may be helpful: http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/83281987eccf68be What's your solution? On Feb 21, 4:24 pm, Thomas Jaggi thomas.ja...@gmail.com wrote: Great, that's it. Thanks a lot! The indexOf is just an example. The options are actually some kind of filters and I want to check each item against each filter. Depending on the filter It could be indexOf. On 21 Feb., 14:44, Mike mal...@gmail.com wrote: What is key? That's not in either one of your data structs. Oops, sorry, didn't look closely enough. But you can't use 'key' that way. Try this: if (item[key].indexOf(options[key]) != -1) Not sure what you're after with the indexOf though.
[jQuery] Finding values (text,numbers, regexps) in objects (arrays or key/value pairs)
I know that this is not the place to post my question but here it is. If someone knows a better place please do inform. I have an array of objects and I want to retrieve specific elements that match certain criteria, i.e. find value A in an object B. The problem is that I cannot know what is A (text, object, reg exp, array) and what is B (text, object, array). Also, I must assume that B may be an array or a key/value object and that A may be anywhere (including 'children' objects). This is usually the case when I have a JSON response from an external source and want to find something in there but without hard-coding any specific methods or search cases. I think the best way to achieve this is to have a method loop through the objects and arrays that are passed (and found) and call it self until there only two string/number/regexp values to be compared against. What I've done up to now is here http://jsbin.com/ahezi/edit - if you haven't understood what I just said perhaps the example on this page will help. Even tho it works as expected it is quite slow and I have no idea where the problem is. So my question is this: Is there a better way to achieve this result, and if not, how can I make the Find function faster?
[jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
Your welcome, glad you find it useful. To not display a new column, the onItemSelect callback must return false. So in that callback you check if the selected item was a pdf, and if yes, return false. If you dont return false, Finder will fetch the link via ajax, and display the contents in a new column. The weird characters is your pdf document being treated as text characters by the browser. Please note that this is not a stable release, in fact I found a bug the other day which I didnt have time to fix. On Feb 19, 11:08 pm, TiGeRWooD tigwod.e...@gmail.com wrote: Hi Nicolas, Is there a way, when it's a file link (like a pdf for example), to open the file and not display the new column ? Actually, if I put a link to a pdf in href attribute, the finder create a new column and display many special caracters Thanks for your reply and plugin !! p.s: sorry for my english :) On 11 fév, 19:18, Todd Parker fg.t...@gmail.com wrote: Hi Nicolas - I just wanted to say that you did a stellar job of using the new CSS framework. I'm the design lead for the jQuery UI team and was involved in the creation of the framework and this is the best example of leveraging the power of this system. Just curious, did you run into any issues or tips that you'd like to share with us? Anyone use the CSS framework that you'd like to share? I added links to this in the docs wiki in the ThemeRoller ready page:http://docs.jquery.com/UI/Theming/ThemeRollerReady On Feb 7, 2:04 pm, Nicolas R ruda...@googlemail.com wrote: IE 7 seems to be ok now, but there's a CSS bug I can't figure out (see the width of list items, it collapses to the width of the text they contain) I figured out how to make it work on IE6 (mostly), but as the changes are very specific I did not include them in the code. If anyone requires ie6 support just ask. Chrome is also ok. I also added some more data on the api. On Feb 6, 10:55 pm, Rick Faircloth r...@whitestonemedia.com wrote: Malformed in IE 7... -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Nicolas R Sent: Friday, February 06, 2009 1:33 PM To: jQuery (English) Subject: [jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns) v0.6a is out http://www.nicolas.rudas.info/jQuery/Finder/ Following up on Nikola's idea, I've also made this: http://www.nicolas.rudas.info/jQuery/Finder/v0.6a/api.html The jQuery API, finder style. It's doesn't give any API docs tho at the moment, just a list of methods (the json data provided by jquery are a bit messy and a bit of a hussle to translate to html)- Masquer le texte des messages précédents - - Afficher le texte des messages précédents -
[jQuery] Re: Does it hurt to call functions that don't do anything on the page?
I not sure if this suits you, but you could split your functions to
separate files and then lazy load each js file as necessary.
In such case http://nicolas.rudas.info/jQuery/getPlugin/ may be
helpful
Otherwise I find Ricardo's suggestion the easiest. You could also do
some time tests to check whether calling these functions when not
really needed effects performance, and act accordingly
On Feb 9, 3:33 am, mkmanning michaell...@gmail.com wrote:
*Tab+spacebar and it posts :P
You could put your list of functions in an array in your external js,
then call them on the window object in a loop:
$(function() {
var funcs = [
'ManageCategoriesClick',
'HideByDefault',
'PrepareSplitForm',
'SetUpAdvertPopup',
'CheckAll',
'CheckNone',
'EditCategoryInPlace',
'PreparePaneLinks',
'PrepareToolTips'
]
$.each(funcs,function(i,f){
if(typeof(window[f]) == 'function'){
window[f]();
}
});
});
On Feb 8, 5:21 am, Beau zar...@gmail.com wrote:
Thanks for the ideas everyone!
@Stephan: Yes, it's in an external JS file. I'd prefer to not have to
do any inline javascript. I've considered it, but thanks for the
suggestion!
@Ricardo: Thanks for those. I may end up doing a variation of them.
On Feb 8, 4:50 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi
I guess you have your $().ready() function in an external js file,
otherwise you could
customize it for the according html page.
Another construct similar to Ricardos one, but a bit more flexible:
Use a global variable in every html file to specify the init functions
you want to call for this page:
script type=text/javascript
myInitFxn = [ManageCategoriesClick, HideByDefault,
PrepareSplitForm,...];
/script
ready.js:
$().ready(function(){
for(var i in myInitFxn) {
myInitFxn[i](); // call init function
}
});
by(e)
Stephan
2009/2/8 brian bally.z...@gmail.com:
On Sat, Feb 7, 2009 at 11:21 PM, Ricardo Tomasi ricardob...@gmail.com
wrote:
Alternatively you could add a different class to the body of each
page, then use this rather amusing construct:
$(document).ready((function(){
var is = function(v){ return ++document.body.className.indexOf(v) };
return(
is('categories')
? ManageCategoriesClick :
is('hidebydefault')
? HideByDefault :
is('form')
? PrepareSplitForm :
is('advert')
? SetUpAdvertPopup :
function(){} //nothing
);
})());
That is, indeed, amusing. And one for my toy chest. Thanks!
Who knew, back in '96, that javascript was going to turn out to be so
much fun?
[jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
IE 7 seems to be ok now, but there's a CSS bug I can't figure out (see the width of list items, it collapses to the width of the text they contain) I figured out how to make it work on IE6 (mostly), but as the changes are very specific I did not include them in the code. If anyone requires ie6 support just ask. Chrome is also ok. I also added some more data on the api. On Feb 6, 10:55 pm, Rick Faircloth r...@whitestonemedia.com wrote: Malformed in IE 7... -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Nicolas R Sent: Friday, February 06, 2009 1:33 PM To: jQuery (English) Subject: [jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns) v0.6a is out http://www.nicolas.rudas.info/jQuery/Finder/ Following up on Nikola's idea, I've also made this: http://www.nicolas.rudas.info/jQuery/Finder/v0.6a/api.html The jQuery API, finder style. It's doesn't give any API docs tho at the moment, just a list of methods (the json data provided by jquery are a bit messy and a bit of a hussle to translate to html)
[jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
v0.6a is out http://www.nicolas.rudas.info/jQuery/Finder/ Following up on Nikola's idea, I've also made this: http://www.nicolas.rudas.info/jQuery/Finder/v0.6a/api.html The jQuery API, finder style. It's doesn't give any API docs tho at the moment, just a list of methods (the json data provided by jquery are a bit messy and a bit of a hussle to translate to html)
[jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
I've been working on this for a while today. I added the functionality Cliff requested, works like a charm. So now you can get all your data via xml or json or whatever, create a nested list and then call the finder function on that list to create a finder. I haven't uploaded this yet, I will in the following couple of days. I want to use jquery 1.3 for this plugin as it will save me a few lines of code, especially the closest function. Since I'm going to be doing this I figured to also make use of the themeroller and make it theme-able. Any suggestions on how to best tackle this? Are there any special requirements? Any jQuery UI people around here? Cheers On Jan 23, 7:32 pm, Nicolas R ruda...@googlemail.com wrote: @Cliff, I remember that somewhere in the source there's provision for what you're asking (the first version was like that). I'm also sure that its not implemented and that it will require quite a bit of fiddling to get it to work. I'll check the source and do some tests over the weekend and if I have time I will do it, otherwise I'll post info on how to do it yourself. Sorry of not being able to help at the moment. Nicolas On Jan 23, 11:03 am, Cliff clifford.me...@gmail.com wrote: Can you give me any hints on how I could modify this to read in the various levels from an existing ul on the page? Or form a set of nested div's or from provided XML? The reason I ask is that I think it is much easier to navigate this way from other tree based data, and if JS was disabled for a given page, you could still show the entire ul as plaintext.
[jQuery] Re: Bug? ajax request headers not being modified by beforeSend (jquery 1.3.1)
Hi Mike,
Unfortunately no I can't post a link, the site is private and contains
lots of sensitive user data.
I observe request using FF's firebug. As I said, using GET will change
the content-type to whatever I specify. When using POST, the content-
type may change but the charset part will not.
For example, if I specify
xhr.setRequestHeader('Content-type','application/x-www-form-
urlencoded;charset=windows-1253');
firebug will show the content-type to be
Content-Type : application/x-www-form-urlencoded; charset=UTF-8
I tried using the form plugin and doing ajaxSubmit rather than $.ajax,
but still the charset remains UTF-8.
Is this normal JS behaviour?
Thanks
Nicolas
On Jan 24, 3:14 am, Mike Alsup mal...@gmail.com wrote:
I need some help here guys.
I'm trying to modify the content-type and accept-charsetrequest
headers of an ajax call and it seems that beforeSend does not really
change the XHR object.
My code is something like this:
beforeSend : function(xhr) {
xhr.setRequestHeader('Accept-Charset','windows-1253');
xhr.setRequestHeader('Content-type','application/x-www-form-
urlencoded;charset=windows-1253')
}
I need the charset to be windows-1253 and not UTF-8, as the database
and everything in between (server side scripts) are encoded with
windows-1253.
My html page has the correct charset specified:
meta http-equiv=Content-Type content=text/html;
charset=windows-1253 /
meta http-equiv=Content-Script-Type content=text/javascript;
charset=windows-1253 /
If I submit the form without ajax, the charset is ok and my data is
saved correctly. Otherwise non-latin characters are replaced with
weird characters. From what I understand, changing the charset
encoding to UTF-8 is currently not an option.
Any suggestions? Is this a jquery bug or I'm I doing something wrong?
It seems that when I use GET instead of POST, the content type header
is correctly changed to what I specify.
But even so, this is not a stable fix as I want to POST.
Any ideas?
Hi Nicolas,
Can you post a link to a page that shows this behavior? How are you
observing the outgoing request headers?
Mike
[jQuery] Re: Bug? ajax request headers not being modified by beforeSend (jquery 1.3.1)
It seems that FF3 will always attach charset=UTF-8 to post requests,
even if you define it otherwise.
I tested this on FF2 and changed the charset to what I was after
(windows-1253) but still, non-latin characters were not stored
displayed correctly. I assume my problem is server-side rather than
client side, but the question remains: Why do non-latin characters
display correctly when doing a non-ajax, non-javascript POST, and why
do they change to unreadable characters when otherwise? (FF will
change them to UTF-8, whilst IE will change them to question marks)
Anyway, I wrote a small plugin to submit my forms in a hidden iframe
so that to avoid ajax. Problem solved. Works in all browsers,
including IE. Hope it helps: http://www.nicolas.rudas.info/jQuery/xajaSubmit.js
On Jan 24, 7:30 pm, Nicolas R ruda...@googlemail.com wrote:
Hi Mike,
Unfortunately no I can't post a link, the site is private and contains
lots of sensitive user data.
I observe request using FF's firebug. As I said, using GET will change
the content-type to whatever I specify. When using POST, the content-
type may change but the charset part will not.
For example, if I specify
xhr.setRequestHeader('Content-type','application/x-www-form-
urlencoded;charset=windows-1253');
firebug will show the content-type to be
Content-Type : application/x-www-form-urlencoded; charset=UTF-8
I tried using the form plugin and doing ajaxSubmit rather than $.ajax,
but still the charset remains UTF-8.
Is this normal JS behaviour?
Thanks
Nicolas
On Jan 24, 3:14 am, Mike Alsup mal...@gmail.com wrote:
I need some help here guys.
I'm trying to modify the content-type and accept-charsetrequest
headers of an ajax call and it seems that beforeSend does not really
change the XHR object.
My code is something like this:
beforeSend : function(xhr) {
xhr.setRequestHeader('Accept-Charset','windows-1253');
xhr.setRequestHeader('Content-type','application/x-www-form-
urlencoded;charset=windows-1253')
}
I need the charset to be windows-1253 and not UTF-8, as the database
and everything in between (server side scripts) are encoded with
windows-1253.
My html page has the correct charset specified:
meta http-equiv=Content-Type content=text/html;
charset=windows-1253 /
meta http-equiv=Content-Script-Type content=text/javascript;
charset=windows-1253 /
If I submit the form without ajax, the charset is ok and my data is
saved correctly. Otherwise non-latin characters are replaced with
weird characters. From what I understand, changing the charset
encoding to UTF-8 is currently not an option.
Any suggestions? Is this a jquery bug or I'm I doing something wrong?
It seems that when I use GET instead of POST, the content type header
is correctly changed to what I specify.
But even so, this is not a stable fix as I want to POST.
Any ideas?
Hi Nicolas,
Can you post a link to a page that shows this behavior? How are you
observing the outgoing request headers?
Mike
[jQuery] Re: 1.3.1 is over 10x slower than 1.2.6
I had the same problem, I still do actually and the only workaround was to turn off firebug. I also noticed that it wasn't so much the injected html that was causing the issue, rather it was binded events and animations (most likely). John, if you want I'll try and test this and determine the causes On Jan 23, 7:58 am, Loren lorenw...@gmail.com wrote: Thanks to John and the jQuery team, the problem was identified and found. It turns out I had a bad FireFox profile. For some reason, still unknown to everyone, if you see tremendous speed problems (in and out of firebug), try creating a new FireFox profile (firefox.exe -p), and use that one instead. You'll have to add back your bookmarks, options, and add-ons, but it's what fixed my 10x speed problem. v1.3 is still somewhat slower than v1.2, but they're both well within an acceptable margin. The 50 second load time for 1.3 is now down to 800ms, and the 4 second load time for 1.2 is now in the 500 ms range. Again, thanks to the jQuery team for helping with this, and I hope this can help others with a similar problem. -Loren On Jan 22, 2:14 pm, Loren lorenw...@gmail.com wrote: Thank you - it would good to know if I'm the only one experiencing this. My app is nearly all HTML injected, and it would be interesting to know if other highly DHTML apps are experiencing the same issue. -Loren On Jan 22, 12:54 pm, Alexsandro_xpt bagul...@gmail.com wrote: Interesting your test I will test my apps On 22 jan, 08:43, Loren lorenw...@gmail.com wrote: Hello, I have an application that does lots of HTML injection, animation, and manipulation, and I'm a long time user and fan of jQuery. Recently I downloaded 1.3.1, and my app became really sluggish. Normally it loads in under a second, but with 1.3.1 it takes over 3 seconds to load, and the animation is choppy. The problem *really* shows up when I use firebug. Normally my app loads in about 3-4 seconds in firebug, but the 1.3.1 library increases the firebug load time to about 50 seconds (you read that right). Here is a link to two screen shots of the firebug profiler. The first screen shot is using 1.2.6: http://public.hotwall.com/tmp/jQuery1.2.6.jpg The next link is the same profile (loading the app). The only difference is it's using 1.3.1: http://public.hotwall.com/tmp/jQuery1.3.1.jpg The profiler numbers show where the time is being spent. Is anyone else having speed problems with the new 1.3 jQuery? -Loren
[jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
@Cliff, I remember that somewhere in the source there's provision for what you're asking (the first version was like that). I'm also sure that its not implemented and that it will require quite a bit of fiddling to get it to work. I'll check the source and do some tests over the weekend and if I have time I will do it, otherwise I'll post info on how to do it yourself. Sorry of not being able to help at the moment. Nicolas On Jan 23, 11:03 am, Cliff clifford.me...@gmail.com wrote: Can you give me any hints on how I could modify this to read in the various levels from an existing ul on the page? Or form a set of nested div's or from provided XML? The reason I ask is that I think it is much easier to navigate this way from other tree based data, and if JS was disabled for a given page, you could still show the entire ul as plaintext.
[jQuery] Re: Download a file from server...
I also worked around this by using an iframe, and pointing the form's (or anchor's) target attribute to that iframe. Some browsers don't like it when the iframe is set to visibility:hidden or display:none. If you make it position:absolute;height:0;width:0;border:0; it should be ok. Now, I want to know when the 'save file' pop up is displayed to the user (= when the server has done processing the user's request). Apparently, the iframe's load event is not triggered when the server does not give back any text/html. Any workaround for this?
[jQuery] Re: Bug? ajax request headers not being modified by beforeSend (jquery 1.3.1)
It seems that when I use GET instead of POST, the content type header
is correctly changed to what I specify.
But even so, this is not a stable fix as I want to POST.
Any ideas?
On Jan 22, 7:09 pm, Nicolas R ruda...@googlemail.com wrote:
I need some help here guys.
I'm trying to modify the content-type and accept-charsetrequest
headers of an ajax call and it seems that beforeSend does not really
change the XHR object.
My code is something like this:
beforeSend : function(xhr) {
xhr.setRequestHeader('Accept-Charset','windows-1253');
xhr.setRequestHeader('Content-type','application/x-www-form-
urlencoded;charset=windows-1253')
}
I need the charset to be windows-1253 and not UTF-8, as the database
and everything in between (server side scripts) are encoded with
windows-1253.
My html page has the correct charset specified:
meta http-equiv=Content-Type content=text/html;
charset=windows-1253 /
meta http-equiv=Content-Script-Type content=text/javascript;
charset=windows-1253 /
If I submit the form without ajax, the charset is ok and my data is
saved correctly. Otherwise non-latin characters are replaced with
weird characters. From what I understand, changing the charset
encoding to UTF-8 is currently not an option.
Any suggestions? Is this a jquery bug or I'm I doing something wrong?
[jQuery] Bug? ajax request headers not being modified by beforeSend (jquery 1.3.1)
I need some help here guys.
I'm trying to modify the content-type and accept-charset request
headers of an ajax call and it seems that beforeSend does not really
change the XHR object.
My code is something like this:
beforeSend : function(xhr) {
xhr.setRequestHeader('Accept-Charset','windows-1253');
xhr.setRequestHeader('Content-type','application/x-www-form-
urlencoded;charset=windows-1253')
}
I need the charset to be windows-1253 and not UTF-8, as the database
and everything in between (server side scripts) are encoded with
windows-1253.
My html page has the correct charset specified:
meta http-equiv=Content-Type content=text/html;
charset=windows-1253 /
meta http-equiv=Content-Script-Type content=text/javascript;
charset=windows-1253 /
If I submit the form without ajax, the charset is ok and my data is
saved correctly. Otherwise non-latin characters are replaced with
weird characters. From what I understand, changing the charset
encoding to UTF-8 is currently not an option.
Any suggestions? Is this a jquery bug or I'm I doing something wrong?
[jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
@ Adam, Unfortunately no, I haven't done any testing on IE = no fixing. I imagine that it's not a lot of work to be done, mostly setting height: 1% to most of the elements and perhaps adding some width properties. I'm on a mac so testing on IE is not easy for me. Nicolas On Jan 16, 3:18 am, gobagoo atist...@gmail.com wrote: Great plugin. Have you made any progress on getting IE working. I would be happy to help as this is a feature that I would love to get working on my site. Thanks, Adam On Dec 8 2008, 6:25 am, Nicolas R ruda...@googlemail.com wrote: Greetings! I've put together a plugin that creates a mac-style finder out of a list. The plugin is still in development (ALPHA) and it needs some testing, especially on IE. The purpose of this plugin is to provide an alternative to treeview navigation. Making it look just like the Finder on a Mac is not my goal, I am after its core functionality. Having said this, I think that implementing useful features that exist on Mac's Finder (search, toolback w/ options, etc) is time well spent. You can find the plugin ( demo) here:http://www.nicolas.rudas.info/jQuery/Finder/ I'm posting this here as I'm after feedback, contributions (especially), and testers, so if anyone's interested please post here. I hope the source code is readable and self-explanatory, I did comment a lot on some things so it should make some sense. As this is an alpha release, I've just included a link to the script in the demo page, and a link to a zip file that contains the demo page along with css images used. The zip file is what you are probably after, as the css file is essential. Cheers
[jQuery] Re: New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
Yes I know, I haven't tested it on IE and I have done nothing for supporting it (no css hacks or conditional comments). I am sure that it has some issues, especially with CSS support. Hopefully the issues are just css related and don't break the plugin's functionality. As the CMS, that's the purpose I'm using it. One for seeing already existing 'pages' and stuff, and two for file management (when linking to stuff, inserting images etc). Although I find it much easier that normal treeview navigation, I am not sure if others agree as I haven't asked and/or tested it properly. That's also why I'm posting it here :) Thanks for replying, I'll be glad to see your contribution. On Dec 8, 1:29 pm, Liam Potter [EMAIL PROTECTED] wrote: it seems your CSS needs a good look at in IE. I'm in work right now but I'l lsee if I can't fix it up in Ie for you. I like the idea of this, would be good for CMS use. Nicolas R wrote: Greetings! I've put together a plugin that creates a mac-style finder out of a list. The plugin is still in development (ALPHA) and it needs some testing, especially on IE. The purpose of this plugin is to provide an alternative to treeview navigation. Making it look just like the Finder on a Mac is not my goal, I am after its core functionality. Having said this, I think that implementing useful features that exist on Mac's Finder (search, toolback w/ options, etc) is time well spent. You can find the plugin ( demo) here:http://www.nicolas.rudas.info/jQuery/Finder/ I'm posting this here as I'm after feedback, contributions (especially), and testers, so if anyone's interested please post here. I hope the source code is readable and self-explanatory, I did comment a lot on some things so it should make some sense. As this is an alpha release, I've just included a link to the script in the demo page, and a link to a zip file that contains the demo page along with css images used. The zip file is what you are probably after, as the css file is essential. Cheers
[jQuery] New Plugin: jQuery Finder (Mac-style 'Treeview' with Columns)
Greetings! I've put together a plugin that creates a mac-style finder out of a list. The plugin is still in development (ALPHA) and it needs some testing, especially on IE. The purpose of this plugin is to provide an alternative to treeview navigation. Making it look just like the Finder on a Mac is not my goal, I am after its core functionality. Having said this, I think that implementing useful features that exist on Mac's Finder (search, toolback w/ options, etc) is time well spent. You can find the plugin ( demo) here: http://www.nicolas.rudas.info/jQuery/Finder/ I'm posting this here as I'm after feedback, contributions (especially), and testers, so if anyone's interested please post here. I hope the source code is readable and self-explanatory, I did comment a lot on some things so it should make some sense. As this is an alpha release, I've just included a link to the script in the demo page, and a link to a zip file that contains the demo page along with css images used. The zip file is what you are probably after, as the css file is essential. Cheers
[jQuery] Re: Design question
instead of using an array you could use a key/value object.
then you can do something like
var o = {}
o[row_position] = [row_data]
then when you remove a row you do
delete o[row_position]
you could get the row's position from the dragdrop callback I assume,
but even if thats not the case its pretty straight forward using
jquery i guess.
On Nov 24, 5:40 pm, daveyoi [EMAIL PROTECTED] wrote:
Hello Everyone,
I am new to jquery and am using it in a project to develop a PHP based
Mysql report generator. My question is not 100% jquery but more on
application design?
I have a bunch of list items that I can drag and drop (thanks to
jquery) on to a workspace - on dropping I create a TH/TH elelment
with the value of the list item and an image which has a .click()
attached with a call back to a remove(). - This all works as expected
and really demonstrates how after just a couple of hours how powerfull
jquery is.
The hard part that I just cant get my head round is I need the value
and position of each item dropped onto the page stored somehow. I have
been using a bog standard js array and just pushing the new value into
the array on the drop callback but if I remove one of the TH/TH
then my array keys become out of sync.
Any suggestions on how best to approach this - I am primarily a PHP
developer and have been thinking of using Ajax to store the data in a
temp table but this seems a little longwinded.. js gurus your ideas?
Thanks - and hope I can repay the favour some time.
Dave
[jQuery] Re: Exhausted..Need HELP Please! - Jquery / Simplemodal / Jquery.validate.js
I would say that the problem is caused by either invalid HTML and/or event bindings being lost after you replace the original element with a new one (retrieved via ajax perhaps). I haven't checked for the second case, but it appears that invalid HTML is the most probable cause. It's always good practice to validate your markup and make sure that it's well structured (at least). If your markup is not well structured your scripts may not behave as you would expect. On Oct 1, 2:01 am, HolyInsomniac [EMAIL PROTECTED] wrote: Hello, First of all, thank you for reading my post. I have been trying to resolve this issue for the past 2 weeks trying different things. Let me get right into my problem, but before explaining the problem, let me share my objective and then go on from there. Test Link:http://thedailysavings.com/beta/test11.php Objective: Display a lightbox style box containing a registration form. This form must validate all fields in real time using AJAX. There will be other forms on the page as well such as login form or contact us form. What am I using: PHP, Jquery, Jquery form validation plugin (http:// bassistance.de/jquery-plugins/jquery-plugin-validation/), simpleModal lightbox (http://www.ericmmartin.com/projects/simplemodal/). Issue: After many hours of pulling my hair out, I have been able to pinpoint the cause of my problems with this registration form. Here goes: I am able to display the registration form inside the simpleModal lightbox but there are still this issue left. See below some test scenarios: Scenario 1: Validation should happen at all times when using the registration form. a. Open the registration form by clicking on Register Now link. It does validation the first time. TRY entering a wrong email address and you will see proper validation. Now CLOSE the modalBox by clicking on X. b. Open the registration form again by clicking on Register Now Link. Try entering a wrong email address and you will notice that it does NOT perform validation. Scenario 2: Login form (Username Password inputs) placement impacts the validation of registration form such as: a. If I move the login form above the registration form in the code, the validation stops happening. b. If I move the login form below the registration form (as it is now), the validation works but only the first time. c. If I remove the login form that has Username and Password as inputs, validation works fine. Like I mentioned earlier that I have spent way too much time on this with not enough progress. Maybe because I am new to Jquery and learning it the hard way. Also, please note that this is a stripped down version to show only the registration form in action. I would appreciate so much if you could PLEASE help me get out of this situation and show me the light. Thank you so much Best regards, Azam
[jQuery] Re: Validation regarding Jquery
just make sure that you remove any previous validation messages before
inserting new ones. if you add class of 'validation-msg' to your
messages, then do a $('.validation-msg').remove() whenever you
validate something. If you are considering performance when you could
also do something along the lines of $('element-being-
validated').next('.validation-msg').text('new validation message')
On Oct 1, 12:14 pm, surya [EMAIL PROTECTED] wrote:
Hi,
Small doubt regarding jquery.
I am getting the jquery messages as the no.of times I clicked the
update button of my form.
In detail, When i pressed the update button of my form, i am getting
the validation message beside the textbox. But when i pressed the
update button one more time (now 2 times the button is pressed), i am
getting the validation message 2 times and so on..
Can anyone please help me to fix this one.
Thanks,
Surya.
[jQuery] $.waitFor: Calling a function only when another has completed
I've put together a simple jQuery method that puts functions 'on hold'
so that they are called at the right time and with the right
arguments. I thought that some of you may find it useful so here it
is.
In my case, I used this in creating editable areas with FCK text
editor. Instead of using timers and a bunch of functions to check if
the textarea exists yet, and if fck's javascript has loaded, and if
the editor is ready, I used this.
For lack of a better name, I called this function 'waitFor'. I haven't
tested it thoroughly, so if you find a bug (or have any suggestions/
contributions) please post them here.
For example:
$.waitFor(function(){
var n = this;
setTimeout(function(){
n.next();
},2000);
return ['a'];
},function(a){
var n = this;
setTimeout(function(){
n.next(a,'b');
},3000);
},function(a,b){
alert(a+' '+b);
});
You have three functions that share data, but you want to call each
function only when the previous has finished doing some processing
(e.g. ajax request). I've used a timeout here to signify the
processing part.
The example flows as follows:
1) the first function is called, and 'a' is returned instantly
2) the returned value (a) is saved to be passed on to the following
function
3) after 2 seconds, the second function is called (with 'a' passed as
argument)
4) the second function waits for 3 seconds, and then calls the third
function passing as arguments the letters 'a' and 'b' ('a' was passed
on from the first function)
5) the third function displays the arguments passed from the second
function
Notes:
- inside each function, 'this' refers to the prototype property of the
current function;
- three methods are added to the prototype of each function:
1) .next([arguments]) : calls the next function
2) .tryAgain([delayl]) : calls the current function again, after a
delay (default:10ms)
3) .return : stores the return value of the current function
- $.waitFor returns a function, so use $.waitFor([functions])() to
immediately start executing functions
The script:
$.extend($, {
waitFor : function(){
var funcs = arguments;
return function(){
callNext = function(i,data){
var f = funcs[i];
var p = f.prototype;
p.next = function(){
var d = (arguments.length0)
? arguments
: p.return;
callNext((i+1),d);
};
p.tryAgain = function(interval){
setTimeout(function(){ return
f.apply(p,data); },(interval ||
10));
};
p.return = f.apply(p,data);
};
callNext(0);
};
}
});
[jQuery] Re: should be using .find . . .
$.ajax({
type: GET,
url: home.html,
data: ,
success: function(html){
$(#loadTest).append($(html).find(#footer));
}
});
that should do it. but why would you pass an empty string of data?
On Apr 21, 9:39 am, hubbs [EMAIL PROTECTED] wrote:
I cannot get it to work, here is what I tried:
function loadTest() {
$.ajax({
type: GET,
url: home.html,
data: ,
success: function(html){
$(html).find(#footer);
$(#loadTest).append(html);
}
});
Any help would be appreciated!
On Apr 20, 10:22 pm, hubbs [EMAIL PROTECTED] wrote:
Sorry, not sure how I started a new topic...
I am trying to use the ajax POST and GET function, and at the same
time, use .find to filter the results so I only return a div with a
specific ID. I have tried, and I am failing to get it working. Any
help would be great!
On Apr 20, 10:20 pm, hubbs [EMAIL PROTECTED] wrote:
Could anyone help with this? I figure that I should be using
the .find function, but I am not sure how to use to to filer my
response text, and only display the id that I want. The example seems
to not be working, or I should be changing it somehow, and I am not
sure.
Anyone?
[jQuery] Re: ANNOUNCE: Free AIR v1.0 for JavaScript Developers Pocketguide from Adobe
Rey, Thanks On Apr 18, 6:25 pm, Rey Bango [EMAIL PROTECTED] wrote: For all jQuerians interested in producing AIR applications, Ajaxian.com has posted about the new AIR for JavaScript Developers Pocketguide which has been updated for Adobe AIR v1.0. The PDF download is FREE! Get it while it's hot! http://ajaxian.com/archives/adobe-air-for-javascript-developers-pocke... Rey
[jQuery] Re: Traversing AJAX Response?
If you convert your response to a jQuery object then yes. So something
like $(response).find('#mylinks') should work, if used in the success
callback function. Your response doesnt need to be in XML, HTML is
just fine.
On Apr 19, 5:46 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
Is it possible to parse the HTML of an AJAX response and grab only a
certain piece of the response to be displayed by the caller?
Specifically, I'm trying to modify a page so that when I hover over a
certain set of links, a pop-up window is displayed with the link's
target in the pop-up. The problem is that the URL is an entire
webpage, and I only want to display a certain piece of text from this
webpage. Is it possible to traverse the AJAX response using selectors
so that I can grab a certain div class and display its text?
[jQuery] Re: Tabs Validation
Perhaps you could prevent the user from accessing another tab when there are errors on the tab he is currently looking at. On Apr 12, 1:30 pm, Klaus Hartl [EMAIL PROTECTED] wrote: I think in this case you should reconsider using tabs at all. If you want to use tabs you should put error messages on top of the tab pane, so that the errors are visible to the user. --Klaus On Apr 10, 4:50 pm, MarcelloP [EMAIL PROTECTED] wrote: Hi all! I need a little advice; in a page I have a form with a tabs with 3 tab- pages, all with input elements and all required; in this form I also have enabled the splendid Validation plugin. My concern is this: if a user fill only the inputs of the first tab- page and leave blank the others, he cannot submit the form 'cause this is correctly stopped by the validation plugin, but the problem is that the user cannot see the invalid inputs (highlighted by the Validation) on the others tabpages 'cause he is on the first. Please, someone may suggest me the correct way to proceed within? Thanks in advance. MarcelloP
[jQuery] Re: $(window).bind(load,function(){ vs onready
This is quite a nice topic for discussion as it touches on various
important theoretical and practical issues.
All my sites validate perfectly with script tags just before
closing
/body. What standard are you talking about? - Mika
Yes its valid, and it is important to remember that validation is not
the goal at the end of the day. The goal is to have a website/
application that performs well and does whats meant to do.
So having your scripts just before /body its a good way to
decrease the loading time, and unobtrusive JS (like jQuery's) is a
great way to maintain your code separate for content (thereby reducing
possible future problems)
However, by not keeping your scripts and styles in one place (head)
could be headache when maintaining your application.
I agree with jake that this is an issue that has to be resolved by
each developer on a case by case basis. Personally I prefer to keep
essential scripts (like jquery.js) at the head, and then use some kind
of lazy loading (there are a couple of plugins for this) to import
additional scripts (and styles) as needs arise after the page has
finished loading. I would say its the best of both worlds, but again
it depends.
On Apr 8, 12:19 pm, Jake McGraw [EMAIL PROTECTED] wrote:
From the comments on Yahoo Performance Rule #
5http://developer.yahoo.net/blog/archives/2007/07/high_performanc_5.html:
:: snip ::
There are some cases where you wouldn't want your JS at the bottom.
For example, if you were using an ondomready event that many of the
js libraries supply, you would want the code to execute towards the
top. If you were to move all your JS to the bottom of the page, the
event would be rendered useless.
However, it's nice to know that having it at the top is a performance
hit so that I can weigh the positives with the negatives before moving
forward.
:: snip ::
So there is an instance where, using jQuery $(document).ready() or any
JavaScript library DOM ready functionality, it makes more sense to
keep your script tags in the document head.
In the end, it's up to the developer which method to use, as both can
be utilized successfully. I said in my original post that this is
mostly the territory of debate for standardistas, therefore its
worth inside of real-world web application development is
questionable. Considerations of end user experience often override
whatever the W3C or ECMA specificies. I'm just providing an alternate
opinion so developers can make an informed consideration. Thankfully,
jquery-en provides a professional environment where we can have this
discussion.
- jake
On Tue, Apr 8, 2008 at 11:40 AM, Mika Tuupola [EMAIL PROTECTED] wrote:
On Apr 8, 2008, at 6:23 PM, Jake McGraw wrote:
Regardless of whether it validates, it's considered best practices to
keep all script tags out of the body:
It all depends who consideres.
http://developer.yahoo.com/performance/rules.html#js_bottom
If you put your scripts at the very end of a page, it is possible that
a user already sees part of the page including a button with a
JavaScript function call, while the rest of the page hasn't loaded
yet. Result: user pushes button and gets JavaScript Error Message
Alerts, because the browser can't find the script (yet).
True, if you do things like:
input type=button onclick=checkform() /
Then again not a problem if you write unobtrusive JavaScript.
$(function() {
$(input).bind(click, checkform);
});
And isn't jQuery about writing unobtrusive JavaScript? ;)
--
Mika Tuupola
http://www.appelsiini.net/
[jQuery] Re: $(window).bind(load,function(){ vs onready
well, for example, if you want to do something to your DOM elements (divs, links, lists etc) and do it as quickly as possible then you could use document.ready. if on the other hand you are not in a hurry to change the state of your DOM elements or the functionality you want to achieve is less important than the images on your page, then go for window.load. so if your doing a gallery and your images and all are more important than having a news ticker or form validation or something like that, then window.load may be a better choice. it all depends on what you want to achieve, thats why there are two different events to choose from On Apr 8, 12:24 am, coughlinsmyalias [EMAIL PROTECTED] wrote: Thank you! What do you think is better to use? And when would you use one compared to another? Thanks! Ryan ps, ill check out the docs you supplied On Apr 7, 4:55 pm, MorningZ [EMAIL PROTECTED] wrote: Your browser window's Load event doesn't fire until the document is fully loaded (images and all) The Ready event fires when the DOM is ready More verbose description of Ready is in the docs http://docs.jquery.com/Events/ready
[jQuery] Re: New Plugin to help optimise usage of jQuery plugins - contributions welcome
Ariel, thanks for the feedback. I included the debugging option so that developers can see how long it takes for some plugins to load, so that they could optimise it accordingly (fewer selectors for each plugin, no/less calls to getNeeded() function). It seems however that 'alternate stylesheet' isn't the trick for Opera in this case. On Apr 4, 9:21 pm, Ariel Flesler [EMAIL PROTECTED] wrote: Just a guess, but set rel=alternate stylesheet to the style.. it solved a problem I had some time ago, not exactly this, but I know it is a quirk. -- Ariel Fleslerhttp://flesler.blogspot.com On 4 abr, 12:27, Nicolas R [EMAIL PROTECTED] wrote: There seems to be a problem with the plugin when loading external CSS and the browser is Opera. From what I understand Opera loads the DOM first, and then the CSS (all others do it the other way around). For some reason external style sheets will not be applied to the DOM (even if they are appended to the 'head' or 'body' or wherever). This issue was found when using $.getPlugin with datepicker a thickbox plugins, both of which have a script and a stylesheet. As they both append elements to the DOM after $(document).ready, and after their styles have been loaded, the styles are not applied to the newly appended elements. Any suggestions about this? On Apr 4, 2:19 am, Nicolas R [EMAIL PROTECTED] wrote: Hey all, I've just released getPlugin, a plugin that aims to minimise loading/ rendering times by keeping unnecessary scripts and styles out of the DOM. What it does is basically check whether or not a specific plugin/ script/style should be imported, and then imports it. The concept is similar to $.getScript, but it's much more flexible (and it also allows browsers to cache the external files, so that download times are even shorter). Basic syntax is : $.getPlugin(plugin,[check],[data],[callback]); As the goal of this plugin is to keep loading times as short as possible, any suggestions and modifications that help achieve that goal are more than welcome. The one issue that I encountered has to do with events and ajax requests, where events are removed from elements updated via ajax. If anyone has a fix for this or any suggestion I'm all ears. For those interested the plugin can be found at:http://plugins.jquery.com/project/getPlugin Cheers- Ocultar texto de la cita - - Mostrar texto de la cita -
[jQuery] Re: new to jquery
try .parents() instead of .parent() if the parent you are looking for
is not the immediate parent of the element you specify (what Andy
said).
so $(this).parents(fieldset) should work
also, perhaps you should use .toggleClass
$(function(){
$(a.toggle)
.click(function(){
$
(this).parents(fieldset).toggleClass('collapsed')
});
});
haven't tested this but seems ok
On Apr 4, 3:42 pm, noon [EMAIL PROTECTED] wrote:
=== jQuery code ===
$(function(){
$(a.toggle)
.click(function(){
if ( $(this).parent(fieldset).hasClass(collapsed)
) {
$(this).parent(fieldset).removeClass(collapsed);
}
else {
$(this).parent(fieldset).addClass(collapsed);
}
});
});
=== HTML ===
fieldset class=collapsible collapsed group_5
legend
a class=toggle href=javascript:void(0)Board Meeting
Minutes and Resolutions/a
/legend
div class=container oddRow
div class=doc-date02/13/2007/div
div class=doc-titleLetter of Resignation - Vice President
of Human Resources eff. 02/28/07/div
/div
/fieldset
=== Notes ===
Doesn't error, but it sure doesn't do anything either. Tried alerting
some attributes like class or the typeof $(this).parent(fieldset)
but kept coming up with undefined. There isn't any other fieldset
above that one. I used to have the code -- if ($
(this.parentNode.parentNode).hasClass(collapsed') -- and it worked.
Can't determine what .parent() is doing for me here, besides
frustrating.
Appreciate any help or advice
[jQuery] Re: New Plugin to help optimise usage of jQuery plugins - contributions welcome
There seems to be a problem with the plugin when loading external CSS and the browser is Opera. From what I understand Opera loads the DOM first, and then the CSS (all others do it the other way around). For some reason external style sheets will not be applied to the DOM (even if they are appended to the 'head' or 'body' or wherever). This issue was found when using $.getPlugin with datepicker a thickbox plugins, both of which have a script and a stylesheet. As they both append elements to the DOM after $(document).ready, and after their styles have been loaded, the styles are not applied to the newly appended elements. Any suggestions about this? On Apr 4, 2:19 am, Nicolas R [EMAIL PROTECTED] wrote: Hey all, I've just released getPlugin, a plugin that aims to minimise loading/ rendering times by keeping unnecessary scripts and styles out of the DOM. What it does is basically check whether or not a specific plugin/ script/style should be imported, and then imports it. The concept is similar to $.getScript, but it's much more flexible (and it also allows browsers to cache the external files, so that download times are even shorter). Basic syntax is : $.getPlugin(plugin,[check],[data],[callback]); As the goal of this plugin is to keep loading times as short as possible, any suggestions and modifications that help achieve that goal are more than welcome. The one issue that I encountered has to do with events and ajax requests, where events are removed from elements updated via ajax. If anyone has a fix for this or any suggestion I'm all ears. For those interested the plugin can be found at:http://plugins.jquery.com/project/getPlugin Cheers
[jQuery] [getPlugin] New Plugin to help optimise usage of jQuery plugins - contributions welcome
Hey all, I've just released getPlugin, a plugin that aims to minimise loading/ rendering times by keeping unnecessary scripts and styles out of the DOM. What it does is basically check whether or not a specific plugin/ script/style should be imported, and then imports it. The concept is similar to $.getScript, but it's much more flexible (and it also allows browsers to cache the external files, so that download times are even shorter). Basic syntax is : $.getPlugin(plugin,[check],[data],[callback]); As the goal of this plugin is to keep loading times as short as possible, any suggestions and modifications that help achieve that goal are more than welcome. The one issue that I encountered has to do with events and ajax requests, where events are removed from elements updated via ajax. If anyone has a fix for this or any suggestion I'm all ears. For those interested the plugin can be found at: http://plugins.jquery.com/project/getPlugin Cheers
[jQuery] Re: How to know if the entire page has loaded, AFTER it has loaded? [advanced]
Iair, so what you are saying is that you want to know if, at any point in time, there are any page elements that are still loading? for example, if a mouse click appends a script to the page you need to know if the script has loaded or not? If that's the case, then I've been also trying to get this functionality as well, but with no great results. In the case of scripts in particular what I've done is set up a timer that checks for a specific function contained in that script. If the function exists, it meas the script has loaded; otherwise the script is still loading (or the function does not exist, or the path of the script is incorrect). Perhaps a timer that checks if an element exists ($ (selector).length0) should do the trick for all types of files (scripts,styles, imgs etc)?
