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
        });
        }
    });
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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