How to make javascript module pattern work with ajax?

I am trying to convert some javascript/jquery code to be able to handle ajax tabs.

I have all my scripts load up when the pages loads up and I use jquery live and livequery plugin to help with the binding.

Each time is in a partial view(asp.net mvc 3) and when clicked goes to a controller action and renders the partial view and sticks it in the tab.

So the live and livequery are solving most of the problems except for this one problem. I am using the jquery datatables.net plugin and once it renders that I store it in a variable and use it places.

The thing is since I am using the module pattern the code runs long before the table is even rendered. So the variable storing the object is "undefined". I tried to wrap it around with jquery livequery statement and that makes the table run but the variable is still "undefined".

My guess is that is not like C# were it would update the reference. So I am thinking that it is in my global variable(the one for the module pattern) and that never gets updated.

var tab = (function (my, $)
{
    var myTable = my.dataTable = my.dataTable || {};

    myTable.oDataTable = {};


    myTable.init = function ()
    {
        myTable.oDataTable = _fnSetupTable();
        _fnCreateDateFilters();
    };



    myTable.delete= function (rowToDelete)
    {
        // Need to get the position of the row. Need to use index
        var pos = this.oDataTable.fnGetPosition(rowToDelete[0]);

        /* delete row from table - first param is index of row */
        this.oDataTable.fnDeleteRow(pos, null, true);
    };

    function _fnSetupTable()
    {

        /* Initialize datatable object */

        $('#table').livequery(function ()
        {
            // oDataTable gets used in alot of places later on but since it undefined
            // it will crash when used.
            var oDataTable = $(this).dataTable(
            {
                "bJQueryUI": true,
                "bFilter": true,
                "bAutoWidth": false,
                "sPaginationType": "full_numbers",
                "aaSorting": [[3, 'asc']],  //Default sorting on datetime
                "oLanguage":
                    {
                        "sZeroRecords": "No Records"
                    },
                "aoColumns":
                    [
                        { "bSortable": true, "bSearchable": false }, 
                        {"bSortable": true, "bSearchable": false }, 
                        {"bSortable": false, "bSearchable": false }, 
                        {"bSortable": false, "bSearchable": false }, 
                        {"iDataSort": 3 },
                        { "bSortable": false, "bSearchable": true },  
                        {"bSortable": false, "bSearchable": false },      
                        {"bSortable": false, "bSearchable": false}  
                    ]
            });

            return oDataTable;
        });

    }

    return my;

} (tab || 开发者_如何学运维{}, jQuery));

I use oDataTable quite a bit. As you can see if I would call up myTable.Delete I use it oDataTable there but it will be "undefined" and crash.

I have another module class that starts the whole sequence(so makes the above code run)

/* 
*   Document Ready
*/
$(function ()
{

    /* Initializes all plugins and events */
    tab.init();

});


var tab = (function (my, $)
{

    my.init = function ()
    {
        tab.preload();
        tab.dataTable.init();
        $('#tabs').tabs();
    };



return my;

} (tab || {}, jQuery));

There seem to be a number of things you're calling oDataTable and they are all assigned/accessed in incompatible ways.

The first problem I see is that the oDataTable value you attempt to return from _fnSetupTable is actually scoped to and returned from the inner function, so the following assignment does nothing:

myTable.oDataTable = _fnSetupTable();

You're trying to use the result of _fnSetupTable but _fnSetupTable doesn't actually return anything, its inner function does.

Perhaps a larger problem is how you're using the module pattern. I'll try to create a small example to demonstrate the problem:

var input = {
    dataTable: "tab table"
}

var tab = (function (my, $)
{
    // this var is local
    var myTable = my.dataTable = my.dataTable || {};

    // creating a property on a local variable
    myTable.oDataTable = {};

    // this is what's returned, but it has no access to myTable
    return my;

} (input));

console.log(tab) // does not have an oTableData property

As in your example a local variable called myTable is created and given the table properties, but what's being returned is my, not myTable. If you want those properties to be accessible from the my object that's returned, then you need to assign them to my. Or maybe you meant to return myTable?