Как сделать jQuery. ajax вызов во внешнем многоразовом javascript файле в WordPress?

Question

Issue

У меня есть функция в файле add-cp-modal.js с именем dbInsertCostPlace(nameText), которая вызывает другую функцию в файле wpdb-helper.js с именем dbInsertCostPlace(onSuccess, onError), которая выполняет вызов jQuery.ajax. Однако вызов ajax не работает, если он находится внутри отдельного файла wpdb-helper.js. Вызов ajax работает, только когда он находится в том же файле, что и вызывающая его функция.

Файлы

add-cp-modal.js, вызывая функцию ajax в 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, содержащий функцию вызова ajax:

<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>

Answer 1

Я обнаружил проблему, и теперь это выглядит очень глупо. Переменная "nameText" была не определена. Я забыл передать его в метод wpdp-helper в качестве аргумента. Как только я передал значение nameText, сработал вызов ajax.

Answer 2

На основании этой короткой (но великолепной) статьи :

Включите ваше определение jQuery в нижний колонтитул (вместо заголовка), используя wp_enqueue_script("jquery");

you также можно добавить анонимную область (опять же, в нижнем колонтитуле), чтобы использовать $ вместо jQuery, используя:

(function($) {

    // $ Works! You can test it with next line if you like
    // console.log($);

})( jQuery ); 

Это должно сделать jQuery видимым из всех ваших файлов в проекте