jquery from external file not loading

Question

So I know this question has been asked many times but I can't seem to get this working, even though it looks correct to me. My jquery functions from an external file aren't loading properly.

My tableMethods.js external file looks like

$(function(){

// Write FITS
function writeFits(){
    var data = $('.sastable').bootstrapTable('getData');
    var name = $('#fitsname').val();
    $.getJSON($SCRIPT_ROOT + '/writeFits', {'data':JSON.stringify(data),'name':name}, 
        function(data){
            $('#fitsout').text(data.result);
        }); 
}

// Delete rows from data table
function deleteRows(){
    var $table = $('.sastable');
    var $delete = $('#delete'); 

    var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
    });

    $table.bootstrapTable('remove', {
            field: 'id',
            values: ids
    });
}

})

My html header looks like

<script type="text/javascript" src="/static/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table.js"></script>
<script type='text/javascript' src="/static/js/tableMethods.js"></script>

When I check the inspector, it says the file has loaded yet when I click my button that looks like

<button id="delete" class="btn btn-danger" type='button' onClick='deleteRows()'>Delete Rows</button>

I get the error

Uncaught ReferenceError: deleteRows is not defined

Tim S. · Accepted Answer · 2015-02-17 17:33:56Z

1

This is a scoping problem. You have to move your functions outside of $(function() { ... })

In JavaScript, anything exclusively defined within a function, generally stays within a function:

var x = 3;

(function() {
    var y = 1;
})();

console.log(x); // 3
console.log(y); // error

So if you’re defining a function within a function, you can only invoke it from that function you have defined it in. When trying to invoke it from anywhere else, the inner function will seem undefined.

In your case, you can simply remove the wrapper function:

$(function() { // Delete this...

    ...

}); // And this

For more information, read You Don’t Know JS: Scope & Closures

answered Feb 17, 2015 at 17:33

Tim S.

13.9k9 gold badges49 silver badges73 bronze badges

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

3 Comments

havok2063 Over a year ago

I've tried that as well and it didn't work either. My original tableMethods.js had only the function calls inside the file. When it didn't work, I thought I needed to wait until the DOM was loaded, so I added the outer function.

Tim S. Over a year ago

@havok2063 Could you give a little more information? At what line is the error thrown? Screenshots and more code would be very helpful.

havok2063 Over a year ago

Hi. Well I think I got it to work. I took out the outer function as you suggested, and I changed all of my /static/js sources to ../static/js, and then I made sure the actual js and page refreshed. I think my page was still using an older version of my js file.

Collectives™ on Stack Overflow

jquery from external file not loading

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related