Two scripts won't work at the same time

Question

There is probably a very simple explanation for this (and likely a much cleaner way to do it), but I'm new and can't quite figure it out. Any assistance would help the learning process...

I have one script that displays one div or another based (show instead of hide) on what a user selects from a dropdown list. Like so:

var PickDiv = (function(){

var _obj = {};

var hideShow = function(elem){
    if($(elem).val() === '1'){
          $("#slider_action").show();
          $("#slider_dollar").hide();
        }else if($(elem).val() === '2'){
          $("#slider_dollar").show();    
           $("#slider_action").hide();
        }else{
          $("#slider_dollar, #slider_action").hide();
        }
};

_obj.checkValue = function(){
    hideShow($('#build_opt'))
};

var events = function(){
    $('#build_opt').change(function(){
       hideShow(this);
    });
};

$(document).ready(function(){
    events ();
    checkValue ();
});

return _obj;

}());

This works great and displays the right div based on what is selected from the dropdown. I thought I could reuse this same idea later in my code to have the same effect. Once the div is displayed (after making a selection related to script above), I need to provide another dropdown with additional options. The user will select one of these and then a div will display. So, I figured, I could use something like this:

var RunRate = (function(){

var _obj2 = {};

var hideShow_2 = function(elem_2){
    if($(elem_2).val() === '6'){
          $("#db_sign").show();
          $("#app_down", "#in_redem", "#site_vis", "#cont_ent" ).hide();
        }else if($(elem_2).val() === '7'){
          $("#app_down").show();    
        else{
          $("#app_down", "#in_redem", "#site_vis", "#db_sign", "#cont_ent" ).hide();
        }
};

_obj2.checkValue_2 = function(){
    hideShow_2($('#action_type_2'))
};

var events_2 = function(){
    $('#action_type_2').change(function(){
       hideShow_2(this);
    });
};

$(document).ready(function(){
    events_2 ();
    checkValue_2 ();
});

return _obj2;

}());

Of course, this doesn't work. I tried a number of different things with no luck. Note that if I exclude the first script from my code, the second script works fine, so I know it works. I'm guessing it has something to do with the two scripts sharing a variable or something about jquery that I'm clearly missing.

Any help would be appreciated. Overall, looking to be able to do a number of these types of dependent dropdowns without interfering with one another.

Thanks for your help!

UPDATE:

Note that if in the second script, I replace:

$(document).ready(function(){

with

$( window ).load(function() {

then the problem is solved. So, clearly the problem is related to the document.ready interfering with each other, but I don't know how to fix this without this "hack" above especially if I want to use more of these dependent dropdowns. Is there a way to pass a different variable and call that instead of document?

UPDATE 2

Figured out the problem...my original code was throwing an error due to an undefined reference (checkValue). That error was causing the document ready to not work in the second function. Referenced a more detailed explanation in my answer below.

I guess you should only have one ```$(document).ready(function(){...}``` in your code. Try to combine the two into one and it should be fine. — luksch, Sep 16 '13 at 23:39
@JustinWood Just one related to this: "Uncaught ReferenceError: checkValue is not defined". That's related to the first script, which works fine though. — jonmrich, Sep 16 '13 at 23:40
Try combining the document ready functions and moving outside the enclosing functions? — Neil Neyman, Sep 16 '13 at 23:42
FYI You can have more than one $(document).ready(...), useful if you have multiple JS files included in your page. — andrewb, Sep 16 '13 at 23:44
This might sound stupid, but are you referencing correctly, shouldn't it be `_obj2.checkValue_2();` ? Looking at your code logically second function shouldn't fire because it's not referenced in current context. — skmasq, Sep 16 '13 at 23:45
@skmasq That doesn't work. Either script works on its own, but together there's a problem, so I don't think it's related to that. I tried, but didn't help. — jonmrich, Sep 16 '13 at 23:59
@NeilNeyman Open to give it a try, but I can't quite figure out how to "nest" everything quite right. Tried a few ways, but keep breaking both scripts. Can you give a quick example? — jonmrich, Sep 17 '13 at 00:00
@jonmrich I read some of your comments, I would suggest you to check out requirejs http://requirejs.org/ , this way you could manage dependencies and execute everything you need at once. — skmasq, Sep 17 '13 at 00:22
Following this SO question http://stackoverflow.com/questions/5263385/jquery-multiple-document-ready , `.ready()` acts on first come first served basis. — skmasq, Sep 17 '13 at 00:46
Another suggestion, is to insert `console.log()` functions in each function call, so you would know the sequence and/or if they're called at all. — skmasq, Sep 17 '13 at 00:48
@skmasq That question helped...but it isn't a first come, first served problem. The problem was that my code was throwing an error (undefined reference), which won't allow the document ready function to work properly. I fixed that error and now I can use a number of document ready functions without interference. Thanks for the hint. — jonmrich, Sep 17 '13 at 00:56
I'm thinking it was because you wrote this `checkValue();` instead of this `_obj.checkValue();` ? — skmasq, Sep 17 '13 at 00:59

score 1 · Answer 1 · edited May 23 '17 at 12:05

Figured out the problem thanks to this answer to a related question pointed out by @skmasq. @JustinWood was onto something with his comment on my original question. Turns out that my scripts were throwing an error ("Uncaught ReferenceError: checkValue is not defined"), which was not allowing the document ready function to work properly.

Here's the critical part of the answer :

It is important to note that each jQuery() call must actually return. If an exception is thrown in one, subsequent (unrelated) calls will never be executed.

This applies regardless of syntax. You can use jQuery(), jQuery(function() {}), $(document).ready(), whatever you like, the behavior is the same. If an early one fails, subsequent blocks will never be run.

I knew it. GZ Figuring it out. I would suggest give more detailed answer. — skmasq, Sep 17 '13 at 00:55

score 0 · Answer 2 · answered Sep 16 '13 at 23:41

0

Could be that $(document).ready() overwrites the initial job? It doesn't matter if you use different functions/variable names ...$(document).ready is the same ...

answered Sep 16 '13 at 23:41

Jerez

146
2

You can have multiple $(document).ready as shown here: http://jsfiddle.net/TZHNM/ – andrewb Sep 16 '13 at 23:46
Could be, but not sure what to try in order to test this out. – jonmrich Sep 17 '13 at 00:09
Just added an update to my and I think you're onto something @Jerez. UPDATE: Note that if in the second script, I replace: `$(document).ready(function(){` with `$( window ).load(function() {` then the problem is solved. So, clearly the problem is related to the document.ready interfering with each other, but I don't know how to fix this without this "hack" above especially if I want to use more of these dependent dropdowns. Is there a way to pass a different variable and call that instead of document? – jonmrich Sep 17 '13 at 00:15

Two scripts won't work at the same time

2 Answers2