Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> jquery autocomplete + ajax 
V
    Опции темы
MoLeX
Дата 11.12.2012, 09:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Местный пингвин
****


Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140



Добрый день.

Через ajax получаю всплывающее окно (обычный div) с автозаполнением для поля
Код

<div class="redaktor" style="min-height: 480px;">
        <input id="autocomplet" type="text"  />
</div>

<script type="text/javascript">
$(document).ready(function(){    
    $( "#autocomplet" ).autocomplete(
    {
        source: function(request, response) 
        { 
            $.ajax({url: '/ajax/autocomplete?q='+encodeURIComponent(request.term),dataType: "json", 
                    success: function(data){response($.map(data, function(item) { return {label:item, value:item} })); }});
        },
        minLength:2
    });
});
</script>


при заполнения текстового поля запросы нормально отправляются на сервер (и результат получаю), а вот подстановка не работает. Хотя если это безобразие вызывать по обычному - все нормально.
Как лечиться?


--------------------
Amazing  smile 
PM MAIL WWW ICQ   Вверх
Aliance
Дата 11.12.2012, 11:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137



Правильно ли я понял, ты ajax`ом грузишь html и js код, который манипулирует загруженным html`ем?
Тогда правильнее было бы этот js вынести в callback той функции, которая будет грузить html.

Вообще запрос на /ajax/autocomplete?q= шлется? Если нет - см. выше, если да - ошибка в success-callback видимо.

И что за метод response?
PM MAIL WWW ICQ Skype   Вверх
MoLeX
Дата 11.12.2012, 11:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Местный пингвин
****


Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140



Цитата(Aliance @  11.12.2012,  11:01 Найти цитируемый пост)
Правильно ли я понял, ты ajax`ом грузишь html и js код, который манипулирует загруженным html`ем?

да

Цитата(Aliance @  11.12.2012,  11:01 Найти цитируемый пост)
Вообще запрос на /ajax/autocomplete?q= шлется?

да, и приходит ответ. 
если сделать
Код

success: function(data){ alert(data); }

то увидим что пришло 


Цитата(Aliance @  11.12.2012,  11:01 Найти цитируемый пост)
Тогда правильнее было бы этот js вынести в callback той функции, которая будет грузить html.

что-то не подумал об этом, сейчас попробую


--------------------
Amazing  smile 
PM MAIL WWW ICQ   Вверх
MoLeX
Дата 11.12.2012, 11:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Местный пингвин
****


Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140



не помогло(


--------------------
Amazing  smile 
PM MAIL WWW ICQ   Вверх
Arantir
Дата 11.12.2012, 12:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Рыбак без удочки
**


Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 3
Всего: 55



Цитата

<script type="text/javascript">
$(document).ready(function(){    
    $( "#autocomplet" ).autocomplete(
    {

Если вынесли весь свой js, то он ни после какого запроса никогда не выполнится, так как ready уже в прошлом.

А вообще, если думать последовательно, то вызывать $("#autocomplet").autocomplete() нужно тогда, когда элемент с id autocomplet уже существует в DOM страницы.
Попробуйте в callback-е запроса, получающего html с div-ом autocomplet сначала всунуть этот html на страницу через что-то вроде append, а потом вызывать .autocomplete().
Полного кода я не видел, по этому все это только догадки. Но возможно callback-функция просто вызывается тогда, когда на странице еще нет элемента с таким id.

Это сообщение отредактировал(а) Arantir - 11.12.2012, 13:04


--------------------
interface Жопа {
    // ATTENTION: has to be implemented by every class of the project for proper project work
}
PM   Вверх
MoLeX
Дата 11.12.2012, 13:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Местный пингвин
****


Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140



Arantir, у меня не срабатывает вот эта конструкция
Код

success: function(data)

   response($.map(data, function(item) 
   { 
      return {label:item, value:item} 
   }
}


то, что приходит я вижу и могу вывести через алерт
Код

success: function(data)

   alert(data);
}


а вот сделать сам выпадающий список не удается


--------------------
Amazing  smile 
PM MAIL WWW ICQ   Вверх
Arantir
Дата 11.12.2012, 13:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Рыбак без удочки
**


Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 3
Всего: 55



Да, извини, невнимательно прочел, ведь писалось что запрос выполняется smile 

А сама функция response выполняется? Может массив неправильно сформировался или он имеет неправильный формат.
Попробуй просто массив строк вписать:
Код
response(["abc", "dce", "efg"]);
Если выдаст эти строки, то надо пересмотреть метод формирования data для response.

Добавлено через 3 минуты и 43 секунды
По-моему синтаксис map неправильный. 
Код
jQuery.map( array, callback(elementOfArray, indexInArray) )
jQuery.map(arrayOrObject, callback( value, indexOrKey ) )
В обеих возможных вариантах callback принимает 2 аргумента, а у вас там один (item).


--------------------
interface Жопа {
    // ATTENTION: has to be implemented by every class of the project for proper project work
}
PM   Вверх
MoLeX
Дата 11.12.2012, 13:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Местный пингвин
****


Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140



к сожалению не выводит нечего(
точнее если страница запрошена обычным способом то все выводится, а если через ajax то нет. ошибок в консоли тоже нет


--------------------
Amazing  smile 
PM MAIL WWW ICQ   Вверх
Arantir
Дата 11.12.2012, 13:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Рыбак без удочки
**


Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 3
Всего: 55



А обязательно через ajax запрашивать? Нехитрую конструкцию
Код

<div class="redaktor" style="min-height: 480px;"><input id="autocomplet" type="text"  /></div>
можно динамически сформировать через js, а потом сразу для нее вызвать autocomlete. И это все завернуть в функцию. открывающую это всплывающее окно.

Код

function autocomletePopup()
{
    $('<div class="redaktor" style="min-height: 480px;"><input id="autocomplet" type="text"  /></div>').apendTo("body");
    $( "#autocomplet" ).autocomplete({
        source: function(request, response) { 
            $.ajax({
                url: '/ajax/autocomplete?q='+encodeURIComponent(request.term),
                dataType: "json", 
                success: function(data){
                    response($.map(data, function(item) { 
                        return { label:item, value:item } 
                    })); 
                }
            });
        },
        minLength:2
    });
}
И вместо ajax-запроса вызывать autocomletePopup().


--------------------
interface Жопа {
    // ATTENTION: has to be implemented by every class of the project for proper project work
}
PM   Вверх
MoLeX
Дата 11.12.2012, 13:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Местный пингвин
****


Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140



Цитата(Arantir @  11.12.2012,  13:40 Найти цитируемый пост)
 Нехитрую конструкцию

на самом деле там все более хитро(


--------------------
Amazing  smile 
PM MAIL WWW ICQ   Вверх
Aliance
Дата 11.12.2012, 14:44 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137



Есть возможность показать итоговый скрипт в сети?
PM MAIL WWW ICQ Skype   Вверх
MoLeX
Дата 11.12.2012, 15:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Местный пингвин
****


Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140



в личке


--------------------
Amazing  smile 
PM MAIL WWW ICQ   Вверх
ksnk
Дата 11.12.2012, 15:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386



MoLeX, Где-то я видел решение, когда из полученного текста регулярками выдирались в отдельный кусочек все javascript'ы из <script ...></script>, потом очищенный текст вставлялся, а со cкриптом делался execScript. В принципе - можно поискать, но и так вряд-ли больше десятка строк...

Подводные камни бывают с контекстом вызова это скрипта, но в классическом случае ajax'а execScript вполне подходит.


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
MoLeX
Дата 13.12.2012, 10:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Местный пингвин
****


Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140



решил проблемы формированием списка в ручном режиме. 


--------------------
Amazing  smile 
PM MAIL WWW ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Применение библиотек | Следующая тема »


 




[ Время генерации скрипта: 0.0941 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.