Have 2 handlers trigger a one function with jquery

Question

I have a bootstrap javascript table which currently loads when the document is ready, like so:

$(document).ready(function(){
    $('#table-javascript').bootstrapTable({
    method: 'get',
    url: 'bootstrap_database.php',
    height: 600,
    cache: false,
    striped: true,
    pagination: true,
    search: true,
    pageSize: 20,
    pageList: [20, 40, 60, 100, 200],
    minimumCountColumns: 2,
    clickToSelect: true,
    columns: [{
        field: 'ID',
        title: 'ID',
        align: 'center',
        visible: false
    },{
        field: 'title',
        title: 'Title',
        align: 'center',
        sortable: true,
        width: '20'
    },{
        field: 'audio', 
        title: 'Audio',
        align: 'center',
        width: '20'
    },{
        field: 'sheet1',
        title: 'Sheet 1',
        align: 'center',
        width: '20'
    },{
        field: 'sheet2',
        title: 'Sheet 2',
        align: 'center',
        width: '20'
    },{
        field: 'sheet3',
        title: 'Sheet 3',
        align: 'center',
        width: '20'
    },{
        field: 'lyrics',
        title: 'Lyrics',
        align: 'center',
        width: '20'
    },{
        field: 'sheet1notes',
        title: 'Notes 1',
        align: 'center',
        width: '20'
    },{
        field: 'sheet2notes',
        title: 'Notes 2',
        align: 'center',
        width: '20'
    },{
        field: 'sheet3notes',
        title: 'Notes 3',
        align: 'center',
        width: '20'
    }],
    aoColumnDefs: [{
        bSearchable: false,
        bVisible: true,
        aTargets: [0]
    }]

    });
});

I would like to reload the table in other parts of my page. My idea is to have a couple of handlers which can fire off this function. Maybe a .click() or .change() would do it. But I am not sure if I can have multiple handlers firing off the same function.

Here is an example of a ajax call that I would like to refresh the table after a success:

$( "#addnewsong" ).on( "submit", function( event ) {
    $('.newsongupprog').replaceWith('<i class="fa fa-spin fa-spinner"></i>');
    thisdata = new FormData($("#addnewsong")[0]);
    $.ajax({
        url: "multiple_upload_ac.php?",
        data: thisdata,
        type : "post",
        cache: false,
        contentType: false,
        processData: false,
        success: function(data){
            $('.fa-spinner').replaceWith('<i class="fa fa-check"></i>');
            $('.fa-check').replaceWith('<i class="fa fa-cloud-upload"></i>');
            if (data == 'go') {
                data = "Your song has been uploaded";   
            } else {
                data = "There was a problem uploading some of your files, please search for your song title and add your files manually";   
            }
            $('div.alert3').fadeIn();
            $('div.alert3').html(data);
            $('div.alert3').delay(5000).fadeOut();

            $table.bootstrapTable('refresh', {
                url: 'bootstrap_database.php'
            });
        },
    });
    return false;
});

I have a feeling my approach to this is way off, so could I get some experts to shed some light on this.

Answer 1

You have to declare the $table variable before you attempt to use it (refresh the table) in AJAX success callback

$(document).ready(function(){

    // declare $table variable:
    var $table = $('#table-javascript').bootstrapTable({
        // ... configuration ...
    });

    //then submit event handler:
    $( "#addnewsong" ).on( "submit", function( event ) {
       // ...
    });

});