Why FooTable not callable?

Question

I am working on a project where we are trying to implement a jQuery plugin called Footable. It works by calling the function .footable() on the table being selected by jQuery. When I tried to call this function I got a type error: undefined is not a function.

We are also using prototypejs in this project so at first I though that the problem was that footable was using $.() instead of jQuery.(), and it was. I went in and changed the $[.(] to jQuery hoping that it would fix the problem, but I am still unable to call .footable().

You should also know that I am loading footble.js from an Iframe. I'm not sure if that would cause any problems.

I'm not sure what to try next. Any advice is appreciated.

Thanks in advance

UPDATE 1

I have tried entering the following code in the console

var $j = jQuery.noConflict();
$j('<table></table>').footable();

In an environment that successfully loads footable an object is returned with the footable classes. In my enviornment I get a "TypeError: undefined is not a function".

A JSFiddle or a Plunk would go a long way in getting you the correct answer... — Jeff, Jun 27 '14 at 16:14
@Jeff The problem is that i am able to get it working on other projects but for this project to post the src anywhere — Sonicdeadlock, Jun 27 '14 at 17:23
I've add similar problems in the past. When I create a Plunk I've usually haven't been able to reproduce the problem, but by going step-by-step I've been able to figure out what I was doing wrong. Other times, I have been able to reproduce the problem with a Plunk and I was able to get answers really quickly. Either way, even though creating a Plunk is a pain, it's almost always been time well spent. Here's a simple one to get you started: http://plnkr.co/edit/P2DWDtyHP3xmoUIcvgDe Feel free to fork it and add prototype.js. Maybe you'll be able to reproduce the problem. — Jeff, Jun 30 '14 at 19:27

score 0 · Answer 1 · answered Jun 27 '14 at 13:33

0

make sure load jquery first, and then footable and $ is alias from jQuery, so its should not a problem, u can use $() or jQuery()

based on your question, you should use $() or jQuery(), not $.() or jQuery.()

answered Jun 27 '14 at 13:33

Saiqul Haq

2,287
16
18

I am loading jQuery first. the reason wrote $.() is because footable was both selecting jQuery elements $() and calling jQuery functions $.function(). But thanks – Sonicdeadlock Jun 27 '14 at 13:37
did you wrote setup like http://fooplugins.com/footable/demos/getting-started.htm#setup ?. or you can edit your question and add your code – Saiqul Haq Jun 27 '14 at 14:04

score 0 · Answer 2 · edited May 23 '17 at 12:20

I think you're on the right track with there being a conflict.

Here's a plunk that demonstrates the issue: http://plnkr.co/edit/2sR7F2W0QGJAcXxgez14

In the plunk, if JQuery is still reference by $ and you add the reference to Prototype, you see that Footable stops working. If you use the JQuery NoConflict and then use that instead of $, Footable starts work as expected again.

Here's where I define the scripts:

  <head>
    <link data-require="bootstrap-css@3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
    <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <link rel="stylesheet" href="footable.core.css" />
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <script data-require="bootstrap@*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    <script>var $j = jQuery.noConflict();</script>
    <script src="footable.js"></script>
    <script src="footable.filter.js"></script>
    <script data-require="prototype@*" data-semver="1.7.1+0" src="//cdnjs.cloudflare.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
  </head>

Then when I use JQuery and Call footable():

$j(function() {
  window.footable.options.filter.filterFunction = function(index) {
    var $t = $j(this),
      $table = $t.parents('table:first'),
      filter = $table.data('current-filter').toUpperCase(),
      columns = $t.find('td');

    var regEx = new RegExp("\\b" + filter + "\\b");
    var result = false;
    for (i = 0; i < columns.length; i++) {
      var text = $j(columns[i]).text();
      result = regEx.test(text.toUpperCase());
      if (result === true)
        break;


      if (!$table.data('filter-text-only')) {
        text = $j(columns[i]).data("value");
        if (text)
          result = regEx.test(text.toString().toUpperCase());
      }

      if (result === true)
        break;
    }

    return result;
  };

  $j('table').footable().bind('footable_filtering', function(e) {
    var selected = $j('.filter-status').find(':selected').text();
    if (selected && selected.length > 0) {
      e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
      e.clear = !e.filter;
    }
  });
}

If you want to continue to use $ jquery you could do something like: (jQuery and prototype.js conflict, how to keep jQuery as $?)

(function($) {
    $('table').footable();
})(jQuery);

I tried using jQuery no conflict to no avail. I have updated the question with a sample of what I tried in both the problem environment and a successful environment in the console. — Sonicdeadlock, Jul 01 '14 at 16:37
$j('
').footable(); is wrong. For a jquery selector, you don't use the HTML mark up. So it should look like $j('table').footable(); instead. — Jeff, Jul 01 '14 at 16:58
Here's another plunk: http://plnkr.co/edit/rXeN5PmpqtUMjHUACiFp I striped this one down so it should be much easier to see what's going on. — Jeff, Jul 01 '14 at 17:06

Why FooTable not callable?

2 Answers2