[jQuery] append and *slowly* show new content in DOM
Hi,
I'm guessing this is an easy question, but I can't figure it out.
I want to add some new content to the DOM, so I have a line like this.
$('#div_container').append('hi there!');
However, I'd like it to slowly appear via show().
But adding show() doesn't work as I'd expect. The new content appears
instantly.
$('#div_container').append('hi there!').show('slow');
Thanks for reading,
Eric P
[jQuery] Re: Best practice for replacing inline HTML function calls w/several arguments with an event handler
James wrote:
I think a good way is to put the data into a separate JSON object and
give them a unique ID (eg. item01, item02...), and assign that ID
somewhere on the links to be clicked.
var productList = {
'item01':{name:123-ABC, color:'red', price:9.99},
'item02':{name:123-ABC, color:'blue', price:10.99},
'item03':{name:456-DEF, color:'green', price:29.99}
}
$(".buy").click(function() {
var id = $(this).attr("id");
var product = productList[id];
alert(product.name + ' ' + product.color + ' ' + product.price);
});
Buy Me!
Buy Me!
Buy Me!
On Feb 13, 10:35 am, Eric P wrote:
Hi,
I'm fairly new to jQuery (been using a few months now). Binding event handlers
to HTML objects via jQuery is awesome,
but I find myself struggling to find a solid (I.e., best practice) method for
getting numerous arguments to the event
handler that are pertinent to the object that triggered the event.
For example, old method:
function buy(item, color, price) { ... }
...
Buy
Me!
Buy
Me!
Buy
Me!
jQuery method:
$(function() {
$('.buy').click(function() { ... }
)};
...
Buy Me!
Buy Me!
Buy Me!
So in the jQuery method, what is the best way to make the multiple arguments
(that were previously in the inline HTML/JS
function call) available to the event handling function?
I've been limping along using various methods to get arguments to the event
handling function (E.g., like sticking
values in an object's id field, etc.), but I'm at a loss when it comes to a solid way to
"pass" numerous arguments to
the event handling function.
Thanks for reading,
Eric P.
James,
Your solution is elegant and robust. It fit the bill perfectly for what I was doing. I was about to use jQuery's data()
method to attach values to HTML objects, but your solution is much easier to digest.
Thanks for the great insight!
RobG,
Good point. It's always good to work w/the mindset that not all will have JavaScript turned on. Fortunately, the
functionality I'm building is for an administrative area for customers that must have JavaScript support to even log in.
donb,
Don't worry. The code example I gave was merely an example to simplify the
problem. No $0.01 items for you! ;)
Eric
[jQuery] Best practice for replacing inline HTML function calls w/several arguments with an event handler
Hi,
I'm fairly new to jQuery (been using a few months now). Binding event handlers to HTML objects via jQuery is awesome,
but I find myself struggling to find a solid (I.e., best practice) method for getting numerous arguments to the event
handler that are pertinent to the object that triggered the event.
For example, old method:
function buy(item, color, price) { ... }
...
Buy
Me!
Buy
Me!
Buy
Me!
jQuery method:
$(function() {
$('.buy').click(function() { ... }
)};
...
Buy Me!
Buy Me!
Buy Me!
So in the jQuery method, what is the best way to make the multiple arguments (that were previously in the inline HTML/JS
function call) available to the event handling function?
I've been limping along using various methods to get arguments to the event handling function (E.g., like sticking
values in an object's id field, etc.), but I'm at a loss when it comes to a solid way to "pass" numerous arguments to
the event handling function.
Thanks for reading,
Eric P.
[jQuery] Form field validation call out (mini pop-up) plugin?
Hi, I've been digging around the net for a jQuery plugin that does a form validation "call out". This would be a little info pop-up near a form field notifying the user why their entry didn't validate. This demo shows pretty much what I'm looking for. Type in a non-integer phone number to see the call out. http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ValidatorCallout/ValidatorCallout.aspx Most of the form validation notifications I found involve inline highlighting (which is nice), but doesn't always give much room for additional info to the user (E.g., showing an example of good input, etc.) Thanks for reading, Eric
[jQuery] Re: [tooltip] Problem in IE 6 with multiple tooltips of different 'extra' classes
Done. http://dev.jquery.com/ticket/3689 Thanks, Eric Jörn Zaefferer wrote: > The code looks fine. Could you file a ticket for this? > http://dev.jquery.com/newticket (requires registration) > > Thanks > Jörn > > On Fri, Dec 5, 2008 at 2:46 AM, Eric P <[EMAIL PROTECTED]> wrote: >> Hi, >> >> Just started messing around with Jörn's tooltip plugin, and I think I found >> a bug while using IE 6 (not a problem in IE >> 7 and FF 3). >> >> Here's some reference code. >> http://epierce.freeshell.org/jquery-tooltip-bug/index.html >> >> In the example I'm assigning three different tooltips each with their own >> unique extraClass to three different blocks. >> >> In IE 6 only the first tooltip works (tooltip has a blue background). >> The other two don't use their respective >> extraClasses (different background colors, etc.). >> >> As I'm new to this plugin, I wouldn't be surprised if I've borked the >> syntax, but since it works in IE 7 and FF I'm not >> so sure. >> >> Thanks for any ideas. >> Eric >>
[jQuery] [tooltip] Problem in IE 6 with multiple tooltips of different 'extra' classes
Hi, Just started messing around with Jörn's tooltip plugin, and I think I found a bug while using IE 6 (not a problem in IE 7 and FF 3). Here's some reference code. http://epierce.freeshell.org/jquery-tooltip-bug/index.html In the example I'm assigning three different tooltips each with their own unique extraClass to three different blocks. In IE 6 only the first tooltip works (tooltip has a blue background). The other two don't use their respective extraClasses (different background colors, etc.). As I'm new to this plugin, I wouldn't be surprised if I've borked the syntax, but since it works in IE 7 and FF I'm not so sure. Thanks for any ideas. Eric
[jQuery] Re: mixing jQuery with regular JavaScript
On Fri, Oct 24, 2008 at 9:54 PM, Ryura <[EMAIL PROTECTED]> wrote:
>
> Alternatively,
>
>
> $(function(){
>window.test = function(){ console.log('hi')}
> });
>
>
>
Thanks, Mike and Ryura. That's what I needed to hear.
For some odd reason I had it pounded in my head that everything jQuery
needed to defined within the jQuery document instance.
Thanks,
Eric P.
[jQuery] mixing jQuery with regular JavaScript
Hi,
I'm trying to mix jQuery with some pre-existing JavaScript/HTML, but
I'm having what appears to be scope issues.
The code I'm working on already has a bunch of inline event handler
function calls in the HTML tags, and it'd be a ton of work to change
them all to the unobtrusive way via jQuery. Now when I wrap all the
pre-existing function definitions into the jQuery document instance
(i.e., $(function(){ ... }), I'm able to slip in some jQuery.
However, all the function definitions are now no longer available to
the inline event handler calls.
Here's a simple demonstration. In this example the test() function is
not available when the div.
$(function(){
function test(){ console.log('hi')}
});
hi
Any ideas? I'm assuming many others have run into this predicament.
Thanks for reading,
Eric P.
[jQuery] Re: mixing jQuery with regular JavaScript
On Fri, Oct 24, 2008 at 2:25 PM, Eric P <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I'm trying to mix jQuery with some pre-existing JavaScript/HTML, but
> I'm having what appears to be scope issues.
>
> The code I'm working on already has a bunch of inline event handler
> function calls in the HTML tags, and it'd be a ton of work to change
> them all to the unobtrusive way via jQuery. Now when I wrap all the
> pre-existing function definitions into the jQuery document instance
> (i.e., $(function(){ ... }), I'm able to slip in some jQuery.
> However, all the function definitions are now no longer available to
> the inline event handler calls.
>
> Here's a simple demonstration. In this example the test() function is
> not available when the div.
>
>
> $(function(){
>function test(){ console.log('hi')}
> });
>
>
> hi
>
Opps... small typo.
"In this example the test() function is not available when the div"
...is clicked.
[jQuery] Re: best practices for scripts dir structure, etc.
> using versions is very handy when you want to incorporate the latest > version on a new page in your project, but don't want to go back and > regression test all the other pages in the application > > i've got structure like: > - /jquery/ > -/1.1.8/ > - jquery.js > - jquery.pack.js > ..etc etc.. > -/1.2.6/ > - jquery.js > - jquery.pack.js > > Huge improvement over what I had. Thanks a lot! Eric
[jQuery] best practices for scripts dir structure, etc.
Hi, Are there any good practices for how to keep the jQuery scripts (core, ui, plugins, etc.) organized? I currently have something like this. /jquery/jquery-1.2.6.js /jquery/ui/1.5.2/effects.*.js /jquery/ui/1.5.2/ui.*.jg /jquery/plugins/jquery.simple.tree.js I don't know what exactly makes sense and don't like what I've got so far since I'm using version numbers inconsistently, both in filenames and dir names, or not at all. Any tips would be great. Thanks! Eric P.
