How to use a dynamic property value in a jQuery widget

Question

I have a javascript that returns a value whenever I choose an option from a dropdown menu.

   $(document).ready(function() {
        function calculateVals() { 
            //dropdown menus      
             var valuestart = $("select[name='timestart']").val();
             var valuestop = $("select[name='timestop']").val();

             //create date format          
             var timeStart = new Date("01/01/2007 " + valuestart).getHours();
             var timeEnd = new Date("01/01/2007 " + valuestop).getHours();

             var hourDiff = timeEnd - timeStart;                         

             return hourDiff;  

        }
        $("select").change(calculateVals);
        calculateVals();
    });

The script above returns a number which I need to add to a jquery plugin below. I need to add it to the max option but I get the error calculateVal is not defined.

$(function(){
    $("#slider").slider({
        range: "min",
        value:  8,
        min: 1,
        max: calculateVals(), //my attempt
        step: 1,
        slide: function(event, ui) {
            $("#amount").text(ui.value);
        },
         stop: function(event, ui) {
            $("#notifications").val(ui.value);
        }
    });
    $("#notifications").val( $("#slider").slider("value") );
});

@gdoron thanks i dont see it tho haha – CyberJunkie Jun 14 '12 at 22:35 — CyberJunkie, Jun 14 '12 at 22:35

score 2 · Answer 1 · answered Jun 14 '12 at 22:23

2

Try defining the function out side the ready block:

function calculateVals() { 

             //code here...

             return someResult;                                          
}



$(document).ready(function() {
    $("select").change(calculateVals);
    calculateVals();
});

answered Jun 14 '12 at 22:23

Gabe

49,577
28
142
181

Thanks I tried. I don't get an error but nothing happens when I click the select menu. `someResult` should return a number which should make something happen on change. – CyberJunkie Jun 14 '12 at 22:34

gdoron · Accepted Answer · 2012-06-14T23:17:32.237

2

Move the function to the global scope:

function calculateVals() {       
    //code here...
    return someResult;                                           
}

$(document).ready(function() {
        $("select").change(calculateVals);
    calculateVals();
});

And even better, learn what does DOM ready means, as you misuse it.

You should have only one ready handler.
Only code relevant to DOM elements should be there.

Update:

You can later on change the slider max with:

$( "#slider").slider("option", "max", calculateVals());

edited Jun 14 '12 at 23:17

answered Jun 14 '12 at 22:24

gdoron

147,333
58
291
367

Thank you! Would some extra code make this dynamic? When i click my dropdown menu and choose an option nothing happens. – CyberJunkie Jun 14 '12 at 22:37
@CyberJunkie. I got the feeling your problem lies here `//code here...` `:)` and anyway I don't know what you call dynamic, nor what exactly is the current problem. – gdoron Jun 14 '12 at 22:39
you are right! I added the missing code to the answer. It calculates an hour difference between 2 times i select from the 2 dropdown menus and returns the result. The result I'm trying to add to the jquery function in `max` option which alters a slider. The function executes only when i load the page – CyberJunkie Jun 14 '12 at 22:44
@CyberJunkie. You can later on change the slider max with `$( "#slider").slider("option", "max", calculateVals());` – gdoron Jun 14 '12 at 22:47
do you mean like this? `$("select").change(function() { $( "#slider" ).slider("option", "max", calculateTime()); });` I tried with no success.. – CyberJunkie Jun 14 '12 at 22:53
@CyberJunkie. For example... I'm going to sleep now, we can continue later... Good luck and good night. – gdoron Jun 14 '12 at 22:54
@CyberJunkie. Did you have doubts about it...? just bragging because it worked. `:)` – gdoron Jun 14 '12 at 22:59
I'm always doubtful in js haha. You've earned bragging privilege – CyberJunkie Jun 14 '12 at 23:15

How to use a dynamic property value in a jQuery widget

2 Answers2