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
> >
>
