[jQuery] blockUI history removal
In jquery.blockUI.js (most up to date version says it's 2.27 24-
SEP-2009) the line
$(data.el).removeData('blockUI.history');
(line 391, in the reset function)
looks a bit suspect to me: in the install function the data object is
added to the _blocked_ element, but data.el is the _message_ (which
as far as I can tell never gets a data object added to it). I think
this means that the history is not removed, and if for some reason you
call unblockUI again on the same element then the message node will
get put back in the DOM again, which is inconvenient when you're
trying to pop up error messages...
Shouldn't the code be
$(el).removeData('blockUI.history');
?
Thanks
Stephen
[jQuery] Writing a plug-in that uses jQuery .live() method, but something doesn't work...
Hi,
I'm trying to write a plug-in that enforces a character limit on a
textarea of a form that is dynamically loaded via Ajax. If the
character limit is reached, I disable keyboard input except for a
few keys.
Without writing a plug-in, this code works:
(function ($)
{
$ (document).ready (function ()
{
var charLength;
var textfield;
var charLimitReached = false;
/* User cannot enter number of characters greater than
character
limit */
$(.your_comment).live(keydown, function(event) {
textfield = $(this).val();
charLength = $(this).val().length;
/* Once character limit reached, only arrow
keys, backspace, and
delete keys will work in the textarea */
if (!(event.which == 46 || event.which == 8 ||
event.which == 37
|| event.which == 38 || event.which == 39 || event.which == 40)
(charLimitReached == true)) {
event.preventDefault();
}
});
$(.your_comment).live(keyup, function(event) {
textfield = $(this).val();
charLength = $(this).val().length;
if (charLength = 1000) {
charLimitReached = true;
} else {
charLimitReached = false;
}
});
}
}
}
) (jQuery);
When I wrap most of this functionality in a plug-in format, this no
longer works. Specifically, the return this.each() doesn't seem to do
anything:
(function ($)
{
/* Plug-in function to enforce character limits on form input and
textarea elements */
$.fn.enforceCharLimit = function(options) {
/* defaults */
var defaults = {
charLimit: 1000
};
var options = $.extend(defaults, options);
/* Apply behavior to all matched elements and return
jQuery object
for chaining */
return this.each(function(){
var charLength;
var textfield;
var charLimitReached = false;
/* this refers to DOM element inside each() Use
jQuery object
instead */
$(this).live(keydown, function(event) {
textfield = $(this).val();
charLength = $(this).val().length;
/* Once character limit reached, only
arrow keys, backspace, and
delete keys will work in the textarea */
if (!(event.which == 46 || event.which
== 8 || event.which == 37
|| event.which == 38 || event.which == 39 || event.which == 40)
(charLimitReached == true)) {
event.preventDefault();
}
});
$(this).live(keyup, function(event) {
textfield = $(this).val();
charLength = $(this).val().length;
if (charLength = options.charLimit) {
charLimitReached = true;
} else {
charLimitReached = false;
}
});
});
}
$(.your_comment).enforceCharLimit({ charLimit:
1001});
) (jQuery);
Any help would be appreciated. Thanks.
[jQuery] Re: Writing a plug-in that uses jQuery .live() method, but something doesn't work...
After consulting with a colleague, I abandoned the plug-in and turned
it into a normal function.
Profile.enforceCharLimit = function(options){
/* defaults */
var defaults = {
selector: '',
charLimit: 1000
};
options.selector would be used as part of the jQuery selector for
attaching the live() method.
On Oct 14, 1:52 pm, Stephen tan...@gmail.com wrote:
Hi,
I'm trying to write a plug-in that enforces a character limit on a
textarea of a form that is dynamically loaded via Ajax. If the
character limit is reached, I disable keyboard input except for a
few keys.
Without writing a plug-in, this code works:
(function ($)
{
$ (document).ready (function ()
{
var charLength;
var textfield;
var charLimitReached = false;
/* User cannot enter number of characters greater
than character
limit */
$(.your_comment).live(keydown, function(event) {
textfield = $(this).val();
charLength = $(this).val().length;
/* Once character limit reached, only arrow
keys, backspace, and
delete keys will work in the textarea */
if (!(event.which == 46 || event.which == 8
|| event.which == 37
|| event.which == 38 || event.which == 39 || event.which == 40)
(charLimitReached == true)) {
event.preventDefault();
}
});
$(.your_comment).live(keyup, function(event) {
textfield = $(this).val();
charLength = $(this).val().length;
if (charLength = 1000) {
charLimitReached = true;
} else {
charLimitReached = false;
}
});
}
}}
) (jQuery);
When I wrap most of this functionality in a plug-in format, this no
longer works. Specifically, the return this.each() doesn't seem to do
anything:
(function ($)
{
/* Plug-in function to enforce character limits on form input and
textarea elements */
$.fn.enforceCharLimit = function(options) {
/* defaults */
var defaults = {
charLimit: 1000
};
var options = $.extend(defaults, options);
/* Apply behavior to all matched elements and return
jQuery object
for chaining */
return this.each(function(){
var charLength;
var textfield;
var charLimitReached = false;
/* this refers to DOM element inside each()
Use jQuery object
instead */
$(this).live(keydown, function(event) {
textfield = $(this).val();
charLength = $(this).val().length;
/* Once character limit reached, only
arrow keys, backspace, and
delete keys will work in the textarea */
if (!(event.which == 46 ||
event.which == 8 || event.which == 37
|| event.which == 38 || event.which == 39 || event.which == 40)
(charLimitReached == true)) {
event.preventDefault();
}
});
$(this).live(keyup, function(event) {
textfield = $(this).val();
charLength = $(this).val().length;
if (charLength = options.charLimit) {
charLimitReached = true;
} else {
charLimitReached = false;
}
});
});
}
$(.your_comment).enforceCharLimit({ charLimit:
1001});
) (jQuery);
Any help would be appreciated. Thanks.
[jQuery] Attaching methods to identical forms, but only invoking the method on the current form
Hi,
I have a form that is repeated through out the page by the backend,
which I have no control over.
form action=
textarea class=your_comment rows=10 cols=70/textarea
a href=# class=comment_form_cancelCancel/a
/form
I want to attach an event to the link to clear the textarea.
$(.comment_form_cancel).live(click, function(event) {
$(.your_comment).val('');
event.preventDefault();
});
This method would be attached to all instances of the form. However,
I would like only the form the user is currently working on to trigger
the method. For example, if there are 3 forms, I click the cancel
link on the 3rd form, the clearing should only happen on the 3rd form,
not all forms. Is there a way to do this?
Thanks,
Stephen
[jQuery] Re: Attaching methods to identical forms, but only invoking the method on the current form
Hi Mike,
Ah, the this object! I forgot about that. Thank you for code
snippet!
--Stephen
On Sep 16, 3:38 pm, Mike Alsup mal...@gmail.com wrote:
I have a form that is repeated through out the page by the backend,
which I have no control over.
form action=
textarea class=your_comment rows=10 cols=70/textarea
a href=# class=comment_form_cancelCancel/a
/form
I want to attach an event to the link to clear the textarea.
$(.comment_form_cancel).live(click, function(event) {
$(.your_comment).val('');
event.preventDefault();
});
This method would be attached to all instances of the form. However,
I would like only the form the user is currently working on to trigger
the method. For example, if there are 3 forms, I click the cancel
link on the 3rd form, the clearing should only happen on the 3rd form,
not all forms. Is there a way to do this?
This should work:
$(.comment_form_cancel).live(click, function(event) {
$(this).prev(.your_comment).val('');
event.preventDefault();
});
[jQuery] Possible bug in appending scripts: works under FF3, doesn't with IE7?
Hello,
theoretically the following two web pages should be equivalent, and
indeed they are under Firefox3, but IE7 fails miserably in rendering
the second version. The included script is a simple public script
provided by the hotel review site trivago.com that shows a specific
hotel's current rating, for hoteliers to include in their personal
website.
Is it a bug in jquery's way of appending scripts? Am I missing
something?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
titleIE7 test/title
/head
bodyscript src=http://www.trivago.com/certificate.php?
amp;item=45453/script div id=trivago_certificate_45453_0
class=layout_5 a href=http://www.trivago.com/sorrento-45511/
hotelHotel /a/div/body/html
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
titleIE7 test/title
script type=text/javascript src=jquery.js/script
script type=text/javascript
$(document).ready(function () {
$('body').html('script src=http://www.trivago.com/
certificate.php?amp;item=45453\074/script div
id=trivago_certificate_45453_0 class=layout_5 a href=http://
www.trivago.com/sorrento-45511/hotelHotel /a/div');
});
/script
/headbody/body/html
[jQuery] Re: Palm Pre and jQuery? Is it possible?
Andy, I would think that this is probably possible. We have an application out for the Mojo SDK, and as of yet have not seen any real documentation on developing for WebOS. According to Page 6 of the available chapter of WebOS rough cuts from oreilly on Palm's site(http://developer.palm.com/webos_book/book6.html), WebOS supports DOM Level 2 and various HTML5 functions for data access. I'm not terribly interested in purchasing the rough cuts book, but there may be more info available elsewhere in it. -Stephen On Tue, 16 Jun 2009 14:52:25 -0500, Andy Matthews amatth...@dealerskins.com wrote: I watched a slidedeck today which talked about developing for WebOS, which is all based around JavaScript. Does anyone know if it's possible to use jQuery for WebOS development? andy
[jQuery] Re: autocomplete
On Fri, 05 Jun 2009 09:34:05 -0400, Tom Worster f...@thefsb.org wrote: not for basic auth which is handled in http. you need to fix this on the server. i don't think there's much point in user auth for autocompletion lookups so i would turn it off. Well you could expose your auth un/pw by including it in the fetch url, couldn't you? http://username:password@host/path, though this will fail for IE7+ users, as MS disallowed this syntax starting with IE7. Otherwise I agree with Tom. -S
[jQuery] Re: Removing dynamically inserted html
Or one could use .live()
$('.removeitem').live(click,
function(){
$(this).prev().parent().remove();
return false;
});
So that when an item with class 'removeitem' is created, it is
automatically bound to the click event.
Just a thought!
-S
On Thu, 04 Jun 2009 22:12:00 +0700, Erdwin Lianata
erdwin.lian...@yahoo.com.sg wrote:
Because you never bind your dinamically added items.
Try adding new variable function that contains your removing item code,
then re-bind for all .removeitem's item just after you added a new item.
This is what I've done so far:
var ItemRemoveFn = function(event) {
// Here is your remove item code
$(this).prev().parent().remove();
return false;
}
function propagateRemoveItem() {
$('.removeitem').unbind('click', itemRemoveFn);
$('.removeitem').bind('click', itemRemoveFn);
}
$(document).ready(function() {
$('.additem').click(function(){
var template = $($(this).prev().get(0)).clone();
template.insertBefore($(this));
propagateRemoveItem(); // Binding for all items
return false;
});
propagateRemoveItem(); // Binding for static item
});
http://kristiannissen.wordpress.com wrote:
Why isn't this code working? I can add items but only remove the ones
originally added in the source code, not the ones dynamically added.
form
div class=list
div class=item
input type=text value= / a href=
class=removeitemRemove this item/a
/div
div class=item
input type=text value= / a href=
class=removeitemRemove this item/a
/div
a href= class=additemAdd item to list/a
/div
/form
script type=text/javascript
// Add item to list
$('.additem').click(function(){
var template = $($(this).prev().get(0)).clone();
template.insertBefore($(this));
return false;
});
// Remove item from list
$('.removeitem').click(function(){
$(this).prev().parent().remove();
return false;
});
/script
[jQuery] Re: Selector help
Unrelated to your issue, I would consider an effects queue.
Just sayin'
On Thu, 4 Jun 2009 15:17:24 -0230, Dave Maharaj :: WidePixels.com
d...@widepixels.com wrote:
I am cleaning up some html code and originally i had
li
div class=loading id=loading_profile/div
div id=profile
dl class=entry
dtProfile Settings/dt
dd class=skills
?php foreach ($user['Preferences'] as $preference):
echo $preference['name'] . ', ';
endforeach; ?
/dd
/dl
/div
/li
but the DIV inside the LI was too much so I went with adding the
id=profile
to LI but script is no longer working
li id=profile
div class=loading id=loading_profile/div
div dl class=entry
dtProfile Settings/dt
dd class=skills
?php foreach ($user['Preferences'] as $preference):
echo $preference['name'] . ', ';
endforeach; ?
/dd
/dl
/li
SCRIPT:
$(a[class^='edit_']).click(function(){
var url_id = $(this).attr('href');
var x = $(this).attr('id').split('_');
var y = x[0];
var z = x[1];
$(#loading_+z).show(fast, function() {
$(#+z).slideUp( 1000, function(){
$(.edit_+z).hide(0.1, function() {
$(#+z).load( url_id , function(){
$(#+z).slideDown( 1000, function() {
$(#loading_+z).hide(function(){
$(#+z).fadeTo(fast, 1, function() {
$(#+z).fadeIn(slow);
});
});
});
return false;
});
});
});
});
});
Do i eed to edit the selecot as li#?
Dave
[jQuery] Disable input button, using wrong HTML code?
I created a test page here: http://clients.stephenkorecky.com/stephen_korecky/js_test.html But basically the problem is that $(#button).attr(disabled,true); should disable a input button, and it does, HOWEVER it outputs disabled= when it should output disabled=disabled anyone know how to fix this?
[jQuery] Re: Disable input button, using wrong HTML code?
I tried that too, has same results... On May 6, 9:35 am, Jonathan Vanherpe (T T NV) jonat...@tnt.be wrote: stephen wrote: I created a test page here:http://clients.stephenkorecky.com/stephen_korecky/js_test.html But basically the problem is that $(#button).attr(disabled,true); should disable a input button, and it does, HOWEVER it outputs disabled= when it should output disabled=disabled anyone know how to fix this? $(#button).attr(disabled,disabled); -- Jonathan Vanherpe - Tallieu Tallieu NV - jonat...@tnt.be
[jQuery] Re: Disable input button, using wrong HTML code?
Even that still returns disabled= On May 6, 9:41 am, Andy Matthews li...@commadelimited.com wrote: Right. The disabled attribute takes an actual string, not a boolean. You can set even set it to true if you prefer: $(#button).attr(disabled,true); -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Jonathan Vanherpe (T T NV) Sent: Wednesday, May 06, 2009 9:35 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Disable input button, using wrong HTML code? stephen wrote: I created a test page here: http://clients.stephenkorecky.com/stephen_korecky/js_test.html But basically the problem is that $(#button).attr(disabled,true); should disable a input button, and it does, HOWEVER it outputs disabled= when it should output disabled=disabled anyone know how to fix this? $(#button).attr(disabled,disabled); -- Jonathan Vanherpe - Tallieu Tallieu NV - jonat...@tnt.be
[jQuery] Re: Disable input button, using wrong HTML code?
On May 6, 9:46 am, Jonathan Vanherpe (T T NV) jonat...@tnt.be
wrote:
Stephen Korecky wrote:
I tried that too, has same results...
On May 6, 9:35 am, Jonathan Vanherpe (T T NV) jonat...@tnt.be
wrote:
stephen wrote:
I created a test page
here:http://clients.stephenkorecky.com/stephen_korecky/js_test.html
But basically the problem is that $(#button).attr(disabled,true);
should disable a input button, and it does, HOWEVER it outputs
disabled= when it should output disabled=disabled anyone know how
to fix this?
$(#button).attr(disabled,disabled);
--
Jonathan Vanherpe - Tallieu Tallieu NV - jonat...@tnt.be
If you're talking about what you see in Firebug:
this just shows Gecko's internal DOM tree, which isn't necessarily the
same as how the w3c would like it to be. If you change your html to be
input disabled=disabled /, you'll see that firebug will drop
the value too.
Most browsers just ignore the value of disabled and just look at the
existence of the attribute (which you'll have to keep in mind when you
use jquery to reenable the button, you'll need to remove the attribute,
not just set it to false). the 'correct' way is disabled=disabled, though.
Jonathan
--
Jonathan Vanherpe - Tallieu Tallieu NV - jonat...@tnt.be
Ah, that makes more sense then, I know the 'correct' way is
disabled=disabled which is why I was confused as to why this was
even working... Since I was also trying to use CSS to select disabled
elements input=[disabled=disabled]{background:#EEE;} then I looked
at the source with FireBug and Safari's Developers Toolkit with same
results. But thanks for your help!
[jQuery] [Superfish] How to make secondary menu (i.e. the hover menu) horizontal instead of vertical
Hi,
I'm working with Superfish drop down menu which implements JQuery.
Have it installed on Joomla 1.5.7 and am working on making the second-
level menu horizontal. Right now hovering over a menu item with child
items produces a vertical list.. I've tried to manipulate the CSS so
that the li child items have {display:inline; list-style-type:none;}
but it's not working.
Not sure if I'm applying to the right CSS class or if CSS is the
answer.
Any help would be appreciated.
Stephen
[jQuery] Re: HELP: a = $('pfoo/ppbar/p'); a.after('bxyz/b') not adding element
Thanks (late) to everybody for answering.Saw your posts just now. I
overlooked that line in the documentation...RTFM to me! Sorry about
that.
However, do you know if there is another way to achieve the same
result, without inserting the nodes in the DOM first?
By chance, i've found the add() method to push more nodes inside a
jquery object. Is this the right way to do it?
a = $('pfoo/ppbar/p'); a.add('bxyz/b') -- is a equivalent
to $('pfoo/ppbar/pbxyz/b') ?
Stephen
On Feb 27, 3:48 am, mkmanning michaell...@gmail.com wrote:
Sorry for not being clearer; that's what comes from posting at 3 in
the morning :P
I was going on the post's title, attempting to use .after(). As
Ricardo says, append/appendTo, prepend/prependTo work on newly created
nodes, but after/insertAfter, and before/insertBefore require that the
nodes be a part of the DOM.
Check out the docs, specifically the entries for the different
methods, as they will tell you this and save you having to wait for
responses in the forum :)
http://docs.jquery.com/Manipulation
[jQuery] Re: Add option to combo
Hey there, how about using .prepend(), if all you want to do is insert it first? -S On Mon, 2009-03-16 at 08:25 -0700, Chizo wrote: Hi people, how can i add a first option value to a combobox, containing for example Select... With append i can add the new value, but i don´t know how to put it first. Any ideas will be apprecited! Thanks!
[jQuery] Re: [validate] How to disable submit button until form is fully validated
Hey,
How about
$('#form input,select,radio').change(function() { /* check to see if
necessary fields are filled out, if so enable submit */}
You do have some load for each change on a field, but it would keep the
user from being able to submit and validate until you're ready for them
to do so.
It's pretty simple, but everything looked so complicated the ways you
were trying.
-S
On Mon, 2009-03-16 at 12:02 -0700, D.Kreft wrote:
A variant of this question pops up on occasion, but none of the
answers I've seen thus far suit my use case. The solution usually
involves the recommendation to do something like this:
$(...).validate({
...,
submitHandler: function() {
// send AJAX request for calculation
}
});
What I find unsatisfactory about this solution is that the user is
still afforded the opportunity to click on a button that gets him
nowhere. My goal here is to remove that false affordance by starting
off with the submit button disabled and then only enabling it after
all fields are correctly filled-out.
Solutions I've thought of:
1) Polling (ugh), like so:
setInterval(function() {
if ( $('#myForm').valid() ) {
// enable submit button
} else {
// disable submit button
}
}, 500);
But the problem with this is that aside from the undesirable polling,
valid() does more than just validate the form--it validates *and*
flags all the errors on the page, making this approach less than
transparent.
I also tried a similar poll using numberOfInvalids(), but
unfortunately, an empty form returns 0 so long as there are no errors,
which would mean that my button would *always* remain enabled.
var checkForm = function() {
if ( validator.checkForm() ) {
// disable button
} else {
// enable button
}
return true;
};
$('#myForm').keyup(checkForm).change(checkForm).blur
(checkForm);
But while this is a bit better than polling, it still leaves me with
the undesirable side effect of displaying error messages on fields as
soon as the user clicks on 'em.
If checkForm() could be made public and then have it take an optional
boolean to suppress the error messaging, that would be one way to get
this to work...but having a simple callback option for validate()
would be even better:
$('#myForm').validate({
noErrorsHandler: function(validator) {
// yadda, yadda, yadda
}
Suggestions?
-dan
[jQuery] Re: exclude input types
Hey,
You may want to try
$('div#tabs input[type!=hidden]').each(function(){/*whatev*/});
Hope that helps!
On Mon, 2009-03-16 at 08:08 -0700, jjsanders wrote:
Hello,
I want to select all my input from a form within a certain div except
hidden values.
So far I have this
$('div#tabs input').each(function(){
//functionality
});
How can i exclude hidden values?
[jQuery] Re: partial step form validate
Hey,
I'd go with $('#form input,select,radio,textarea') to select all
standard form elements, but the validation depends on how you're doing
validation.
-S
On Mon, 2009-03-16 at 18:18 -0700, led wrote:
Hi need to validate just the form elements in a step. how do i
reference the form elements in a div.
ex: $(#form).validate().element(elements in the div)
thanks in advanve
[jQuery] HELP: a = $('pfoo/ppbar/p'); a.after('bxyz/b') not adding element
Hello, has anybody managed to prepend and append elements to a set of dom elements previously created on the fly with the $(html) function? I've tried with append, prepend, after, before, etc without any luck... Is there a way to do it? Stephen
[jQuery] Clone Line and Increase Number by +1
Hello, I relatively new to Javascript in general, but I've been
attempting to use jQuery for a while, I ran into a snag today and I
hope someone can help, here is what I have so far:
var id = $('#invoice_line_item_rows .item.description textarea').attr
(id)
$(#add_line).click(function() {
$(#invoice_line_item_rows).clone().appendTo
(#invoice_line_items).effect(highlight, {}, 600, function() {
$(id).replaceWith(invoice_lines_attributes_new_ + $(this).val()
+1 + _description);
});
});
I'm trying to clone #invoice_line_item_rows and append to
#invoice_line_items which works just fine, the problem I'm having is
with the id in the text area
#invoice_lines_attributes_new_1_description that's what it looks like.
I'm trying to grab the newly created row textarea and increase the
number by +1, I think I'm close, or I could be completely wrong, and
idea what I could do or change to get this working? Thanks for
anyone's time and help!
[jQuery] Input Element Focus Dancing
Hi,
I have a text input that when it receives the text RESET and a tab,
the form should reset and the focus should go to the first text input
element. But something weird happens, instead the focus goes to the
first element (I have seen this by placing an alert in the right
place) and then ends up on the second text input. I have no idea why,
as the last 'command' is to focus on the first input element. Any
ideas. A bit of code:
$(input#serial_number).focus(function () {
var serial_number = ;
// Captures the tab event
$(input#serial_number).keypress(function(event){
// Captures the tab event and so counts as a save
if(event.which == 0){
// Get the current value
serial_number = $(input#serial_number).val();
// Check to see if the user wants to reset the form
if(serial_number == RESET){
// Reset the form.
$(form# + form_id)[0].reset();
$(input[tabindex=1]).focus();
}
} // end if
});
});
I have also tried doing this using the blur event, but that did not
work either. Also, a reset button is not desirable.
Thanks
Stephen
[jQuery] Problems with show() and submit button
I've been stumped on this one long enough that it's time for someone
to show me the obvious. I have a form where each element is a table
row. Interspersed between the rows with actual elements are rows with
help information for the element above them. When the focus is on an
element, I want to show the help information. When I have it all set
up, however, the submit button no longer works. The submit button
won't work until focus is removed from all input elements. Here's an
example form with just two elements -- user name and email address.
Without any jquery, the form works perfectly fine. Click on a field;
type a value, and click on the Update button and the form is
submitted.
form id='group0' action='#' method='post'
table
tr
tdlabel for='user_name'Name/label/td
tdinput type='text' name='user_name' id='user_name' //td
/tr
tr class='help'
td colspan='3'The full name of the user./td
/tr
tr
tdlabel for='user_email'Emailnbsp;Address/label/td
tdinput type='text' name='user_email' id='user_email' //
td
/tr
tr class='help'
td colspan='2'The email address of the user./td
/tr
tr
td colspan='2'
spanbutton type='submit'Update/button/span
/td
/tr
/table
/form
Now if I add the following jquery, the form doesn't work anymore:
$('input:not(:checkbox), textarea, select').
livequery(focus,function() {
$(this).parents('tr').next().show();
return true;
}).
livequery(blur,function() {
$(this).parents('tr').next().hide();
return true;
});
With jquery, click on a field, and (as expected) the help for that
field is revealed. Type a value in the field, and click on the Update
button and the form is NOT submitted. Instead, the focus just leaves
the input element. Now, with no focus on any input element, click on
the Update button a second time and the form is submitted. Obviously,
I don't want to make my users click on the submit button twice!
Although I'm using livequery (because the form is delivered via ajax),
I've tried static code with plain old jquery and the problem is still
present. Tested on Safari and Firefox.
Suggestions very much appreciated!
TIA, Stephen
[jQuery] livequery matchedFn scope?
Sorry to bother folks with what is probably a silly question, but I
can't quite figure out the scope for livequery matched functions. For
example, if I have the following:
$(#id:not(.inactive)).livequery(function() {alert(this);})
Then the alert shows this to be the matched selector, which is what
I would expect.
But if I have the following:
$(#id).not(.inactive).livequery(function() {alert(this);})
Then the alert shows this to be the entire document.
What's the reason for the difference in behavior?
If anyone can explain this behavior, then it will probably let me
figure out my real problem. In case someone has a lot of spare time,
though, and wants to help with the root problem, here it is. I'm using
ajax to load a lot of dynamically generated content, and I'm doing a
fair bit of livequery processing on that content. The processing
includes collapsing various sections of the content by hiding them.
With a straightforward implementation, the browser briefly displays
the entire (expanded) content before livequery has a chance to
complete it's processing, so users are treated to an annoying peek-a-
boo effect as the full content briefly appears and then collapses
down to something more manageable. My approach for solving this
problem is to deliver the content within a div wrapper with a css
property of display:none. As soon as the content arrives, I add a
livequery handler that calls show() on the div wrapper. Since this
handler goes to the end of the livequery queue, it fires only after
all the other livequery processing is complete. Works like a charm on
test pages where all the IDs are hard-coded. On the real page, though,
the IDs aren't hard-coded, so I have to dynamically figure out which
elements to show. I'm stuck on trying to find a handle to the content
so that I can show it. I would expect this to be the delivered
content in the matched function, but, instead, it's the entire
document.
TIA, Stephen
P.S. This is on Safari if it matters. I've briefly tried Firefox and
it seems to behave the same way, so I haven't done exhaustive testing
other than in Safari.
[jQuery] Problems with show() and submit button
I've been stumped on this one long enough that it's time for someone
to show me the obvious. I have a form where each element is a table
row. Interspersed between the rows with actual elements are rows with
help information for the element above them. When the focus is on an
element, I want to show the help information. When I have it all set
up, however, the submit button no longer works. The submit button
won't work until focus is removed from all input elements. Here's an
example form with just two elements -- user name and email address.
Without any jquery, the form works perfectly fine. Click on a field;
type a value, and click on the Update button and the form is
submitted.
form id='group0' action='#' method='post'
table
tr
tdlabel for='user_name'Name/label/td
tdinput type='text' name='user_name' id='user_name' //td
/tr
tr class='help'
td colspan='3'The full name of the user./td
/tr
tr
tdlabel for='user_email'Emailnbsp;Address/label/td
tdinput type='text' name='user_email' id='user_email' //
td
/tr
tr class='help'
td colspan='2'The email address of the user./td
/tr
tr
td colspan='2'
spanbutton type='submit'Update/button/span
/td
/tr
/table
/form
Now if I add the following jquery, the form doesn't work anymore:
$('input:not(:checkbox), textarea, select').
livequery(focus,function() {
$(this).parents('tr').next().show();
return true;
}).
livequery(blur,function() {
$(this).parents('tr').next().hide();
return true;
});
With jquery, click on a field, and (as expected) the help for that
field is revealed. Type a value in the field, and click on the Update
button and the form is NOT submitted. Instead, the focus just leaves
the input element. Now, with no focus on any input element, click on
the Update button a second time and the form is submitted. Obviously,
I don't want to make my users click on the submit button twice!
Although I'm using livequery (because the form is delivered via ajax),
I've tried static code with plain old jquery and the problem is still
present. Tested on Safari and Firefox.
Suggestions very much appreciated!
TIA, Stephen
[jQuery] Re: Problems with show() and submit button
Figured this out myself, though I'm open to suggestions for a better
workaround. It's actually not the show() that's causing the problem;
it's the hide() that's called on the blur event. Details.
1. User clicks on input field.
2. livequery captures the focus event for that field and reveals the
help information.
3. User enters data for the field.
4. User clicks (mousedown) on the submit button.
5. livequery interprets the mousedown on the submit button as a blur
event on the input field and dutifully hides the help text.
6. When the help text is hidden, content below the help text moves up
to fill in what would otherwise be empty space. Among the content
below the help text is the submit button, so the submit button moves
up as well.
7. When user releases the mouse (mouseup), the pointer is no longer
positioned over the submit button (as the button effectively moved out
from underneath the pointer), so no submit is triggered.
Major bummer. Now I see what so many examples position context-
sensitive help to the side of the input instead of beneath it.
Unfortunately, my help text can sometimes run paragraphs in length
(the form is for medical information), so that's not an option. The
workaround I'm using is a global variable that disables the blur
processing. I capture mousedown events on the submit buttons to turn
on this variable, and mouseup events to release it. There are
definitely some corner cases where this doesn't work, but it seems to
deal with the most common cases reasonably well. If the jquery blur
event set relatedTarget appropriately, I could probably do something
with it, but, alas, that's not an option.
If anyone has a more elegant solution, I'd love to hear it.
Stephen
On Dec 27, 7:40 pm, Stephen sathoma...@gmail.com wrote:
I've been stumped on this one long enough that it's time for someone
to show me the obvious. I have a form where each element is a table
row. Interspersed between the rows with actual elements are rows with
help information for the element above them. When the focus is on an
element, I want to show the help information. When I have it all set
up, however, the submit button no longer works. The submit button
won't work until focus is removed from all input elements. Here's an
example form with just two elements -- user name and email address.
Without any jquery, the form works perfectly fine. Click on a field;
type a value, and click on the Update button and the form is
submitted.
form id='group0' action='#' method='post'
table
tr
tdlabel for='user_name'Name/label/td
tdinput type='text' name='user_name' id='user_name' //td
/tr
tr class='help'
td colspan='3'The full name of the user./td
/tr
tr
tdlabel for='user_email'Emailnbsp;Address/label/td
tdinput type='text' name='user_email' id='user_email' //
td
/tr
tr class='help'
td colspan='2'The email address of the user./td
/tr
tr
td colspan='2'
spanbutton type='submit'Update/button/span
/td
/tr
/table
/form
Now if I add the following jquery, the form doesn't work anymore:
$('input:not(:checkbox), textarea, select').
livequery(focus,function() {
$(this).parents('tr').next().show();
return true;
}).
livequery(blur,function() {
$(this).parents('tr').next().hide();
return true;
});
With jquery, click on a field, and (as expected) the help for that
field is revealed. Type a value in the field, and click on the Update
button and the form is NOT submitted. Instead, the focus just leaves
the input element. Now, with no focus on any input element, click on
the Update button a second time and the form is submitted. Obviously,
I don't want to make my users click on the submit button twice!
Although I'm using livequery (because the form is delivered via ajax),
I've tried static code with plain old jquery and the problem is still
present. Tested on Safari and Firefox.
Suggestions very much appreciated!
TIA, Stephen
[jQuery] Re: [validate] optionally trim input
Thanks a lot for the quick answer. That ups my confidence in choosing the plugin for our internal JSF components. (I was fed up with fighting 3rd party components sets and decided that we create our own. But then of course we need client-side validation integrated in JSF to amend the default server-side validation.)
[jQuery] [validate] optionally trim input
I noticed that in the Isn't that nice and easy? demo where two characters are required for the Name field I can enter two spaces just fine. Is there an option to control that behavior and let the validation trim white spaces before and after the text before validation?
[jQuery] Re: jQuery becomes Unresponsive
Hi,
Actually this did work!! I did the same for the mouseout:
$('div.datarows').mouseout(function(event) {
var $thisRow, $tgt = $(event.target);
if ($tgt.is('div.row')) {
$thisCell = $tgt;
} else if ($tgt.parents('div.row').length) {
$thisCell = $tgt.parents('div.row:first');
}
// now do something with $thisCell
$thisCell.removeClass(row_highlight);
});
and it works like a dream with no errors. Thanks for your help.
Stephen
On Dec 16, 1:33 pm, stephen barto...@gmail.com wrote:
Thanks guys for the pointer. I had never actually heard of event
delegation before. Every day is a school day. So, I read the article
and I was keen to implement it to try and solve my problem. But I
think I have a couple of conceptual leaps I need help with.
For my row highlighting to work, I need two events (mouseover and
mouseout), so I thinking I am still going to need two functions? So I
had a go at the mouseover one (see below), but it did not work. You
guys who have a little more experience of this than me, can you see
what I am doing wrong?
From this:
$(.row).mouseover(function() {
$(this).addClass(row_highlight);
});
To this:
$('div.datarows').mouseover(function(event) {
var $thisRow, $tgt = $(event.target);
if ($tgt.is('div.row')) {
$thisCell = $tgt;
} else if ($tgt.parents('div.row').length) {
$thisCell = $tgt.parents('div.row:first');
}
// now do something with $thisCell
$thisCell.addClass(row_highlight);
});
Thanks in advance,
Stephen
On Dec 16, 12:43 pm, Mike Alsup mal...@gmail.com wrote:
You should have a look at event delegation, currently you are attaching 2
event on each row. So if you have a lot of rows, its memory/cpu heavy.
I agree with Olivier. Here's a resource to get you started:
http://www.learningjquery.com/2008/03/working-with-events-part-1
[jQuery] Re: jQuery becomes Unresponsive
Thanks guys for the pointer. I had never actually heard of event
delegation before. Every day is a school day. So, I read the article
and I was keen to implement it to try and solve my problem. But I
think I have a couple of conceptual leaps I need help with.
For my row highlighting to work, I need two events (mouseover and
mouseout), so I thinking I am still going to need two functions? So I
had a go at the mouseover one (see below), but it did not work. You
guys who have a little more experience of this than me, can you see
what I am doing wrong?
From this:
$(.row).mouseover(function() {
$(this).addClass(row_highlight);
});
To this:
$('div.datarows').mouseover(function(event) {
var $thisRow, $tgt = $(event.target);
if ($tgt.is('div.row')) {
$thisCell = $tgt;
} else if ($tgt.parents('div.row').length) {
$thisCell = $tgt.parents('div.row:first');
}
// now do something with $thisCell
$thisCell.addClass(row_highlight);
});
Thanks in advance,
Stephen
On Dec 16, 12:43 pm, Mike Alsup mal...@gmail.com wrote:
You should have a look at event delegation, currently you are attaching 2
event on each row. So if you have a lot of rows, its memory/cpu heavy.
I agree with Olivier. Here's a resource to get you started:
http://www.learningjquery.com/2008/03/working-with-events-part-1
[jQuery] jQuery becomes Unresponsive
Hi,
I have a table of data made from divs, and the mouse roll-over
highlighting is done using jQuery. But now I have added real data,
the data table (about a thousand rows) is a lot bigger. The problem
is, jQuery becomes unresponsive and Firefox throws the error:
A script on this page may be busy, or it may have stopped responding.
You can stop the script now, open the script in the debugger, or let
the script continue.
Script: /views/js/jquery.js:19
My code for the row highlighting is:
$(document).ready(function(){
// Row highlighting
$(.row).mouseover(function() {
$(this).addClass(row_highlight);
});
// Remove the highlight when the mouse leaves the row.
$(.row).mouseout(function() {
$(this).removeClass(row_highlight);
});
});
Am I doing something wrong? Is there a better way of doing this which
will not cause an error to be thrown?
Thanks,
Stephen
[jQuery] Obama's site jquery mystery
I've gone through voteforchange.com a thousand times over the past two days and I cannot figure out where the content is coming from--I can find the content of index.php, but everything else is a mystery--links never point anywhere. Is this jQuery in action, or is it something else to blame? Any ideas would be greatly appreciated-- I think I've checked over every .js and .css and the single .php I could find--and everything just leads into loops. I'm new at this, it seems. Thanks!
[jQuery] Problem with jCarousel in Safari.
Im using google.load to fire up jquery and it seems that its causing
jCarousel to behave funny in chrome / safari, firstly if the jcarousel
call is before the carousel itself then the next / previous buttons
stay disabled then if you move the call after the carousel then it
lose position and scroll more than it should compared to firefox etc.
im using the simple template as a debug as the page i am using this on
has allot of other function which i thought to be the problem
originally, here is the code i am using.
script language=javascript type=text/javascript src=http://
www.google.com/jsapi
/script
script type=text/javascript
google.load(jquery, 1.2.6);
google.setOnLoadCallback(function()
{
$('#mycarousel').jcarousel({
vertical: true,
scroll: 2
});
});/script
!--
jCarousel library
--
script type=text/javascript src=../lib/jquery.jcarousel.pack.js/
script
Any ideas how to get safari behave for this?
[jQuery] Re: jCarousel problem in Safari 3.1.2: next button disabled
damn this has been driving me crazy all day! and i can only find you with the same problem... after going round in circles i have found that for some reason to enable jCarousel in safari the code needs to be in the page rather than an external file??? I hope someone might be able to shed a little light to why it does this, or a workaround On Oct 3, 5:06 pm, Ben Byrne [EMAIL PROTECTED] wrote: I love jCarousel and have used it with success, but I'm in a situation where it's not behaving as expected in Safari (works fine in Firefox, thankfully). The next button, while being rendered in the DOM, isn't being enabled — both the CSS class and HTML attribute for disabled are remaining present according to Safari's element inspector. Safari's error console reports no javascript errors. You can see it athttp://dev.byrnecreative.com-- click any of the 3 nav items and then any sub-nav item to bring up the carousel. Any insight? Thanks, Ben Byrne
[jQuery] Re: Jcrop v0.9.0 image cropping plugin - comments please
Had play with the online demo, very cool Kelly. Would have quite a few applications, and allow non tech (photoshop) users to edit images on the fly with little to no hassle. Cheers Stephen
[jQuery] animate width or height form auto to fixed size _and back_?
I built a box/panel that collapses to the left, but so that it keeps
visible with a small width.
By default (in expanded state) it should have width: auto.
Collapsing is easy:
boxHeader.animate({width : '19px'}, 'fast');
However: Is there an easy way to expand it back?
It would be very nice if this would work, but it doesn't:
boxHeader.animate({width : 'auto'}, 'fast');
What I have come up with so far seems clumsy and lengthy, which is not
really my impression of jQuery in general:
// Seems jquery cannot animate width/height with target auto.
var smallWidth = boxHeader.css('width'); // So first remember the
current (collapsed) width
boxHeader.css('width', 'auto'); // then temporarily set to auto
var newWidth = boxHeader.width(); // to calculate the desired width
boxHeader.css('width', smallWidth); // then set the collapsed width
again
boxHeader.animate({width : newWidth + px}, 'fast', // and animate to
the fixed expanded width
function() {boxHeader.css('width',
'auto');} // but set to auto again when animation is complete
);
Is there a better way?
[jQuery] animate width or height form auto to fixed size _and back_?
I built a box/panel that collapses to the left, but so that the header
keeps visible with a small width.
By default (in expanded state) it should have width: auto.
Collapsing is easy:
boxHeader.animate({width : '19px'}, 'fast');
However: Is there an easy way to expand it back?
It would be very nice if this would work, but it doesn't:
boxHeader.animate({width : 'auto'}, 'fast');
What I have come up with so far seems clumsy and lengthy, which is not
really my impression of jQuery in general:
// Seems jquery cannot animate width/height with target auto.
var smallWidth = boxHeader.css('width'); // So first remember the
current (collapsed) width
boxHeader.css('width', 'auto'); // then temporarily set to auto
var newWidth = boxHeader.width(); // to calculate the desired width
boxHeader.css('width', smallWidth); // then set the collapsed width
again
boxHeader.animate({width : newWidth + px}, 'fast', // and animate to
the fixed expanded width
function() {boxHeader.css('width',
'auto');} // but set to auto again when animation is complete
);
Is there a better way?
[jQuery] Solved Re: Need help: Access to restricted URI denied error, but code should be on same host
Hi, I got this working after examining my code more closely. I committed multiple errors on both the client and server-side that needed to be fixed. Sorry for the bother. -Stephen
[jQuery] Re: Need help: Access to restricted URI denied error, but code should be on same host
I solved my problem. My server side PHP program used echo when return should have been used. Sorry for the bother. On Jul 19, 11:03 am, Stephen [EMAIL PROTECTED] wrote: Dear Jquery list, I've read about this Access to restricted URI denied error before, but I do not understand why it is happening to me. I have a PHP file sitting onhttp://vgmworld.com/specialorder/specialorder.php that makes an AJAX post call to a file also sitting on the same host athttp://vgmworld.com/specialorder/orderhash.php. Orderhash is supposed to return data to me so I can fill out the form properly. The AJAX call is made when the price field is changed, but when this happens, Firefox 3's error console reports. Error: [Exception... Access to restricted URI denied code: 1012 nsresult: 0x805303f4 (NS_ERROR_DOM_BAD_URI) location: http://www.vgmworld.com/js/jquery-1.2.6.jsLine: 11] Source File:http://www.vgmworld.com/js/jquery-1.2.6.js Line: 11 But the Jquery file is on the same host (or at least I think it is). Why does the browser think the Jquery file is somewhere else? (Maybe I shouldn't be doing a POST call and need to do something else?) Thanks for reading. Sincerely, Stephen
[jQuery] Need help: Access to restricted URI denied error, but code should be on same host
Dear Jquery list, I've read about this Access to restricted URI denied error before, but I do not understand why it is happening to me. I have a PHP file sitting on http://vgmworld.com/specialorder/specialorder.php that makes an AJAX post call to a file also sitting on the same host at http://vgmworld.com/specialorder/orderhash.php. Orderhash is supposed to return data to me so I can fill out the form properly. The AJAX call is made when the price field is changed, but when this happens, Firefox 3's error console reports. Error: [Exception... Access to restricted URI denied code: 1012 nsresult: 0x805303f4 (NS_ERROR_DOM_BAD_URI) location: http:// www.vgmworld.com/js/jquery-1.2.6.js Line: 11] Source File: http://www.vgmworld.com/js/jquery-1.2.6.js Line: 11 But the Jquery file is on the same host (or at least I think it is). Why does the browser think the Jquery file is somewhere else? (Maybe I shouldn't be doing a POST call and need to do something else?) Thanks for reading. Sincerely, Stephen
[jQuery] Button Updating Help
This is my code:
$(document).ready(function() {
$('.add_letter_code_object').click(function(event) {
$('#objects').append('html code')
});
});
What im trying to do is when you click the + button it appends a new
object which also has a + button to add more, the problem I'm having
is when you try to use the + button on the NEWLY created object it
doesn't work, is there a way for updating a function upon appending
new objects ( or code )? Thanks for any suggestions and help
[jQuery] Re: jQuery code comments - Is that Javadoc or something else?
Ariel, Thank you for confirming this. Since there isn't any formal commenting process for jQuery code, I will use the scriptDoc spec, which suits my needs. --Stephen On Mar 26, 9:47 am, Ariel Flesler [EMAIL PROTECTED] wrote: The core of jQuery doesn't have formal comments, and I don't think there's any standarized documentation among jQuery devs. I always add some *formal* comments in the header of the source version of my plugins. I stick to scriptDochttp://scriptdoc.org/. It's an adaptation of javadoc and it's supported by some IDEs. I think I used it for Aptana, back then when I used that app. I don't use tags that are not specified, instead I just use words like: Date: 03/02/08, Notes:, etc. Hope that helped -- Ariel Fleslerhttp://flesler.blogspot.com On Mar 26, 9:53 am, alexanmtz [EMAIL PROTECTED] wrote: Good point stephen, I note this too... Im develop a plugin and use javadoc and I create some fields that dont fit in documentation, but was necessary to describe it... I think that the jQuery developers can answer this... On Mar 25, 5:34 pm, Stephen [EMAIL PROTECTED] wrote: Hi, In many jQuery plug-ins and JS code using jQuery, I find comments at the top of the source code like this: /** * SomeFunction - Some comments. * @requires jQuery v1.2 or above * @example * */ This looks like Javadocs to me, but there are certain fields that don't seem to be in the Javadoc documentation:http://java.sun.com/j2se/javadoc/writingdoccomments/index.html#tag Fields like @example and @option are not in the Javadoc specifications, however. Is there a URL that discusses how to write jQuery comments like these plug-in authors are doing? I attempted to find something on jquery.com, but I have not found anything or have been searching the wrong way. Thank you for reading this. --Stephen- Hide quoted text - - Show quoted text -
[jQuery] jQuery code comments - Is that Javadoc or something else?
Hi, In many jQuery plug-ins and JS code using jQuery, I find comments at the top of the source code like this: /** * SomeFunction - Some comments. * @requires jQuery v1.2 or above * @example * */ This looks like Javadocs to me, but there are certain fields that don't seem to be in the Javadoc documentation: http://java.sun.com/j2se/javadoc/writingdoccomments/index.html#tag Fields like @example and @option are not in the Javadoc specifications, however. Is there a URL that discusses how to write jQuery comments like these plug-in authors are doing? I attempted to find something on jquery.com, but I have not found anything or have been searching the wrong way. Thank you for reading this. --Stephen
[jQuery] Re: what editor do you use?
Have been using the HTML-Kit Tools (the purchased version) of http://www.htmlkit.com/ since its release (years) and have found it great. Good for syntax highlighting, great plugins, and the purchased version has an easy to use Project Interface to keep local and live files organised.
[jQuery] Re: lightbox newsletter signup
Hi there See examples on http://jquery.com/demo/thickbox/, there is an example with a login field, or any of the iframe ones which should do the trick for you. Cheers On Feb 4, 7:33 am, visitorQ [EMAIL PROTECTED] wrote: hey guys! i'm trying to figure out how to develop this solution using a couple of jquery plugins. i have a text link on a site i'm working on that says 'Tell a Friend'. the idea is to have a user click it, then a lightbox will come up with a small form with a couple of text fields. then the user can click submit, and a nice little confirmation or declination will appear in the lightbox. if the form data is confirmed as correct and everything was sent correctly, then after a few seconds the lightbox will dim out and the user can continue browsing the site. i think this is two plugins in one, but i'm not sure =). anyone have any ideas for this? has it been done before? is there an easy solution? advice? etc.. i'd really appreciate it guys! thanks!
[jQuery] Re: Superfish without hoverIntent
Hi Alex Have you tried just having the script for Hover Intent below superfish in your source code. That way superfish wont have access to hoverintent due to it not being loaded prior to superfish being read by the browser. Cheers Stephen
[jQuery] Re: IIS permission problem Re: Can $(document).ready() be put into a separate JS file?
Thanks to everyone who replied to this thread in helping me debug the
problem.
--Stephen
On Nov 28, 4:54 am, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
hehe, permissions would have been my second choice.
My coding mantra: If in doubt, check permissions!
On Nov 28, 4:10 am, Stephen [EMAIL PROTECTED] wrote:
Hello,
It looks like I had a very peculiar IIS permission problem just for
jquery.js. Very weird. I fixed the permissions on that file and the
file could be accessed again.
--Stephen
On Nov 27, 12:00 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
My gut feeling is that this is a caching issue on the browser that is
failing.
Try clearing the cache.
On Nov 27, 3:36 pm, Stephen [EMAIL PROTECTED] wrote:
Ok, I have to examine the specifics of my computer set up. I tried
the following code on two different machines with similar setups
(Windows XP, IE6, Firefox 2.0.0.9 vs. 2.0.0.6, jquery 1.2.1 unpacked).
--START Test HTML file-
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
html
head
titleTest/title
script type=text/javascript src=jquery.js/script
script type=text/javascript src=test.js/script
/head
body
/body
/html
-END
--START test.js ---
$(document).ready( function() {});
--- END --
On the first machine, it gave me the $ is not defined message. On
the second machine, it works. Based on Suni's remarks, I will look at
the first machine more closely.
I appreciate everyone throwing out ideas for me to examine.
--Stephen
On Nov 27, 3:04 am, Suni [EMAIL PROTECTED] wrote:
There has to be some other problem. Are you absolutely sure that
jquery.js gets loaded? Any chance the link pointing to jquery.js is
wrong?
I always use $(document).ready in other files and there haven't been
any problems with it.
Please post full HTML and JS of a simplified example if the problem
persists.
--
Suni
[jQuery] Re: Can $(document).ready() be put into a separate JS file?
Ok, I have to examine the specifics of my computer set up. I tried
the following code on two different machines with similar setups
(Windows XP, IE6, Firefox 2.0.0.9 vs. 2.0.0.6, jquery 1.2.1 unpacked).
--START Test HTML file-
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
html
head
titleTest/title
script type=text/javascript src=jquery.js/script
script type=text/javascript src=test.js/script
/head
body
/body
/html
-END
--START test.js ---
$(document).ready( function() {});
--- END --
On the first machine, it gave me the $ is not defined message. On
the second machine, it works. Based on Suni's remarks, I will look at
the first machine more closely.
I appreciate everyone throwing out ideas for me to examine.
--Stephen
On Nov 27, 3:04 am, Suni [EMAIL PROTECTED] wrote:
There has to be some other problem. Are you absolutely sure that
jquery.js gets loaded? Any chance the link pointing to jquery.js is
wrong?
I always use $(document).ready in other files and there haven't been
any problems with it.
Please post full HTML and JS of a simplified example if the problem
persists.
--
Suni
[jQuery] Re: Can $(document).ready() be put into a separate JS file?
Clearing the cache does not work.
I was running firebug, so I checked out the HTML tab of Firebug. When
I expanded the section called
script type=text/javascript src=js/jquery.js/script
It said Error: Access is Denied.
When I expanded the section called
script type=text/javascript src=js/test.js/script
it would show me what was in the file.
Why would be causing an access is denied error?
--Stephen
On Nov 27, 12:00 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
My gut feeling is that this is a caching issue on the browser that is
failing.
Try clearing the cache.
On Nov 27, 3:36 pm, Stephen [EMAIL PROTECTED] wrote:
Ok, I have to examine the specifics of my computer set up. I tried
the following code on two different machines with similar setups
(Windows XP, IE6, Firefox 2.0.0.9 vs. 2.0.0.6, jquery 1.2.1 unpacked).
--START Test HTML file-
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
html
head
titleTest/title
script type=text/javascript src=jquery.js/script
script type=text/javascript src=test.js/script
/head
body
/body
/html
-END
--START test.js ---
$(document).ready( function() {});
--- END --
On the first machine, it gave me the $ is not defined message. On
the second machine, it works. Based on Suni's remarks, I will look at
the first machine more closely.
I appreciate everyone throwing out ideas for me to examine.
--Stephen
On Nov 27, 3:04 am, Suni [EMAIL PROTECTED] wrote:
There has to be some other problem. Are you absolutely sure that
jquery.js gets loaded? Any chance the link pointing to jquery.js is
wrong?
I always use $(document).ready in other files and there haven't been
any problems with it.
Please post full HTML and JS of a simplified example if the problem
persists.
--
Suni
[jQuery] Can $(document).ready() be put into a separate JS file?
Hi,
I have read a few tutorial docs, and they all state that $
(document).ready() be placed in a script tag on the current
document, like so:
head
titleTest/title
script type=text/javascript src=js/jquery.js/script
script type=text/javascript
$(document).ready(function() {
// Add some code here
} );
/script
/head
When I try to move $(document).ready() to nav.js, I keep getting a
browser error message that says $ is not defined.
head
titleTest/title
script type=text/javascript src=js/jquery.js/script
script type=text/javascript src=js/nav.js /script
/head
Is there a way to load up the ready() function in a separate file? I
am using Jquery 1.2.1.
Thanks,
Stephen
[jQuery] Re: Can $(document).ready() be put into a separate JS file?
Hi,
I'm using Firefox 2.0.0.9. IE 6 exhibits the same problem also. I'm
totally stumped.
--Stephen
On Nov 26, 5:08 am, Polskaya [EMAIL PROTECTED] wrote:
I don't know why you have this error. This works fine for me:
In the header of my index-page:
script type=text/javascript src=jscript.js/script
in the jscript.js:
$(document).ready(function(){
//--jquery code goes here
});
On Nov 26, 5:22 am, Stephen [EMAIL PROTECTED] wrote:
Hi,
I have read a few tutorial docs, and they all state that $
(document).ready() be placed in a script tag on the current
document, like so:
head
titleTest/title
script type=text/javascript src=js/jquery.js/script
script type=text/javascript
$(document).ready(function() {
// Add some code here
} );
/script
/head
When I try to move $(document).ready() to nav.js, I keep getting a
browser error message that says $ is not defined.
head
titleTest/title
script type=text/javascript src=js/jquery.js/script
script type=text/javascript src=js/nav.js /script
/head
Is there a way to load up the ready() function in a separate file? I
am using Jquery 1.2.1.
Thanks,
Stephen
[jQuery] Re: Can $(document).ready() be put into a separate JS file?
Hi,
I am doing what you suggest:
I have my code like this, but I get $ is undefined
head
titleTest/title
script type=text/javascript src=js/jquery.js/script
script type=text/javascript src=js/nav.js /script
/head
It seems jquery.js isn't loaded before nav.js, but this is declared in
the head section, so I am puzzled why this is happening.
On Nov 26, 11:39 am, tlphipps [EMAIL PROTECTED] wrote:
You need to make sure that jquery.js is included BEFORE your
external .js file that attempts to use jquery code.
On Nov 26, 7:55 am, Stephen [EMAIL PROTECTED] wrote:
Hi,
I'm using Firefox 2.0.0.9. IE 6 exhibits the same problem also. I'm
totally stumped.
--Stephen
On Nov 26, 5:08 am, Polskaya [EMAIL PROTECTED] wrote:
I don't know why you have this error. This works fine for me:
In the header of my index-page:
script type=text/javascript src=jscript.js/script
in the jscript.js:
$(document).ready(function(){
//--jquery code goes here
});
On Nov 26, 5:22 am, Stephen [EMAIL PROTECTED] wrote:
Hi,
I have read a few tutorial docs, and they all state that $
(document).ready() be placed in a script tag on the current
document, like so:
head
titleTest/title
script type=text/javascript src=js/jquery.js/script
script type=text/javascript
$(document).ready(function() {
// Add some code here
} );
/script
/head
When I try to move $(document).ready() to nav.js, I keep getting a
browser error message that says $ is not defined.
head
titleTest/title
script type=text/javascript src=js/jquery.js/script
script type=text/javascript src=js/nav.js /script
/head
Is there a way to load up the ready() function in a separate file? I
am using Jquery 1.2.1.
Thanks,
Stephen
[jQuery] Re: prototype.js and jquery.js conflict problems? (Lightbox and Thickbox) simple?
Hey Sam, I'm not sure if you figured this out yet but here it goes. You cannot just paste the code example found on the jQuery site. You need to make a couple of adjustments so it is customized to your needs. As the documentation says, the $ character serves as a shortcut for jQuery. By using the noConflict() function, any regular jQuery calls you were making before now need to reference jQuery instead of the $ character. $(div#myDiv).fadeIn(slow); becomes jQuery(div#myDiv).fadeIn(slow); The snippet from jQuery uses someid as an example. If you pasted this code without making changes, it's looking for that someid reference, which I doubt you have used. I hope that helps. Stephen
