1

I got six jQuery UI sliders in a Wordpress metabox, I get they're values and output the average to a text input field (#pm_overall_score), this is the JS that handles this: 

var sum = 0 ; 
var nums = 0;
$('.rwmb-slider').bind({

    slidechange : function(event,ui) {
      sum = 0;
      nums  = 0;
    $('.rwmb-slider').each(function(){

        var value = $( this ).slider( "option", "value" );
        if(value != 0 ) 
         {
            sum += value ; 
            nums++;
          }

        }); 
       var avg = sum / nums ; 
       $('#pm_overall_score').val(Math.floor(avg));
       console.log(avg);
    }

}).slider();

Works fine except that when I save the values, on page reload the text input displays huge numbers and I can't understand why this is happening nor the math behind it.

Ex:
First Slider > Value 5,
Second Slider > Value 15

Saves the correct average (10) but on the input field shows 257 on page reload. Now if I move the third slider to 10, the number becomes 17170 (??). I need to move back all the sliders to 0 to make it work again. I'm not a jQuery expert though, any idea about why this is happening or any alternative on average calculation?

Thanks

EDIT: I also post the code that handles the sliders if it's helpful:

jQuery( document ).ready( function( $ )
{
    var
        id = null
        , el = null
        , input = null
        , label = null
        , format = null
        , value = null
        , update = null
        ;
    $( '.rwmb-slider' ).each( function( i, val )
    {
        id = $( val ).attr( 'id' );
        el = $( '#' + id );
        input = $( '[name=' + id + ']' );
        label = $( '[for=' + id + ']' );
        format = $( el ).attr( 'rel' );

        $( label ).append( ': <span id="' + id + '-label"></span>' );
        update = $( '#' + id + '-label' );

        if (
            !$( input ).val()
                || 'undefined' === $( input ).val()
                || null === typeof $( input ).val()
            )
        {
            $( input ).val( $( el ).slider( "values", 0 ) );
            $( update ).text( "0" );
        }
        else
        {
            value = $( input ).val();
            $( update ).text( value );
        }
        if ( 0 < format.length )
            $( update ).append( ' ' + format );

        el.slider(
            {
                value: value,
                slide: function( event, ui )
                {
                    $( input ).val( ui.value );
                    $( update ).text( ui.value + ' ' + format );
                }
            } );
    } );
} );
djwd
  • 315
  • 2
  • 5
  • 15
  • "on page reload" How are you handling the numbers on the serverside and returning it to the input? – Kevin B Jan 31 '13 at 20:26
  • How is the value from the input impacting the calculation on slidechange? i don't see where you are pulling it in. – Kevin B Jan 31 '13 at 20:29
  • through the Wordpress Meta Box plugin [link](https://github.com/rilwis/meta-box), but I think the error is in that code – djwd Jan 31 '13 at 20:31
  • 1
    If that's all the javascript code you have, you should get the same result in the average input every time regardless of the value in the average field on page load since you aren't using it. I haven't tested the math yet, but the fact that you see it as being different after a page reload doesn't make sense. – Kevin B Jan 31 '13 at 20:33
  • This is already helping, thanks. I have also the code from the plugin handling the sliders, I just edited my question and added that – djwd Jan 31 '13 at 20:36
  • You have scope problems, declare you variables inside of the each rather than outside. Otherwise, the slide event of every slider will look at the input and update of the last slider. – Kevin B Jan 31 '13 at 20:40

0 Answers0