Calling a javascript function multiple times

Question

I have a couple of those:

        <div class="enunt">text here</div>
        <div class="ans"><input type="text" id="amount1" style="border: 0; color: #f6931f; font-weight: bold;" /></div>
        <div id="slider1" class="slide"></div>

The others have the same structure, but the ids differ by their index number. And I need a function to set up the JQuery sliders. What I did is this:

            function slider(i) {
                $( '#slider' + i ).slider({
                    value:4,
                    min: 1,
                    max: 7,
                    step: 1,
                    slide: function( event, ui, i ) {
                        $( '#amount' + i ).val( ui.value );
                    }
                });
                $( '#amount' + i ).val( $( '#slider' + i ).slider( "value" ) );
            }

And call it like so:

for (var i=1; i<6; i++)
    slider(i);

This does not work at all. Where is my mistake ? It's my first JQuery app, so please be nice.

Whatever you do, please don't check the error console. That would just make it too easy for us. :P — Šime Vidas
– Šime Vidas, Commented Dec 9, 2012 at 21:18
Try throwing a console log or alert into the slider function - is it actually being called? — Jeff
– Jeff, Commented Dec 9, 2012 at 21:24
No, it is not. May the order in which you write the elements be the problem ? — Marius Cotofana
– Marius Cotofana, Commented Dec 9, 2012 at 21:32

Musa · Accepted Answer · 2012-12-09 21:51:56Z

2

The function you assign to slide only takes two parameters, it should be

        function slider(i) {
            $( '#slider' + i ).slider({
                value:4,
                min: 1,
                max: 7,
                step: 1,
                slide: function( event, ui ) {
                    $( '#amount' + i ).val( ui.value );
                }
            });
            $( '#amount' + i ).val( $( '#slider' + i ).slider( "value" ) );
        }

Also make sure you include jquery ui JS and CSS files

http://jsfiddle.net/mowglisanu/Z2aaE/1/

answered Dec 9, 2012 at 21:51

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marius Cotofana Over a year ago

So, the problem was that I had my 'for' loop into a different script tag. Does that make a difference ?

jjenzz · Accepted Answer · 2012-12-09 22:52:16Z

You seem to be overcomplicating things slightly there... something like this is probably all you need (I have added loads of comments to the code to try explain what is going on):

var amountFields = [],
    selector = '.slide',
    opts = {
      value: 4,
      min: 1,
      max: 7,
      step: 1,
      slide: function(e, ui) {
        var i = ui.handle.closest(selector).data('sliderId');
        amountFields[i].val(ui.value);
      }
    };

// because you have used a '.slide' class 
// name on your sliders, you can use .each() 
// to iterate through them instead of using
// your for loop that assumes there are only 
// ever 5 sliders
$(selector).each(function() {
  // get 'i' from the sliders id attribute
  var i = this.id.replace(/[a-z\-_]/gi, '');

  // initialise slider on the element 
  // and store 'i' within the elements
  // data for easy access in the
  // slide method later
  $(this).slider(opts).data('sliderId', i);

  // DOM querying is a hit on performance 
  // so cache the jQuery object for re-use 
  // in the slide method instead of 
  // re-querying the DOM
  amountFields[i] = amountFields[i] || $('#amount' + i);

  // set the amounts initial value using 
  // the opts object instead
  amountFields[i].val(opts.value);
});

Haven't tested this so not 100% there are no errors in the above but something like that should work.

=================================== UPDATE ======================================

Since you thought the above looked more complicated, here is the exact same code without the comments and caching to show you just how simple it actually is:

var opts = {
  value: 4,
  min: 1,
  max: 7,
  step: 1,
  slide: function(e, ui) {
    var i = ui.handle.closest('.slide').data('sliderId');
    $('#amount' + i).val(ui.value);
  }
};

$('.slide').each(function() {
  var i = this.id.replace(/[a-z\-_]/gi, '');
  $(this).slider(opts).data('sliderId', i);
  $('#amount' + i).val(opts.value);
});

I added in the caching before for performance so without it, it will perform slower but will still work. The .replace() bit is getting the slider ID and removing any letters, hyphens or underscores to leave just the number, the bit we need.

It actually seems a lot more complicated to me. But thank you.
@MariusCotofana I've added an update to the bottom of my post to show you how simple it really is :)

strider · Accepted Answer · 2012-12-09 21:27:19Z

1

Looks like you are missing a closing brace } in your function slide(i). Otherwise your script worked like a charm for me.

In the future, you should post the error that you got, or that you didn't get an area. You can check your code for errors from within the console of any modern web browser.

answered Dec 9, 2012 at 21:27

strider

6,0144 gold badges27 silver badges30 bronze badges

1 Comment

Marius Cotofana Over a year ago

The closing brace is present in the actual code. Maybe the problem is the order in which you write the elements. Can you please tell me you did you write yours ?

Travis J · Accepted Answer · 2012-12-09 22:02:36Z

1

Pass i into your slide function like this:

slide: function( event, ui, i ) {
         $( '#amount' + i ).val( ui.value );
       }

edited Dec 9, 2012 at 22:02

answered Dec 9, 2012 at 21:16

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

1 Comment

Jeff Over a year ago

Actually... that shouldn't make a difference - i is present in the closure, so the function will have access to it. The function really shouldn't take i, or it'll be possible for it to slide some other slider's amount... At least from my understanding of what's going on.

Collectives™ on Stack Overflow

Calling a javascript function multiple times

4 Answers 4

1 Comment

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related