JQuery can't find variable from separate javascript file

Question

I am using the cakephp framework and I created 2 separate javascript files and placed them into my webroot/js folder. The first javascript file contains modal dialog variables that contain the settings for the dialog boxes. The second javascript file contains other click event handlers that post data to an action and then open up the dialog.

The problem I am having is that the second file calls a variable from the first file using $variablename and I get an error saying varaibleName is not defined.

Some code is below to show you what I mean. From the first file:

var $editSel = $("#editSel_dialog").dialog(
{
    autoOpen: false,
    height: 530,
    width: 800,
    resizable: true,
    modal: true,
    buttons:
    {
        "Cancel": function()
        {
            $(this).dialog("close");
        }
    }
});

From the second file:

$('.neweditSel_dialog').live('click', function()
{
    $.ajaxSetup({ async: false });

    var selected = [];

    $("#[id*=LocalClocks]").each(function()
    {
        if(false != $(this).is(':checked'))
        {
            var string = $(this).attr('id').replace('LocalClocks', '');
            string = string.substring(10);
            selected.push(string);
        }
    });

    if(0 === selected.length)
    {
        $selError.dialog('open');
        $selError.text('No Local Clocks Were Selected')
    }
    else
    {
        $.post('/LocalClocks/editSelected', { "data[Session][selected]": selected }, function(data)
        {
        });
        $editSel.load($(this).attr('href'), function ()
        {
            $editSel.dialog('open');
        });
    }
    return false;
});

This was working when I was using jquery-1.4.2.min.js, but I am using jquery1.7 now. I also ended up putting the first file with all the variables inside of $(document).ready(function(){}); I tried putting the second file inside of a document.ready() function but that made no difference.

Any help would be great. Thanks

it is the $editSel variable in the else clause that can't be found. — RXC
– RXC, Commented Jul 18, 2012 at 12:24
$editSel. Since its the only variable defined in the first file. — techfoobar
– techfoobar, Commented Jul 18, 2012 at 12:25
@techfoobar Ive seen plenty of people list code as examples when actually what theyre asking doesn't relate in any way. It doesn't hurt to make sure. — Jon Taylor
– Jon Taylor, Commented Jul 18, 2012 at 12:26
In your HTML, is the script tag for the second file after the script tag for first one? — techfoobar
– techfoobar, Commented Jul 18, 2012 at 12:26
@JonTaylor - Thats true. I've seen quite a few cases like that too. — techfoobar
– techfoobar, Commented Jul 18, 2012 at 12:27

Austin · Accepted Answer · 2012-07-18 12:37:17Z

2

You are dealing with an issue in scope. In javascript:

function foo() {
    var greet = "hi";
}

function bar() {
    console.log(greet); // will throw error
}

However:

var greet;
function foo() {
    greet = "hi";
}

function bar() {
    console.log(greet); // will log "hi"
}

You must define your variable in a common parent of both functions that need to access it. Unfortunately, since you do not use any modeling convention or framework, that is the window object (why are global variables bad?).

So, you must define var $whateveryouneed before and outside of both $(document).readys.

Also, keep the declaration and definition seperate. Your definition instantiates a jQuery object, so you must encapsulate it inside a $(document).ready() (use $(function() {}) instead):

var $editSel;
$(function () {
    $editSel = $("#editSel_dialog").dialog(
    {
        autoOpen: false,
        height: 530,
        width: 800,
        resizable: true,
        modal: true,
        buttons:
        {
            "Cancel": function()
            {
                $(this).dialog("close");
            }
        }
    });
});

edited Jul 18, 2012 at 12:37

answered Jul 18, 2012 at 12:31

Austin

6,0442 gold badges26 silver badges24 bronze badges

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

4 Comments

RXC Over a year ago

I'm using the cakephp framework. I don't think there is a common parent because both files just pull out javascript from my view files. But to test this out, I will combine both files than work from there.

Austin Over a year ago

Javascript framework. Defining a global variable like in the updated answer should solve your problem, without combining the files.

RXC Over a year ago

Hey, you were right, changing the dialog settings into a function and then placing the global variable call var $editSel above the document.ready() call worked. THanks for the help

Austin Over a year ago

No problem, take a look at those resources I posted, there are some good tips of javascript.

Jon Taylor · Accepted Answer · 2012-07-18 12:23:24Z

1

I don't think you can guarantee the order in which handlers will be fired, which means that the document ready may be fired in different order than you expect. Is the variable you are trying to access in the second file a global variable? Try to think about your variables scope as I would have thought this is the issue.

answered Jul 18, 2012 at 12:23

Jon Taylor

7,9255 gold badges32 silver badges55 bronze badges

Comments

jfrej · Accepted Answer · 2012-07-18 12:45:38Z

1

You cannot guarantee that one file will be loaded before the other. And you cannot guarantee that document.ready in one file will fire before the other.

Therefore, I suggest you wrap your code in functions and call them in a single document.ready handler in the order you need.

For example:

function initVariables(){
    window.$editSel = ... // your code from the first file here
}

function initHandlers(){
    // your code from the second file here
}

And then:

$(document).ready(function() {
    initVariables();
    initHandlers();
});

You'll notice that I used the global window object to expose your variable. It would be even better if you used a common namespace for them.

answered Jul 18, 2012 at 12:45

jfrej

4,65833 silver badges36 bronze badges

Collectives™ on Stack Overflow

JQuery can't find variable from separate javascript file

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related