CODEWITHSUNDEEP
javascriptjqueryajaxdatatables
Vishwanth Iron Heart
Vishwanth Iron Heart

Reputation: 734

how to access dataTable variable outside ajax

I have this datatable that is created inside a function call. But if I want to create new rows based on event listeners like this, it gives an error that the table variable is undefined, which is understandable because it is inside a function call and not global. So how do I create a workaround for this and add event listeners under $(document).ready() section?

The structure of my JS file is very shabby, but it's intended to be in that way.

$(document).ready(function()
{
     var table=null;
     $('#button').click(function()
     {
         callfunction1();
     }
     callfunction1()
     {
         $.ajax({
              'success': function(response) //response contains the plain table
                         {
                             createDatatable(response)
                         }
         })
     }
     createDatatable(response)
     {
            $('#division').html(response); //creating the plain table
            table=$('#tableId').Datatable({}); //converting it to datatable
     }
     //I want to add event listeners here, because if I add
     //it anywhere else, it doesn't work, because basically
     //it's a function call.
}

Upvotes: 0

Views: 2287

Answers (3)

Vishwanth Iron Heart
Vishwanth Iron Heart

Reputation: 734

So after all your answers(which I am very grateful for) , I have found out a different approach for it. As per documentation here, I added a $.ajax({}_.done() (this is as good as accessing the dataTable variable outside ajax call) function to host my event listener for accessing my dataTable.

Once again, I thank you all for the answers. Edit: As requested for the correct solution.

$(document).ready(function()
{
     var table=null;
     $('#button').click(function()
     {
         callfunction1();
     }
     callfunction1()
     {
         $.ajax({
              'success': function(response) //response contains the plain table
                         {
                             createDatatable(response)
                         }
         }).done(function()
         {
                 //add event listener here,You can access the table variable here. but you can not access the variable outside, instead just pass the variable to another function.
                 console.log(table);//this will work.
         });
     }
     createDatatable(response)
     {
            $('#division').html(response); //creating the plain table
            table=$('#tableId').Datatable({}); //converting it to datatable
     }
}

Upvotes: 1

Lukilas
Lukilas

Reputation: 176

The following should work if you choose one var table declaration and delete the other

var table; //accessible everywhere
$(document).ready(function()
{
     var table; //accessible anywhere in this function
     $('#button').click(function() {
         callfunction1();
     }); //); were missing

     function callfunction1 ()
     {
         $.ajax({
              'success': createDatatable //no () here, you want to pass a function, not the result of a function call
         });
     }

     function createDatatable()
     {
            table=$('#tableId').Datatable({});
     }

}

This should give no errors, but i'm not sure if this is what you want to do.

Upvotes: 1

Andre Gusmao
Andre Gusmao

Reputation: 224

You can create a instance of the table var in a wider scope, example:

//the table is now a window object variable window.table
var table = null;
$(document).ready(function()
{
     $('#button').click(function()
     {
         callfunction1();
     }
     callfunction1()
     {
         $.ajax({
              'success': createDatatable()
         })
     }
     createDatatable()
     {
            table=$('#tableId').Datatable({})
     }

     //the table is binded in the window scope so you can use in your event listeners
}

Upvotes: 2

Related Questions