Cannot get (Footable) function to work from within AJAX call but it works elsewhere

Question

EDIT: It seems that this issue is only happening in Chrome. Firefox is fine.

Footable is a JQuery plugin. https://fooplugins.com/plugins/footable-jquery/

The following function is used by the "Footable" plugin to make the .table class have a nice layout. :

jQuery('.table').footable({
      "columns": result,
      "rows": response
    });

I want to run the function inside an AJAX call:

$.get('../php/campaignmanagement.php', function(response){
 response = JSON.parse(response);
 var columns = Object.keys(response[0]);
 var result = columns.map(x => {
 return {
   title: x,
   name: x
 }//end return
});

//FUNCTION HERE
jQuery('.table').footable({
  "columns": result,
  "rows": response
});
//FUNCTION ABOVE

......... Other irrelevant code... 
});

This gives me the following error:

jQuery(...).footable is not a function

However, if I move the function outside the AJAX function, it works.

e.g.

 //FUNCTION HERE
 jQuery('.table').footable({
      "columns": result,
      "rows": response
    });
 //FUNCTION ABOVE

 $.get('../php/campaignmanagement.php', function(response){
     response = JSON.parse(response);
     var columns = Object.keys(response[0]);
     var result = columns.map(x => {
     return {
       title: x,
       name: x
     }//end return
    });



......... Other irrelevant code... 
});

I need to be able to run the function from within AJAX. Why would AJAX be causing everything to break?

FYI: The HTML document is calling the scripts like this:(campaignmanagement.js is the file which runs the above functions)

    <script src="../vendors/jquery/jquery.js"></script>
    <script src="../vendors/footable/js/footable.js"></script>
    <script src="../vendors/foundation 6/foundation.js" type="text/javascript"></script>
    <script src="../js/campaignmanagement.js"></script>

score 1 · Accepted Answer · answered Apr 28 '17 at 02:47

1

You're using two different jQuery objects here, your first is $ (unless you've assigned this to something else we can't see) and jQuery. You can just use $ object within itself, or grab a reference of the element that is available within the closure of the AJAX request.

// grab a reference to the table using jquery
var table = $('.table')

$.get('../php/campaignmanagement.php', function(response){
 response = JSON.parse(response);
 var columns = Object.keys(response[0]);
 var result = columns.map(x => {
 return {
   title: x,
   name: x
 }//end return
});

table.footable({
  "columns": result,
  "rows": response
});

});

answered Apr 28 '17 at 02:47

Jon Church

2,320
13
23

Interestingly, this seems to allow the FooTable to load however, it does not show any results. Also, I discovered that this issue only happens in Chrome. – cleverpaul Apr 28 '17 at 03:02
Try it with static dummy data first to see if footable itself is working, if you can do it with static data from within the AJAX call, then it likely is an issue with your mapped data. – Jon Church Apr 28 '17 at 03:21

Cannot get (Footable) function to work from within AJAX call but it works elsewhere

1 Answers1