3yRuL3z 3yRuL3z - 4 months ago 20
HTML Question

"[object Object]" is not a valid number jquery slider

Below is my html code for 4 inputs. I am using jquery ui slider to represent these percentage fields.

<div class="turnover">
<label for = "{{ form.turnover.id_for_label }}">Umsatz des verkauften Artikels am Gesamtumsatz</label>

{{ form.turnover }}

<div id="turnover_slider"></div>

{{ form.turnover.errors }}
</div>

<div class="clear"></div>

<div class="sold_qty">
<label for = "{{ form.sold_qty.id_for_label }}">Zahl der verkauften Menge des Artikels zur gesamten Absatzmenge</label>

{{ form.sold_qty }}

<div id="sold_qty_slider"></div>

{{ form.sold_qty.errors }}
</div>

<div class="clear"></div>

<div class="produced_qty">
<label for = "{{ form.produced_qty.id_for_label }}">Zahl der produzierten Menge des Artikels relativ zur gesamten Produktmenge</label>

{{ form.produced_qty }}

<div class="produced_qty_slider"></div>

{{ form.produced_qty.errors }}
</div>

<div class="clear"></div>

<div class="var_pay">
<label for = "{{ form.var_pay.id_for_label }}">Prozent der variablen Verg&uuml;tung an der Gesamtverg&uuml;tung</label>

{{ form.var_pay }}

<div class="var_pay_slider"></div>
{{ form.var_pay.errors }}
</div>

<div class="clear"></div>

<div class="contracts">
<label for = "{{ form.contracts.id_for_label }}">Anzahl der abgeschlossenen Vertr&auml;ge im Veranlagungszeitraum</label>
{{ form.contracts }}
{{ form.contracts.errors }}
</div>


Jquery code is

$( "#turnover_slider" ).slider({
range: "max",
min: 1,
max: 100,

slide: function( event, ui ) {
$( "#id_turnover" ).val( ui.value );
}
});
$( "#id_turnover" ).val( $( "#turnover_slider" ).slider( "value" ) );




$( "#sold_qty_slider" ).slider({
range: "max",
min: 1,
max: 100,
slide: function( event, ui ) {
$( "#id_sold_qty" ).val( ui.value );
}
});
$( "#id_sold_qty" ).val( $( "#sold_qty_slider" ).slider( "value" ) );



$( "#var_pay_slider" ).slider({
range: "max",
min: 1,
max: 100,
slide: function( event, ui ) {
$( "#id_var_pay" ).val( ui.value );
}
});
$( "#id_var_pay" ).val( $( "#var_pay_slider" ).slider( "value" ) );


The slider works fine for the first 2 input fields (ie) for turnover and sold_qty fields. But it does not work for the produced_qty and var_pay. It throws the error '"[object Object]" is not a valid number'. Need your experts help.

Answer

For first two case you have correct id to DOM element as :

<div id="turnover_slider"></div>
<div id="sold_qty_slider"></div>

but for rest of the two you have class assigned and not the id. Please correct it:

<div class="produced_qty_slider"></div>
<div class="var_pay_slider"></div>

Or change the JS code to change the jQuery selector for them as :

$( ".produced_qty_slider" ).slider({

$( ".var_pay_slider" ).slider({