Issue

I have a function in file add-cp-modal.js called dbInsertCostPlace(nameText) that calls another function in file wpdb-helper.js called dbInsertCostPlace(onSuccess, onError) that makes a jQuery.ajax call. However, the ajax call does not work when it’s inside the seperate file wpdb-helper.js. The ajax call does only work when it is in the same file as the function calling it.

Files

add-cp-modal.js, calling ajax function in wpdb-helper.js:

<div id="add-costplace-modal" class="add-costplace-modal-background">

    <div class="add-costplace-modal">

      <div class="add-costplace-modal-headerr">
        <div class="add-costplace-modal-headerr-left-box">
          Skapa kostnadsställe
        </div>
      </div>

      <div class="add-costplace-modal-body">

        <div class="add-costplace-modal-name-form">

          <div class="add-costplace-modal-name-form-label">
            Namn:
          </div>
          <input id="add-costplace-modal-name-textfield" type="text" class="add-costplace-modal-name-textfield">

        </div>

      </div>

      <div class="add-costplace-modal-footer">
        <button id="add-costplace-modal-save-button">Spara</button>
        <button id="add-costplace-modal-cancel-button">Avbryt</button>
      </div>

    </div>

  </div>

  <script>

    document.addEventListener('DOMContentLoaded', function () {
      addCpModal.init();
    }, false);

    var addCpModal = {

      init: function() {
        this.addButtonListeners();
      },

      addButtonListeners: function() {
        document.getElementById("add-costplace-modal-save-button").addEventListener("click", this.savePressed);
        document.getElementById("add-costplace-modal-cancel-button").addEventListener("click", this.cancelPressed);
      },

      savePressed: function() {
        var nameText = addCpModal.getNameText();
        addCpModal.dbInsertCostPlace(nameText);
        addCpModal.hide();
      },

      dbInsertCostPlace: function(nameText) {
        wpdbhelper.dbInsertCostPlace(addCpModal.onCostPlacePostSuccess, addCpModal.onCostPlacePostError);
      },

      onCostPlacePostSuccess: function(result) {
        alert("onCostPlacePostSuccess");
        addCpModal.loadCostPlaces();
      },

      loadCostPlaces: function(){
        wpdbhelper.loadCostPlaces(addCpModal.onCostPlacesGetSuccess, addCpModal.onCostPlacesGetError);
      },

      onCostPlacesGetSuccess: function(result) {
        alert("onCostPlacesGetSuccess");
        cpTable.setData(result);
      },

      onCostPlacesGetError: function(jqXHR, textStatus, errorThrown) {
        alert("Error occurred getting cost places.");
      },

      onCostPlacePostError: function(jqXHR, textStatus, errorThrown) {
        alert("Error occurred posting cost place.");
      },

      getNameText: function() {
        var nameTextfield = document.getElementById("add-costplace-modal-name-textfield");
        return nameTextfield.value;
      },

      hide: function() {
        var modal = document.getElementById("add-costplace-modal");
        modal.style["visibility"] = "hidden";
      },

      cancelPressed: function() {
        addCpModal.hide();
      },

      show: function() {
        var modal = document.getElementById("add-costplace-modal");
        modal.style["visibility"] = "visible";
      }

    };

</script>

wpdb-helper.js containing the ajax call function:

<script>

  var wpdbhelper = {

    dbInsertCostPlace: function(onSuccess, onError) {
      console.log("wpdb-helper: ajaxurl: " + ajaxurl);
      jQuery.ajax({
        url : ajaxurl,
        type: 'POST',
        data: {
          'action': 'insert_costplace',
          'data': {
            'name': nameText,
            'age': 17
            }
        },
        success: function(result) {
          console.log("SUCCESS");
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.log("ERROR");
        }
      });
      console.log("wpdb-helper: After ajax call.n");
    },

    loadCostPlaces: function (onSuccess, onError){
        console.log("loadCostPlaces called inside wpdbhelper");
        jQuery.ajax({
          url : ajaxurl,
          type: 'POST',
          data: {
            action: 'get_costplaces'
          },
          dataType: 'json',
          success: function(result) {
            console.log("SUCCESS");
          },
          error: function(jqXHR, textStatus, errorThrown) {
            console.log("ERROR");
          }
        });
      }

  };

</script>