0

Собственно, вся суть вопроса заключена в самом заголовке. Имеется скрипт, который ajax-запросами обслуживает три связанных выпадающих списка (данные хранятся в sql). Последний, третий список, отдает ajax'ом значение переменной (выбранный пункт списка) в php-файл, тот, на основе этой переменной, делает sql-запрос и через echo $raw['data'] отдает нужные данные в табличном виде в заранее подготовленную форму. Тут все работает без проблем. Теперь, внимание, вопрос. КАК организовать правильно этот же ajax-запрос, допустим, в аналогичный php-файл, который потом по echo json_encode($data) отдаст данные в js-файл, где используется google-maps-apis (манипуляции с положением карты относительно маркеров)?

Часть кода для последнего третьего выпадающего списка - selector.js:

$(document).ready (function () {
// здесь код первых двух списков        
    $('.field').change (function () {
        var field_id=$(this).val();
        var data = 'field_id='+field_id;    
        $.ajax({
            type: 'POST',
            url: 'well-datatable.php',
            data: data,
            cache: false,
            success: function(data) {
                $('.well-datatable').html(data); // работает замечательно
            }
        });
    }); 
    $('.field').change (function () {
        var field_id=$(this).val();
        var data = 'field_id='+field_id;
        $.ajax({
            type: 'POST',
            url: 'selected-wells_json.php',
            data: data,
            cache: false
            success: function(data) { // не работает, может, здесь и проблема
            }
        });
    });
});

sql-запрос с использованием ajax-данных - selected-wells_json.php:

<?php
require_once 'db.php';
//$_POST['field_id'] = 114; // если раскомментировать, дает нужный результат в js-файле 
if (@$_POST['field_id']) {
	$field_id = isset($_POST['field_id']) ? $_POST['field_id'] : "";
	$stmt = $db->prepare('SELECT * FROM well WHERE field_id=:field_id');
	$stmt->execute(array(':field_id' => $field_id));	
	while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
		$data = array($row);
	}
	header('Content-type: application/json; charset=utf-8');
	echo json_encode($data);
}
?>

Собственно, сам js-файл - clusters_json.js:

function initialize() {
    // часть кода и необходимые переменные
	var center = new google.maps.LatLng(well_lat, well_lng);
	var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 8, 
        center: center,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });
	
	$('#center-selected-wells').click(function () {
	$.ajax({
		type: 'GET',
		url: '../selected-wells_json.php',
		dataType: 'json',
		success: function (data) {
			console.log(data);
			map.setZoom(12);
			map.setCenter(new google.maps.LatLng(data[0].well_lat, data[0].well_lng)); 
                 // должен центрировать карту по заданным координатам для 
                 // первого маркера в списке из выбранных
		}
	});
	});
  // далее идет код отрисовки маркеров в кластеры, 
  // он выполняется во время инициализации карты, 
  // ajax-запрос в json-формате вроде того, что выше
}
google.maps.event.addDomListener(window, 'load', initialize);

На всякий случай, как выводится рабочая табличка в форму - index.php:

<div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <form name="form" class="well-datatable">
              <?php
                   require_once 'well-datatable.php'; // повторюсь, здесь все работает, 
                                                      // данные выводятся в табличном виде
              ?>
          </form>
     </div>
</div>      

Если нужны еще какие-либо данные - только скажите. Сразу прошу прощения за большой пост - само приложение несколько великовато, это только часть функционала. Подозреваю, что проблема в формировании callback-функции ajax-запроса - $_POST-переменная не попадает туда, куда нужно. Буду рад любому совету.

1 ответ 1

0

Видимо, все в отпусках, поэтому отвечаю сам на свой же вопрос. Решение созрело буквально через несколько часов после публикации вопроса, просто не было времени дать вразумительный ответ. А решение оказалось до банальности простым. Дело действительно заключалось в ajax-запросе, но только не в вопросе передачи данных - тут все нормально, а в правильной организации callback-функции. Нужно было просто перенести часть функционала из js-файла в callback-функцию ajax-запроса. Интересно, что при этом не нужно городить дополнительных вложенных ajax-запросов - все прекрасно работает и без них, т.к. данные отдаются посредством echo json_encode($data). См. обновленный листинг ниже.

selector.js:

// здесь можно инициализировать карту, или просто определить глобальную переменную 
// в самом начале clusters_json.js - var map = window.map ;     
$('.field').change(function () {
    var field_id = $(this).val();
    var data = 'field_id='+field_id;
    $.ajax({
        type: 'POST',
        url: 'datatabled-wells.php',
        data: data,
        cache: false,
        success: function (data) {
            $('#datatabled-wells').html(data);
        }
    });
});

$('.field').change(function () {
    var field_id = $(this).val();
    var data = 'field_id='+field_id;
    $.ajax({
        type: 'POST',
        url: 'selected-wells_json.php',
        data: data,
        success: function (data) {
            // часть кода, перенесенная из clusters_json.js
            $('#center-selected-wells').click(function () {
            map.setZoom(12);
            map.setCenter(new google.maps.LatLng(data[0].well_lat, data[0].well_lng));
            // событие .click можно удалить, тогда код отработает по событию .change
        });
        }
    });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.