OctoberCms Как передать ответ ajax на функцию javascript - PullRequest
Новая
       8

OctoberCms Как передать ответ ajax на функцию javascript

0 голосов
/ 30 января 2019

Я создал форму в html-файле компонента. Когда я отправляю форму, вызов ajax запускает мое действие, определенное в компоненте.Пока мой код работает нормально, я получаю ответ.Но теперь я хочу, чтобы ответ был передан в функцию javscript, которую я создал внутри htm-файла компонента. 

function markAddresses(addresses) {
geocoder = new google.maps.Geocoder();
addresses.forEach(address => {
  geocoder.geocode({'address': address}, function(results, status) {
   if (status === 'OK') {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({map: map,position: results[0].geometry.location});
       } else {
      alert('Geocode was not successful for the following reason: ' + status);
   }
  });
  })

}

Я хочу передать свой ответ как markAddresses (response) 

<form method="post" data-request="onSend">
<div class="col-md-5">
    <input type="text" name="location" class="form-control">
</div>
<div class="col-md-2">

    <select name="service[]" id="services" class="form-control">&nbsp;
        {% for client in records %}
            <option value="{{ client.service }}">{{ client.service }}</option>
        {% endfor %}
    </select>
</div>
<div class="col-md-2">
    <select name="area[]" id="search" class="form-control" >&nbsp;
        {% for client in records %}
            <option value="{{ client.area }}">{{ client.area }} Miles</option>
        {% endfor %}
    </select>
</div>
<div class="col-md-3">
    <input type="submit" value="Looks for Shops" class="red-btn btn btn-default">
    <a class="location-view" href="#">View all Shops</a>
</div>

Так работает мой Ajax.Я думаю, что он использует ojetcms Ajax Framework

1 Ответ

0 голосов
/ 30 января 2019

Вы можете использовать data-attributes-api

<form method="post" 
      data-request="onSend" 
      data-request-success="markAddresses(data)"
      <!--    ^-- this one -->
>
....
</form>

. Убедитесь, что markAddresses - это глобальная функция, к которой вы можете получить глобальный доступ.data - это возвращаемое значение из обработчика.

Если ваш обработчик выглядит следующим образом 

function onSend() {
    return ['test' => 'data'];
}

Он передаст объект, как показано ниже в markAddresses, как переменную data

console.log(data); // output : { "test": "data" }

Если есть сомнения, прокомментируйте.

...