How to pass a reference to a Javascript function?

Question

I am building a table using DataTables, and it uses AJAX for it's data source. However, I can't seem to pass a function into the AJAX parameters; the $.post() function (from regular JQuery) always sends whatever my variable evaluates to when the page is loaded. I am pretty bad with understanding the inner workings of JS, so I'm not sure what I'm doing wrong. Here is my code:

function init_datatable() {

  var url = null;
  var datasource = null;

  // Set AJAX url and data based on which page we're on
  if (window.location.pathname.indexOf("bookmarks") > -1) {
    url = "/bookmarks";
    datasource = bookmarks;
  } else {
    url = "/search";
    datasource = $('#form').serialize();
  }

  var table = $('#table').DataTable({
    "ajax" : function (data, callback, settings) {
      $.post(url, datasource, function (data) {
        callback(data);
      });
    }
  });
}

If I write $.post(url, $("#form").serialize()) directly, without passing in the serialize() function inside the variable datasource, I get the expected result; every time the form changes, the updated data is included in the POST request. However, if I do it as written above, datasource is a static object of what the form contained at page load. I have also tried doing

datasource = function() {
  $("#form").serialize()
}

but this does not seem to work. How can I use datasource as both as a static global object and as a function that needs to be run every time $.post() is called, depending on the current page?

Answer 1

Your initial if is called once. That's the problem. It needs to be calculated in each post.

Put it within a function called getdatasource(), which returns it, and call it initially and for every post :)

Answer 2

shouldn't this be working

function init_datatable() {
    function datasource() {
        var url = null;
        var data = null;
        // Set AJAX url and data based on which page we're on
        if (window.location.pathname.indexOf("bookmarks") > -1) {
            url = "/bookmarks";
            data = bookmarks;
        } else {
            url = "/search";
            data = $('#form').serialize();
        }
        return [url, data];
    }

    var table = $('#table').DataTable({
        "ajax": function (data, callback, settings) {
            $.post(datasource()[0], datasource()[1], function (data) {
                callback(data);
            });
        }
    });
}

Answer 3

When you declare var datasource = null in the first lines of your function, you are declaring that variable in that function's scope, as well as any scopes nested within it.

To update the datasource variable inside DataTable's ajax callback you just need to move your $('#form').serialize(); line inside the callback, per the example below. That way the variable will also be set in your top-level function's scope ( init_datatable ).

function init_datatable() {

  var url = null;
  var datasource = null;

  // Set AJAX url and data based on which page we're on
  if (window.location.pathname.indexOf("bookmarks") > -1) {
    url = "/bookmarks";
    datasource = bookmarks;
  } else {
    url = "/search";
  }

  var table = $('#table').DataTable({
    "ajax" : function (data, callback, settings) {
      // each time this executes your top-level datasource variable
      // will be updated here
      datasource = $('#form').serialize();

      $.post(url, datasource, function (data) {
        callback(data);
      });
    }
  });
}