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

Answer 1

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");
            }
        }
    });
});