javascript functions not working when in put in different files.

Question

I'm new to this whole thing, and am making a web app that relies heavily on dynamically loaded html pages into a div on the main page.

The main page links to various js files including jquery and some of my own.

As well as this, each of the loaded html files links to its own js file to control user interaction. And some of them also have a div into which html pages are loaded into.

One thing I'm noticing is some of the html pages react slower to the scripts loaded into main page. Global things like highlighting on buttons when clicked need to be tweaked so they are even perceivable on some pages.

Another thing that's happening, which is really annoying me, is that some scripts won't work when they're in separate files, whether these a linked to the main page or the different child pages. I need to put the actual functions into the actual child page's js file.

This simple function for populating a html table from a database is one of these...

function fill_grid(collection, columns){

    var jsonObj = JSON.stringify(columns);

    param = "collection=" + collection + "&columns=" + jsonObj;

        // Ajax call ~~~~~>

    $.ajax({
        type:           'POST',
        url:            'back/fill_grid.php',
        processData:    false,
        data:           param,
        dataType:       'json',
        success:        function(data){

                            $('.grid_foot').text(data.rows.length + ' records');

                            $.each(data.rows, function(count, item) {

                                var c = 0;
                                var cells = '';

                                while (c < columns.length) {

                                    cells += '<td class="'+ columns[c] +'">' + item['cell'][c] + '</td>';

                                    c++;
                                }

                                var newTr = '<tr id="' + item['id'] + '">'+ cells +'</tr>';
                                $('.grid_wrapper table').append(newTr);
                            });

                            var c = 0;

                            while (c < columns.length) {

                                var min_width = $('div.' + columns[c]).css('min-width');
                                $('td.' + columns[c]).width(min_width);

                                var col_width = $('td.' + columns[c]).width(); 
                                $('div.' + columns[c]).width(col_width);

                                c++;
                            }

                            var c = columns.length - 1;

                            var col_width = $('div.' + columns[c]).width(); 
                            $('td.' + columns[c]).width(col_width);
                        }       
    });
}

...even though as you can see its designed for a modular application. The parameters for the ajax call and the construction of the table are passed to it. But it won't run when its in a separate file, although firebug and dom inspector both show no errors, and of course it will work when its pasted into the console of both.

Why is this happening? Is it because of the nested html pages? Is there a limit to how many scripts you can load into a page? Could other scripts be interfering it? How can I debug it?

EDIT: Firebug and Dom Inspector now both tell me that 'data_grid()' is not defined and that it can't find datagrid.js event though I have used the correct path in the script tag, and included it before even the main pages own js file! I even flushed my browsers cache and restarted it, but it still says this.

EDIT: After some snooping I found a bum link on one of the child pages, and after fixing it I no longer get 404 file not found error. But I still get a function not defined error.

Answer 1

I just removed the jquery "$(document).ready(function() { });" from the file and it worked perfectly! Now I'm wondering if this is going to cause it to only work sometimes.