Клуб API Карт

Проблема с ajax и маркерами

filondesign
2 июля 2012, 12:13

 При клике на ссылку, я получаю координаты и хочу вставить метки на карту.

Вроде все хорошо но есть одно НО... Маркеры вставляются только по второму клику.
С первого раза не вставляются.
Что делать? 

$('#rubrics ul.level_3 li a').click(
        function() 
        {
            var coord = getCoordinats();
            for (i = 0; i < coord.length; i++)
            {
                var properties = 
                {
                    iconContent: coord[i].id,
                    balloonContent: coord[i].content,
                };
                    
                    myPlacemark = new ymaps.Placemark(coord[i].point.split(','), properties);
                    // Добавляем метку в коллекцию.
                myCollection.add(myPlacemark);
            } 
        }
    );    
17 комментариев
Подписаться на комментарии к посту
Комментарий удалён

Дайти ссылку на страницу с проблемой, если можно. По коду не очень понятно в чем может быть проблема.

К сожалению это только на локальной машине

 

Переписал первый пост.

Относительно переписанного поста. На первый взгляд все правильно. Обработчик клика срабатывает с первого раза? Если нет, то скорее всего  проблема в библиотеке с помощью которой вы слушаете клик на ссылке.

Есть ли ошибка в консоли? Какой используете браузер?

 

Браузеры все =)
Основа FF и Chrome

function()         {            alert('xxxxxxx')

 Алерт срабатывает при первом клике а маркеры ставятся только при повторном.
Библиотека jquery

Когда ставлю алерт в цикл for, то он срабатывает при втором клике.

а код внутри for отрабатывает?

может у вас первый раз coord.length === 0?

Да, так и есть.
Что делать в данной ситуации? 

наверное надо понять что не так с функцией getCoordinats

 

function getCoordinats (setId){       $.ajax(    {        url: 'http://'+location.host+'/map/getcoordinats',        type: 'POST',        dataType: 'json',        data: { id: setId},        success: function(data)         {              coord = data.coord;           }    });         return coord; }

Вроде все норм...

весело..

т.е. по-вашему эта функция дожна отработать синхронно?

хз... я в JS не селен.
В пхп вызвав функцию из другой и т.д. работает сразу.

Здесь по тому же принцепу стараюсь.
При клике вызываем различные действия, там же вызов функции getCoordinats, которая получает данные json.

Далее добавляет в коллецию. 

 

Укажите на мою ошибку.

Ошибка в том что javascript не работает по тому же принципу что и пхп.

Если функция отрабатывает асинхронно надо учитывать что она выполнится сразу, а вернет нужное значение потом

Обычно в аргументах таким функциям передают "обработчики обратного вызова"

Как я понял, у метода должен быть какой то откат в виде callback.

Но как это реализовать ?

Также как и с обработкой клика через jquery

передавайте в getCoordinats функцию, которая будет вызвана с data.coord

Вроде разобрался. Спасибо.

При клике:

$('#rubrics ul.level_3 li a').click(        (function(e)         {            setId = $(this).attr('data-id');            myCollection.removeAll();            getCoordinats(setId, myCollection);        })    ); 

 

 

Метод получения маркеров

 

 

function getCoordinats (setId, myCollection){       $.ajax(    {        url: 'http://'+location.host+'/map/getcoordinats',        type: 'POST',        dataType: 'json',        data: { id: setId},        success: function(data)         {              coord = data.coord;                          for (i = 0; i < coord.length; i++)            {                var properties =                 {                    iconContent: coord[i].id,                    balloonContent: coord[i].content,                };                                   myPlacemark = new ymaps.Placemark(coord[i].point.split(','), properties);                // Добавляем метку в коллекцию.                myCollection.add(myPlacemark);            }            }    });        }

 

 

    success: function(data)         {              coord = data.coord;
если 2 ответа придут почти одновременно - возникнет коллизия, - пока в цикле обрабатывается один coord его могут заменить на другой.Лучше не использовать глобальную переменную  
function getCoordinats (setId, callback){       $.ajax(    {        url: 'http://'+location.host+'/map/getcoordinats',        type: 'POST',        dataType: 'json',        data: { id: setId},        success: function(data)         {              callback(data.coord);           }    }); }
и там где цикл 
$('#rubrics ul.level_3 li a').click(        function()         {         getCoordinats($(this).attr('data-id'), function (coord) {            for (i = 0; i < coord.length; i++)            {                var properties =                 {                    iconContent: coord[i].id,                    balloonContent: coord[i].content,                };                                        myPlacemark = new ymaps.Placemark(coord[i].point.split(','), properties);                    // Добавляем метку в коллекцию.                myCollection.add(myPlacemark);            } });});    

 

Спасибо.
очень благодарен за помощь и разъяснение.