I think the problem with Jonathon's solution is that the added html
can't have a click event bound to it? I'm not sure. I've tried
stripping that code down, so that the bind click is just alerting, but
that won't work.
Any thoughts?
.after( $('<img src="images/buttons/button_minus.gif" alt="-"
class="decrement" />')
.bind('click', false, doPlusMinus)
On 8/21/07, Erik Beeson <[EMAIL PROTECTED]> wrote:
> hmm, seems like your original version should have that problem too. Maybe
> the increment and decrement operators take care of the conversion. At any
> rate, should be:
>
> $qty_field.val(parseInt($qty_field.val())-1);
>
> And:
>
> $qty_field.val(parseInt($qty_field.val())+1);
>
>
> --Erik
>
> On 8/21/07, Dan Eastwell < [EMAIL PROTECTED]> wrote:
> >
> > Oh, one more thing,
> >
> > $qty_field.val($qty_field.val()-1);
> >
> > Is concatenating as a string, not adding! Just a small point, and
> > nothing compared to the errors I'd make in coding without any
> > testing!!
> >
> > Cheers,
> >
> > Dan.
> >
> > On 8/21/07, Dan Eastwell < [EMAIL PROTECTED]> wrote:
> > > No, not at all, many thanks to both - I still don't think it's beaten,
> > > but I'll have another look with what you and Jonathon's examples have
> > > given me (by example) in my understanding of chaining jquery.
> > >
> > > Jonathon's is very elegant, but needs some debugging to get it to work
> > > - I think I need to work through yours though, to cut the timing down,
> > > as it's still taking a while.
> > >
> > > If you have any further thoughts, though let me know...
> > >
> > > Thanks,
> > >
> > > Dan.
> > >
> > > On 8/21/07, Erik Beeson <[EMAIL PROTECTED]> wrote:
> > > > heh, I took so long writing my reply, a bunch of other people replied
> in the
> > > > mean time. Anyways, I suggest you use firebug
> (console.time/console.timeEnd)
> > > > to see how long each version takes.
> > > >
> > > > --Erik
> > > >
> > > >
> > > >
> > > > On 8/21/07, Erik Beeson <[EMAIL PROTECTED]> wrote:
> > > > > You do a lot of repetitive selecting. Something like this might help
> > > > (untested):
> > > > >
> > > > > $('td
> > > >
> [EMAIL PROTECTED]').filter('[EMAIL PROTECTED],[EMAIL PROTECTED]')
> > > > > .after('<img
> src="images/buttons/button_minus.gif"
> > > > alt="-" /><img src="images/buttons/button_plus.gif"
> alt="+"
> > > > />')
> > > > > .next().bind("click", function() {
> > > > > var $qty_field =
> > > > $(this).siblings('[EMAIL PROTECTED]');
> > > > >
> > > > > if ($qty_field.val() > 0 ) {
> > > > > $qty_field.val($qty_field.val()-1);
> > > > > }
> > > > > })
> > > > > .next().bind("click", function() {
> > > > > var $qty_field =
> > > > $(this).siblings('[EMAIL PROTECTED]');
> > > > >
> > > > > $qty_field.val($qty_field.val()+1);
> > > > > });
> > > > > $("table.summarytable tr:even").addClass("odd");
> > > > >
> > > > > I removed the increment/decrement classes from the images to make
> the code
> > > > more readable and because I'm not using them for selection anymore. If
> you
> > > > need them there for styling or something, just add them back.
> > > > >
> > > > > Also, here's another version that may or may not be faster:
> > > > >
> > > > > $('td
> > > >
> [EMAIL PROTECTED]').filter('[EMAIL PROTECTED],[EMAIL PROTECTED]')
> > > > > .after('<img
> src="images/buttons/button_minus.gif"
> > > > alt="-" /><img src="images/buttons/button_plus.gif"
> alt="+"
> > > > />')
> > > > > .each(function() {
> > > > > var $qty_field = $(this);
> > > > > $qty_field.siblings('img').bind('click',
> function()
> > > > {
> > > > > if(this.alt == '+') {
> > > > > $qty_field.val($qty_field.val()+1);
> > > > > } else if(this.alt == '-') {
> > > > > if ($qty_field.val() > 0 ) {
> > > > >
> $qty_field.val($qty_field.val()-1);
> > > > > }
> > > > > }
> > > > > });
> > > > > });
> > > > >
> > > > > $("table.summarytable tr:even").addClass("odd");
> > > > > Good luck with it.
> > > > >
> > > > > --Erik
> > > > >
> > > > >
> > > > > On 8/21/07, Dan Eastwell < [EMAIL PROTECTED]> wrote:
> > > > > >
> > > > >
> > > > > > Hi,
> > > > > >
> > > > > > I'm doing an order form for a bookstore. The order form has over
> 500
> > > > > > items in it, so jquery runs slowly.
> > > > > >
> > > > > > There is no way I can change the number of items, it's a given and
> a
> > > > > > piece of business 'logic'.
> > > > > >
> > > > > > The jquery I have comprises four simple functions to add
> > > > > > increment/decrement buttons to the order form to increase
> quantities,
> > > > > > and a jquery addClass call to add pajama/zebra stripes to the
> table.
> > > > > > There are two quantity fields (again for business reasons), so
> that's
> > > > > > over a 1000 items.
> > > > > >
> > > > > >
> > > >
> http://test2.danieleastwell.co.uk/test2/master_order_test.html
> > > > > >
> > > > > > The problem is it causes a 'script hanging' error IE7 on, I'm
> > > > > > guessing, slower machines (not mine), and takes ~10secs in
> Firefox2
> > > > > > (with firebug/validation tools) to load.
> > > > > >
> > > > > > Is there any way I can optimize this to load any more quickly, or
> do I
> > > > > > need to give up on scripting to add the items and their
> functionality?
> > > > > >
> > > > > > Many thanks,
> > > > > >
> > > > > > Dan.
> > > > > >
> > > > > > $(document).ready(function() {
> > > > > >
> > > > > > addPlusMinus("td
> > > > [EMAIL PROTECTED]@type=text]");
> > > > > > addPlusMinus("td
> > > > [EMAIL PROTECTED]@type=text]");
> > > > > > increment("#order_form img.increment");
> > > > > > decrement("#order_form img.decrement");
> > > > > > $("table.summarytable tr:even").addClass("odd");
> > > > > >
> > > > > > });
> > > > > >
> > > > > > function addPlusMinus(input_text){
> > > > > > $(input_text).each( function(){
> > > > > > $(this).after("<img
> > > > src='images/buttons/button_minus.gif' alt='-'
> > > > > > class=\"decrement\" /><img
> > > > src='images/buttons/button_plus.gif'
> > > > > > alt='+' class=\"increment\" />");
> > > > > > });
> > > > > > }
> > > > > >
> > > > > > function increment(image_button) {
> > > > > > $(image_button).bind("click", function() {
> > > > > > qty_field =
> > > > $(this).parent("td").find("[EMAIL PROTECTED]");
> > > > > > var numValue = $(qty_field).val();
> > > > > > numValue++;
> > > > > > $(qty_field).val(numValue);
> > > > > > });
> > > > > > }
> > > > > > function decrement(image_button) {
> > > > > > $(image_button).bind("click", function() {
> > > > > > qty_field =
> > > > $(this).parent("td").find("[EMAIL PROTECTED]");
> > > > > > var numValue = $(qty_field).val();
> > > > > > if (numValue > 0 ) {
> > > > > > numValue--;
> > > > > > }
> > > > > > $(qty_field).val(numValue);
> > > > > > });
> > > > > > }
> > > > > >
> > > > > >
> > > > > >
> > > > > >
> > > > > >
> > > > > > --
> > > > > > Daniel Eastwell
> > > > > >
> > > > > > Portfolio and articles:
> > > > > > http://www.thoughtballoon.co.uk
> > > > > >
> > > > > > Blog:
> > > > > > http://www.thoughtballoon.co.uk/blog
> > > > > >
> > > > >
> > > >
> > > >
> > >
> > >
> > > --
> > > Daniel Eastwell
> > >
> > > Portfolio and articles:
> > > http://www.thoughtballoon.co.uk
> > >
> > > Blog:
> > > http://www.thoughtballoon.co.uk/blog
> > >
> >
> >
> > --
> > Daniel Eastwell
> >
> > Portfolio and articles:
> > http://www.thoughtballoon.co.uk
> >
> > Blog:
> > http://www.thoughtballoon.co.uk/blog
> >
>
>
--
Daniel Eastwell
Portfolio and articles:
http://www.thoughtballoon.co.uk
Blog:
http://www.thoughtballoon.co.uk/blog
