По начальным буквам выдает список городов с использованием Ajax

Содержание

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53467a208f0d8e59 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Javascript → Создаём зависимые списки с помощью jQuery и AJAX

Зависимые списки — это два и более select-a, в которых список одного select-a зависит от выбранного значения другого. Например выбрав в первом списке страну, второй список заполняется городами выбранной страны.

Такой приём очень популярен ВКонтакте и других соц. сетях.

Сейчас мы создадим простой зависимый список ОбластьГород.

Для начала нам понадобится список областей и городов в формате

Создаём два select-а, в одном будут области, в другой будут подгружаться города:

При выборе области, сработает функция loadCity , которая подгрузит список городов. Определим её:

Ну и php скрипт который отдаст в JSON формате список городов конкретной области:

Примечание: все файлы должны быть в кодировке UTF-8 without BOM, а сервер должен отдавать заголовки с правильно указанным charset (для этого в исходниках есть файл .htaccess).

Комментарии

а нельзя ли рассказать как это должно выглядеть в Smarty

так и должно выглядеть :) только при формировании html, вместо php-шного foreach нужно использовать свой

млин я даже массив не могу построить
может поможете

вам не обязательно иметь формат массива как у меня в файле city.php, можно сделать так:

ну это мы получили только список стран, а где теперь выбрать список городов соответственно к странам(

в том месте где обрабатываете AJAX запрос:

xandeadx, не поможете реализовать данный пример с db. Опять застрял.
В постах видел элементы работы с db? но включить не получилось. с утра парюсь.
В предыдущем посте я выставил «битые исходники» — не могли бы Вы дополнить их .. как надо правильно. Наверное, этот вариант был бы интересен многим, не только мне.
Заранее благодарен за помощь и понимание!

в чём конкретно сложность? там же всё элементарно, вместо подключения файла city.php делаете запрос к бд

Есть старая таблица — «дерево». Я хотел в левую часть(списка) поместить категории в правую подкатегории. Если заменить вместо обычного массива – один запрос к базе . (тут не получается создать тот многомерный массив как у вас) , хотя бы потому что нужно делать 2 запроса
Выводил по этому принципу: $include_array[$row[‘ ];
Мне кажется было бы логичней с помощью одного запроса выводить в форме первый селект.
А вторым запросом – подгружать. Не знаю как правильно решить данный ребус.
P/S –с двумя запросами я не справился.. первый, нормально заполнил селект. А второй запрос смешиваясь с JS – не загружается..
Если есть время и не сильно озадачил, помогите пожалуйста. Спасибо.

Скажите, а возможно ли реализовать ..например, тройной селект? Если да, то каким образом?
по идее, как только образовался втрой id — можно сразу «проявить» третий. :)
мысленно вроде не сложно, но нет сил в query

возможно ли реализовать ..например, тройной селект?

Скажите, как сильно влияет кодировка при работе с jquery. Я смотрю все сплошь и рядом используют utf8. Хотел сейчас попробовать прикрутить в один из своих проектов, пока не работает.. вот и возник вопрос, может ли не работать данный пример если будет в стандартной — 1251 — а мы туда втискиваем js(utf8). Под «не работает» я подразумеваю полностью не нерабочий пример! ..а не просто битый текст. :)
И как правильно поступить если все построено на — 1251. ..прокладки? mysql_query(«SET NAMES ‘utf8′»); — мне кажется тоже не вариант. :)

Здравствуйте!
Появился вопрос: если выбрать значение в первом селекте, а потом выбрать обратно пустое, то второй селект не возвращается в «disabled», как можно поправить этот недочет?

еще возник вопрос: можно ли как-то установить начальное значение для первого и второго селектов? Например, в первом: Московская область, во втором Москва.

либо при генерации html указать selected=»selected» , либо на клиенте выбрать с помощью js

Спасибо за скрипт! Но есть одна проблема, которую ни как не могу решить! Дело вот в чем: взял исходник, воткнул на сайт, проверил в Mozilla все работает. Открываю через IE, выбираю область, а он не подгружает города т.е. список городов остается disabled, в чем может быть причина? Это может быть из-за того, что не использовал файлик .htaccess? Заранее благодарю)

Решил прописать по другому как на сайте http://www.html.by/showthread.php?t=8789
Наверное у меня что, то с ajax запросами раз они не отображались в IE

Ковыряюсь с тройным селектом уже третий день (ничего не понимая в js). Толь лыжи не едут, то ли я . Помогли бы реализовать, хоть вектор указали б. Все чайники рунета поблагодарили б.

если нет необходимых знаний, пользуйтесь готовыми решениями

Огромная благодарность автору за прекрасную статью. Жаль что он не знает реализацию третьего селекта (или искуссно это скрывает), впрочем как и многие блогеры. Статья подтолкнула меня на изучение джавы. Научусь и тоже пальцы загну. :-)

Скажите, а как можно уведомлять пользователя когда идет загрузка?
Обычно это анимированная gif-картинка. Не могли бы вы показать на своём примере?
Спасибо.

Исходники я смотрел, данный пример, за который благодарен, прикрутил.
В нужном месте добавил div, в который будет грузиться gif-картинка.

как то выборочно смотрели ;) вместо citySelect.attr(‘disabled’, ‘disabled’); показываете анимацию, вместо citySelect.removeAttr(‘disabled’); прячете. там даже комментарии есть

Я уже скрестил с другим подобным скриптом, там как раз анимация по таймеру. Но структура массива для списка городов, мне показалась сложной (каскадная вроде называется).
Так что оставил ваш пример, ничего не меняя, перед очищением списка городов добавил:

Пытаюсь сделать в Друпале 6.

Возник вопрос: у меня словарь с разной глубиной уровня вложенности.
Словарь предназначен для рубрик каталога.
Можете подсказать как сделать такое?
Третий день бьюсь над вашим кодом.

З.Ы. не пинайте в живот, я только учусь )))

С этим модулем я работал.
На форуме говорят, что от него невероятно растет размер базы.
Да и к тому же, он позволяет выбрать из словаря для конкретной типа ноды.
Мне же надо построить связь: Выбираем рубрику из словаря -> загружается новая нода.
Для каждой рубрики — свой тип ноды.

Когда выбираю обл. где городом появляется [object DOMWindow]
Подскажите пожалуйста, в чем проблема?

У меня кодировка cp1251, если альтернативный выход из ситуации?

Для тех у кого не работает с кодировкой ср1251, измените кусок кода:

echo » . iconv(‘UTF-8’, ‘WINDOWS-1251’, $region) . » . «\n»;
>
?>

Когда выбираю обл. где городом появляется [object DOMWindow]

Такая же проблема, что делать? База в cp1251.

Как можно приделать еще 3 список с выбором страны? Подскажите пожалуйста. Пробовал сделать сам не получается.

Сделал, как вы писали про :

if (citySelect.find(‘option[value=0]’).text() != ‘Выберите область’) <
citySelect.removeAttr(‘disabled’);
>

citySelect.html(»); // очищаем список городов

// заполняем список городов новыми пришедшими данными
$.each(cityList, function(i) <
citySelect.append(» + this + »);
>);

if (citySelect.find(‘option[value=0]’).text() != ‘Выберите подкатегорию’) <
citySelect.removeAttr(‘disabled’); // делаем список городов активным
>
>);

Почему то не работает, не подскажите?

Тут писали : если выбрать значение в первом селекте, а потом выбрать обратно пустое, то второй селект не возвращается в «disabled»

И выбор во вторую select идет из базы, где p >

Подскажите, если я знаю город пользователя, как его сразу выбрать, чтоб и регион сразу был верный?

Добрый день xandeadx! урок получился, только один небольшой нюанс, когда выбираешь выбираешь 0 элемент то в списке городе пишется Object Window, подскажи где копать? думал добавим примерно такой код решится, увы нет. жду вашего отклика. сапсибо заранее if (regionSelect.selectedIndex == 0) citySelect.attr(‘disabled’);

Илон Маск рекомендует:  $L - Директива компилятора Delphi

у меня при выборе города, в базу вводится не название города, а цифра, которая ему присвоенная. что я не так сделал? я в этом деле новичок.

Как это к фильтам views прицепить(или сделать вместо них)? Все сделал, кнопка выводит данные в url (get прописал), но проблема в том, что если фильтрация по этим параметрам, которые я прописал, отключена в views, то и у меня не работает. Что делать? Может в коде views покапаться? Заранее благодарен!

Ага, подскажите, пожалуста, как подобную шнягу прикрутить к фильтрам для 7 друпала, а если точнее, то как все это соединить в рабочем фильтре хоть с помощью hierarchical Select, хоть с помощью Conditional Fields?
Ибо ни тот ни другой модуль со вьюхами работать не хочет.

Гость, который, как и я про views интересуется. Я нашел как прицепить это к views, только чуть-чуть другим способом, отпишите на почту мне, объясню. (petrovforz44@gmail.com)

Здравствуйте!
У меня вот такая вот задача: реализовать такую структуру:
выводиться первый список, где выбирается номер квартиры, при выборе определенной квартиры во втором списке высвечиваются все ее жители и на страничке вместе с этим выводиться информация о квартире(площадь, номер дома этажа и т.п.), а когда выбираешь во втором выпадающем списке определенного жильца появляется подробная информация о нем.

Информация о квартире и жильцах храниться в БД mysql в 2х таблицах:

табл квартиры:
id_kv____etag____kolvo_komnat .
1________1_______2
2________4_______3
. _______. ______.

табл жильцы
id_people____ id_kv____ last_name___name .
1 ___________1_______.
2 ___________1_______
3 ___________1_______
4 ___________2_______
5 ___________2_______
. __________. _______

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

Приветик всем!
Мучаюсь с подобными выпадающими списками на Drupal 7.
hierarchical_select со Views в Drupal 7 работать упорно не желает. Попытался замутить с Conditional Fields в совокупности с Views Dependent Filters. Вроде как получилось, но не так чтобы хотелось.
Дело в том, что при создании ноды работа Conditional Fields вполне устраивает, а вот при отображении фильтров поиска во Views 3 требуется сделать так, чтобы при начальной установке значений фильтров и при возвращенни к опции «Выбрать все» первый зависимый фильтр не просто был скрывался от показа посредством придания свойства div в обвертке фильтра как display: none , а отображался, но с опцией не для обвертки div, а для самого элемента select с опцией disabled=»disabled».
Не подскажете что лучше с этим сделать, может дополнительный javascript, который будет перезаписывать результаты?

Попытался, возможно нерационально, но как умею, решить задачу приведенную выше, но не совсем получилось.
Итак, имеем в Drupal 7 один список стран (field_region_value) и четыре списка зависимых от страны городов (field_region_1_value, field_region_2_value и т.д.) в виде блока раскрытых фильтров.
Подключаем следующий код к нашему сайту:

Примерно 3 месяца назад мучался с такой же проблемой динамически выпадающих списков. Могу сказать одно, если создаешь сайт, т о сам должен создать такой скрипт для своего проекта. Поверьте, крайне легко он создается. Причем делать нужно его с помощью Query. И ни каких проблем с кодировкой. Можно делать тройные, десятерные списки. И немножко PHP нужно знать. Поэтому, господа, помучавшись с кодом, отправляйтесь учить Query и чуть-чуть JS, При нормальном процессе через месяц, будете создавать скрипты, не хуже этого. Кстати, автор предлагает не самое верное и легкое решение этого вопроса

Здравствуйте ! Во-первых, спасибо за отличную статью! Оч полезно. У меня вот какой вопрос. Всё это реализовать у меня удалось, отдельно. Только начал вставлять в конкретный сайт — не работает. Делаю всё то же самое. Проблема — не появляются области, не из чего выбирать. Посмотрел исходный код, на месте областей пишет:

b>Warning: Invalid argument supplied for foreach() in /home/s/ru/public_html/1/add-1/add-1-step-1-new.php on line 657 чт 11/10/2012 — 06:34 #

Как получить то вместо цифр районов их названия?

WeberSoft

Блог о web технологиях

Связанные списки с использованием Ajax и MySQL

Рано или поздно каждому разработчику веб-приложений придется столкнуться с использованием связанных списков на сайте. Эта статья рассказывает о том, как с помощью технологии AJAX сделать связанные списки с БД MySQL удобными для пользователя. Связанные списки это два или более списка. Выбор значения в одном из них влияет на содержание остальных.

Такие списки очень удобны, если вам надо выбрать некий объект с определенными характеристиками. Благо на текущий момент существует множество готовых решений, от самых простых, до более сложных, работающих с использованием БД MySQL. На примере одного готового решения мы разработаем связанные списки «Страна — Регион — Город» для нашего сайта. Данные мы будем выбирать из базы данных.

Отрисуем форму для наглядности:

Что нам необходимо?
При выборе страны, послать AJAX запрос на сервер, получить список регионов в стране и подставить во второй селект, после чего исходя из выбора второго селекта подгрузить данные в третий.

Что мы для этого сделаем?
Необходимо повесить обработчик события onchange на select с >

Наше так называемое веб-приложение будет состоять из двух частей: бэк-энд и фронт-энд (серверная часть и клиентская). Как многие уже догадались, за клиентскую часть отвечать будет javascript, а за серверную — php.

Здесь описана с подробными комментариями функция, которая будет вызываться при выборе страны и региона:

selects.js — файл функций для выбора селектов

Как мы уже договорились, бэк-энд будет на php. Для начала нам нужно подключиться к базе данных MySQL: (саму базу можно взять тут)

Выбор города. Простой скрипт для любого сайта.

Частенько возникают ситуации, когда для сайта необходимо сделать форму, с помощью которой пользователи смогут выбирать города-представительства и видеть некую специфическую информацию, характерную для выбранного города. В сети есть несколько готовых решений, основанных на платных и бесплатных базах, на YandexAPI, GOOGLEAPI и других, но порой нужно максимально просто и быстро прикрепить к сайту возможность смены локации и соответствующей информации. И у нас есть решение этого вопроса!

Скрипт-модуль выбора города (страны или региона)

Сразу оговоримся, что этот скрипт-модуль можно применить для любого интернет-ресурса, на котором используется свежая библиотека jQuery (версии выше 2). Его можно разместить в коде нужной страницы сайта в любом расположении: в шапке, в боковом правом или левом меню, в подвале сайта. Если на ресурсе используется какой-либо движок (CMS, система управления содержимым), то вставку можно произвести через использование виджета «HTML-код».

Полный листинг кода скрипта выбора города для сайта:

Далее, подробно разберём этот код.

Список выбора региона, страны или города

Первое, что нужно сделать — указать список локаций, выбор которых вы хотите возложить на плечи пользователей. Делается он с помощью специальных тегов в этой части кода:

Если нужно больше локаций — добавляйте, но делайте уникальные ID — они нам пригодятся. Далее, указываем в нужном месте информацию, которая будет выводится в зависимости от выбранного города (ВАЖНО! Указывайте классы с таким же названием, как и в ID select-а):

Обратите внимание, вложенные блоки основного контейнера будут скрыты с помощью:

Jquery магия

Теперь начинается та самая магия. С помощью jQuery скрипта мы будем показывать блок с информацией в зависимости от выбранного значения SELECT. Плюс ко всему, запишем наш выбор в LOCAL STORAGE (локальное хранилище браузера — «аналог» cookies, который позволит запомнить выбор пользователя при перезагрузке страницы или перехода на другую страницу нашего сайта):

В общем-то всё! Размещаем код, сохраняем и любуемся. Если будут вопросы — пишите в комментарии.

ТЕСТ:

Выбор города:

  • Письма с формы обратной связи в контактах Opencart 2 Май 22, 2020
  • Перенос строки в атрибутах OpenCart Май 15, 2020
  • Модуль «Генератор пароля / Отображение вводимого пароля 1.0.1» для Opencart Апрель 25, 2020
  • Ссылка на первоисточник при копировании информации с сайта на Opencart и OcStore Февраль 21, 2020
  • Улучшение стандартного слайдера Opencart 2 Ноябрь 22, 2020
  • Вывод количества товара в категории Opencart 2 Ноябрь 13, 2020
  • Как настроить и установить счётчик Яндекс.Метрики на сайт Октябрь 23, 2020
  • Title, Description и Description на странице «Контакты» OpenCart 2 Октябрь 4, 2020

Также подслушано:

Комментарии

Огромное спасибо за рецепт — я прям воспрял духом решая проблему «Выбор города» на простеньком сайте.
Но никак не получается с помощью предложенного подхода решить задачу «выбрал город в одном блоке страницы — в остальных (двух) блоках отображается сделанный выбор».
Т.е. на одной странице работают три копии этого скрипта (и работают хорошо), но работают независимо (каждая копия использует свою запись «LocalStorage» — иначе у меня не получилось).
А мне позарез нужен функционал «пользователь выбрал город один раз и его выбор отображается в трёх блоках каждой страницы сайта с возможностью поменять город в каждом из блоков» (блоки «город + соответствующий номер телефона» повторяются на всех страницах сайта по три раза).

Здравствуйте. Хочу по благодарить за данный код. Было бы круто если бы изначально город автоматически определялся

Автоматический выбор города — это, на самом деле, плохо. Представьте, робот зайдёт на сайт. Что ему будет отдано?

Спасибо, отличная статья. Вот только не могу разобраться с выводом. Выпадающий список городов появляется, а вот номера телефонов и города при выборе из списка нигде не отображаются? Подскажите как их выводить?

Илон Маск рекомендует:  Что такое код swf_endshape

Скопируйте все строки из примера себе и посмотрите как работает. Обратите внимание на стили.
Скорее всего у вас конфликт в скриптах.

Благодарю за ответ. Изначально скопировал все строки вашего примера. И помимо выпадающего меню с городами ничего не отображается. Стили смотрел, конфликтов нет.

Как считаете в чем еще может быть загвоздка?

Спасибо разобрался, проблема была в jquerry.
Подключил для теста
и всё заработало на УРА!
Благодарю за статью.

Список городов при оформлении заказа

Здравствуйте!
В текущем исполнении клиенту предлагается заполнять город от руки. Некоторые модули доставки от этого работают некорректно. Например, могут не посчитать, что москва = Москва.
К тому же, бывает в городе опечатка.
Даже если она исправляется на стадии Доставка, в итоговую форму почему-то попадает информация в которой стоит
Доставка — 0 руб.

Подскажите как сделать выбор города заданным из списка SELECT или иное решение проблемы.
Спасибо

4 ответа

Для решения данной проблемы, нами был разработан плагин Автоопределение и выбор города, который существенно облегчает ввод адреса при оформление заказа

А что происходит если человек из другой страны? И ему магазин тоже продает и хочет продавать?

Как решение для модулей, это выводить список ПВЗ для Областей, которые можно выбрать из списка.

Список ПВЗ любой области намного меньше чем список отдельно Питера или Москвы.

Таким образом минимизируется количество ситуаций где можно накосячить, и придумать ошибки.

Более удобной для пользователя, на мой взгляд, была бы возможность начать писать название города, а AJAX-скрипт предлагал во всплывающей подсказке варианты, соответствующие набранному фрагменту. Чем дальше пишет пользователь, тем точнее подсказки. Когда появится подходящий вариант, пользователь выбирает его из списка, и он подставляется в текстовое поле.

Прикрутить это можно путём привязки к событиям поля для ввода города с помощью jQuery. А AJAX-запросы для получения подсказок направлять на контроллер вашего плагина, который для этих целей придётся написать и который должен уметь искать названия городов по фрагменту, полученному из браузера.

Связанные списки select с получением данных по ajax

В прошлый раз я показывал как можно «на лету» создавать списки html select, данные которых содержались в специальном javascript массиве.

Подготовить такой массива не самая приятная работа, да и место данным, я считаю, в базе данных. Потому логичным продолжением темы с динамически создаваемыми связанными select является пример работы с запросом данных по мере необходимости асинхронно с сервера по средством ajax.

База данных

Начнем с создания структуры данных.

Мне поднадоел пример с картриджами, и сегодня я буду работать с некой военной базой данных видов вооружений.

Для этого я создал две таблички — tree и items.

Таблица tree будет содержать иерархию связанных пунктов для выпадающий списков.

treeID — ключ, pID — указатель на родительский пункт, label — текстовая метка для выпадающего списка, а objID — указатель в таблицу items, для конечных элементов дерева.

В таблице items мы разместим описания видов вооружений.

Описание весьма условное. Кроме ключа в таблице есть title — название вооружения и какие то два параметра, которые мы вообще никак не характеризуем. :)

HTML код

Мы подключаем библиотеку jQuery и класс — TSEL, создающий связанные списки. TSEL работает с двумя HTML контейнерами, идентификаторы которых мы передадим при инициализации TSEL. Третьим параметром будет url к файлу сервера для обработки ajax запросов.

Javascript создающий списки

Файл tsel.js, подключаемый в секции head содержит класс-функцию объекта, который запрашивает данные на сервере и создаёт в нашем документе связанные выпадающие списки.

Давайте рассмотрим его, не вникая в подробности реализации.

Я не стал полностью приводить код, постарался описать его логику. Файлы примера, а также скрипт базы данных вы найдете в архиве в конце статьи.

Мы имеем дело всего с пятью функциями. Две из них грузят и показывают очередной уровень select-а, ещё две — делают тоже самое для карточки вооружений. А оставшаяся функция реализует логику : какую пару задействовать при выборе пункта списка.

PHP код, реализующий работу сервера

В PHP у нас производится отработка команд клиента, запросы к базе данных. Запросов всего два:

  • вернуть список опций ветки дерева, по указанному айди родителя (команда load-brunch),
  • вернуть данные об единице вооружения (команда load-object).

Надеюсь, загрузка данных пояснений не требует. :)

Результат

Как видите, я не использовал никакого оформления. Максимально сократил анализ ошибок и коллизий, связанных с асинхронностью запросов. Пример можно развивать и улучшать как того требует уже ваша задача.

Мне не хотелось создавать лишние таблицы в базе сайта. Потому я ограничусь комментариями к скринам.

Сразу после инициализации появится первый из выпадающих списков. Как видите, он состоит из названий видов вооружений.

Выбирая варианты, вы будете открывать следующий уровень. Я выбрал guns (надо было назвать его cannons или artillery :)) и получил следующий набор вариантов — это уже конечные элементы в моем примере.

Потому при выборе одного из пунктов загрузились данные объекта.

Если с пунктом не связан объект, а также не удалось найти дочерние элементы списка — выскочит alert с надписью — «Ветка пуста!».

Вложенность ничем не ограничена. Кроме того, ветки и листочки могут располагаться на одном уровне.

Архив файлов и скрипт базы данных.

Архив содержит 5 файлов:

Настройки подключения к вашей базе данных введите в файле db.php. Скрипт для создания таблиц и дамп данных — в test_base.sql. Остальные файлы вы уже знаете.

Данная запись опубликована в 15.12.2020 23:06 и размещена в jQuery. Вы можете перейти в конец страницы и оставить ваш комментарий.

Мало букафф? Читайте есчо !

Ajax в Drupal 7

Расскажу про использование техники ajax в рамках движка Drupal. Начнем с теоретических моментов. Во-первых, чтобы получить какие то данные с веб-сайта под Drupal, нужно чтобы соответствующий адрес существовал на сайте. Во-вторых, нам не хотелось бы .

Обмен данных Angular с бек-энд на PHP

Стоит ли рассказывать, что Ангуляр при всей своей прелести лишь одна сторона медали — frontend, который как то должен взаимодействовать со второй половинкой .

Комментарии к «Связанные списки select с получением данных по ajax»

Понравилась статья? Есть вопросы? — пишите в комментариях.

Много комментариев в “Связанные списки select с получением данных по ajax”

Классную штуку вы написали, но всётаки я не пойму, а если у меня не 2, а 3 или 5 таблиц в БД, то как мне поступить? Вы говорите что скрипт ваш сам ищет вложенность… но это получается не вложенность, а просто разные таблицы. Та куда вписывать запрос обращения к другим таблицам?
case ‘load-brunch’:
тут выбираем из одной таблицы
case ‘load-object’:
выводит данные на экран

а как выбирать из остальных таблиц, если они есть?
Спасибо заранее за ответ.

Можно не разделять таблицы items и tree, такое разделение предпочтительно в плане нормализации данных. Потому речь идет не о 2х таблицах, а по сути об одной — tree.

Таблица tree нужна для хранения иерархии объектов (в данном случае в виде дерева). В ней мы связываем дочерние и родительские элементы. Каждому элементу дерева сопоставляем pID — parent ID или родительский ID. Т.е. нам не нужно 100500 таблиц для хранения иерархии дерева — нужна всего одна.

Если нужно иметь несколько «объектных» таблиц (items), связанных в одном дереве, то простейшее решение — добавить в tree еще один столбец — entity_type , который будет указывать тип сущности для ObjID .

ну всеравно я не пойму как оно подтянет данные из третьей таблицы
вот у меня есть 3 таблицы
brands (id, brand_name)
models ( > autos( >

т.е. у меня все три таблицы имеют связь по id, но всеравно чтоб получить данные из каждой, я даю запрос к каждой, и выпадающий список строю сначала из первой, потом из второй на основании первой, а потом третья на основании второй.
Вот я и не пойму как это реализовать. Или мне надо создать ещё таблицу в которой будут указаны все id и ссылки на дочерние таблицы?

:)
Можно начать с добавления столбца типа объектов в таблицу tree. Второй шаг — адаптировать к работе скрипт, т.к. нужно передавать на сервер дополнительно параметр типа объекта, чтобы программа знала из какой таблицы брать данные. Но надо подумать нужно ли это в вашем случае?

Можно ведь обойтись таблицей autos, объекты которой является конечной целью выбора.

Например, у нас есть два бренда — Audi, BMW, по одной модели в каждом и 2 машины, вот как примерно выглядит дерево (tree):

treeID|pID|label|objID
1|0|Audi|NULL
2|0|BMW|NULL
3|1|A3 Sedan|NULL
4|2|BMW X4|NULL
5|3|A3 Sedan 2015 б/у|1
6|3|A3 Sedan 2020 новая|2

А это таблица autos:
ID|title|descr
1|A3 Sedan 2015 б/у|эта машинка уже с пробегом
2|A3 Sedan 2020 новая|а эта новьё

Вам не надо связывать нижние уровни дерева с какими либо объектами — они служат как бы для навигации.

ладно, попробую сейчас вырастить дерево…
хотя, на мой взгляд, с точки зрения хранения данных… разные таблицы всё же лучше, а так всё свалено в одну…в одно дерево.

Дерево хранит данные не о сущностях, а о об их иерархии. Сущности — отдельно, структура связей между ними — отдельно. Ценность словаря брендов не меняется.

Если у вас есть уже какая то сложная база данных с взаимосвязами объектов, и иерархию можно рассчитать используя эти связи, то таблица tree заполняется (рассчитывается) благодаря этим данным.

Илон Маск рекомендует:  Сайт на php с базой данных и админкой

собрал дерево…
проблема в следующем, не могу запустить даже ваш пример
вылетает ошибка «Shit happens! error»

Попробуйте запустить проект, разместив его в рамках какого то веб-сервера. Можно взять Denver или OpenServer. А то, мне кажется, вы просто распаковали файлы в случайную папку и жмете на index.html ;)

А еще нужно создать базу данных и настроить к ней подключение…

#Попробуйте запустить проект, разместив его в рамках какого то веб-сервера. Можно взять Denver или OpenServer. А то, мне кажется, вы просто распаковали файлы в случайную папку и жмете на index.html ;)

А еще нужно создать базу данных и настроить к ней подключение…#

ахаха ))) вы думаете я совсем чтоли? )))
Denwer c MySQL всё установлено, базу вашу залил. но не работает. Сейчас появилась возможность попробовать на другом компе, счас отпишусь что получилось.

вот скрин посмотрите, это уже на абсолютно другом компе
http://picua.org/?v=2020-06-03_zk2b0h5xtf452j02yobzb2en7.png
ошибка та же

На вкладке браузера network посмотрите, что с сервера приходит при ajax запросе. Ошибаться там в php, по сути негде, возможно, в php выключена поддержка коротких тегов (допишите вместо Graf_vorontsov :

ошибка у вас в коде была, наверное случайно слэш поставили
ajaxUrl: «ajax.php»>);
а было так
ajaxUrl: «/ajax.php»>);

и оно не находило этот файл
сейчас заработало когда слэш убрал

Ну, отлично, не зря столько писанины :)

Здравствуйте.
А как передать значения выбраных селектов, это возможно?(отправить, записать, вывести текстом в другом месте)

Зависимые списки select с помощью AJAX. Часть 2

Дата публикации: 2020-10-27

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим реализацию зависимых список с использованием AJAX. Напомню, в предыдущей статье мы подготовили базу данных и вывели из нее список стран. Теперь нам необходимо при выборе страны отправить ajax запрос на сервер и получить список городов, который мы и должны подгрузить в зависимый список select. Продолжим.

Исходные файлы текущей статьи вы можете скачать по ссылке.

Первое, что я хочу сделать, это скрыть список городов до выбора страны. Смысла показывать пустой зависимый список нет, поэтому будет логичным его скрыть. Для этого дадим дополнительный класс city-select блоку в котором находится список городов и скроем этот класс:

Пример живого поиска на ajax

Как работает живой поиск

Файл search.js

Обработчик запросов search.php

Благодарю за оперативность.
Прописал следующий код ниже формы, результат не передается.

В чем может быть ошибка?

Привет!
У меня вопрос к тебе есть! Если ты конечно еще отвечаешь)))
Живой поиск настроил отлично и огромное тебе спасибо за него, но есть один нюанс.
Поиск должен работать с гугловской апишкой карт и при нажатии на элемент выдачи должно центрировать карту этой записи
Из базы данных тянем соответственно запись по запросу , например:
| seattle |
В выдаче получаем например несколько строк.
В каждой строчке в выдаче есть информация о адресе,названии и т.п.
Но в базе есть еще поля lattitude и longitude
Как мне прикрутить в экшене
$(«.search_result»).on(«click», «li», function() <
s_user = $(this).text();>

данные из бд и прилинковать в такую конструкцию?

var pos = <
lat: [some data],
lng: [some data]
>;
map.setCenter(pos);
>);

Если можешь, ответь мне на емейл?
twitter_work_one@mail.ru

не подскажете почему не могу подключиться к бд ?

пароли/имена все правильно

Вы же нигде не определяете эту переменную, сами сказали.
Вот так нужно:

ну или определить переменную выше:

А если проверить настройки css?
Вставить например для проверки

Код вставить на проверяемую страницу html.
Тогда будет видно ищет или нет.

Второй вариант — проверить в какой кодировке сохранен файл

Привет, а ты заменила строку:

в файле search.php ?
Нужно заменить поле name, что бы была выбрана информация из поля name из таблицы бд.
Если не работает, напиши в личку свой скайп и я помогу.

Спасибо, Владимир, за оперативную профессиональную помощь!

Владимир сделал 3 исправления и все заработало :)

1) — имя поля таблицы
я вместо имени поля указала имя таблицы.

2) в файле search.php — установили кодировку UTF-8 вместо UTF-8 (без BOM)

3) в корень тестового сайта добавили файл .htaccess, в котором указали кодировку по умолчанию

Все работает! Завтра повторю все эти манипуляции на работе, не сомневаюсь что и там теперь тоже все заработает.

Еще раз спасибо :)

Я понял, сейчас займусь

Зарегистрировался. Вроде ник — rikoff2009@yandex.ru
Скайпом раннее не пользовался, поэтому если не получится соединиться, пожалуйста, отправьте свой ник по почте, а я отвечу

В файле search.js стоит

Можно убрать его. Только он скрывается по клику, а не при наведении.

Ваш вариант работает корректнее чем

Невозможно что то выбрать из списка, сразу все поле исчезает

Добавьте в конец страницы .
Создайте стиль для этого класса, например:

Что-бы показать чёрный прозрачный фон, добавьте в нужное место скрипта jquery код:

есть код покороче.

к нему я еще добавил

код взят с Пишем свой простой вариант «живого поиска» . — только запустить у меня его не получилось. :-(

Вариант что вы посоветовали, не совсем то что мне нужно.
этот вариант у меня сначала закрывает «затемнение» а при 2-м клике уже убирает подсказку. я хотел что бы было как в модульных окнах, при 1м нажатии на затемнение все исчезает. Немного погодя додумаю что то попроще, когда с мыслями соберусь :-)

затемнение при поиске:

Пользуюсь этим скриптом уже довольно долго. Перед тем как выбрать самое лучшее решение «живого поиска» перелапатил много разных скриптов и с уверенностью могу сказать только одно — данный скрипт мал в объеме, прост и понятен (исходя из того что он делает). Как на мой взгляд необходимо было бы добавить парочку мелких доработок для улучшения восприятия людьми, такие как:

1. вывод не только наименования, но и цены, артикулы, картинки (смотря для каких сайтов).

2. добавить в код ограничение по выводу и сортировка по. (ORDER BY name LIMIT 15) кол-ва результатов, с дополнительным выводом фразы «просмотреть все» (то что не вошло в лимит поисковых результатов).

3. при отсутствии найденных результатов выводить информацию («поиск ничего не дал», «повторите ввод символов», . и т.п.)

4. добавить возможность исчезновения результатов поиска когда мышь не в фокусе или хотя бы по средствам кнопки «esc» (а то бывает что пользователь передумал что то искать, а результат висит как банный лист).

5. добавить возможность перемещаться с помощью кнопок клавиатуры по найденным результатам (вверх, вниз).

6. самое главное что бы можно было бы добавить, так это возможность при поиске выбирать части вводимых слов, а именно по разным (не по порядку) выбором слов в наименовании, например — («Электрочайник Delonghi KBZ 2001.GY Scultura Collection») можно было бы его найти по написании фразы в поиске «Delonghi Scultura» — что то вроде автодополнения, т.е. после нажатия на пробел появляется возможность поиска уточнений в уже найденных товарах.

Пишем свой простой вариант «живого поиска».

Сегодня я напишу статью, о том как сделать простую версию так называемого «живого поиска». Для тех кто не в курсе, живой поиск — это когда при вводе искомого текста, появляется подсказка, с возможными вариантами. Примером тому служит Яндекс и Google.

По сути «живой поиск» это обычный AJAX скрипт, который обращается к базе данных, производит в ней поиск, и возвращает ответ скрипту. Для работы поиска я буду использовать Jquery.

Итак, создадим простую форму поиска:

Обратите внимание на autocomplete=»off» у input’а, это для того чтобы отключить подсказки браузера, которые он показывает при повторном наборе текста в форме.

Теперь займемся созданием javascript скрипта.

Я постарался описать этот скрипт по максимуму в комментариях. По сути скрипт делется на несколько частей:

  1. Считываем ввод с клавиатуры, получаем данные из базы данных и выводим их
  2. Делаем скрытие слоя с подсказками, при нажатии на Escape и Enter
  3. Делаем переход по слою с подсказками, через нажатие стрелок клавиатуры ( вверх и вниз)
  4. Скрытие слоя с подсказками при клике на поле сайта и открытие его при клике на input
  5. При клике на подсказку мы вписываем слово в input поиска и прячем форму подсказки.

PHP + AJAX :: Простой скрипт асинхронного получения города посетителя по IP

Сегодня рассмотрим простой скрипт получения города пользователя асихронно (с помощью Javascrip после загрузки страницы).

Почему именно так?

Если мы решим использовать только PHP & curl и на сервере, откуда мы получаем информацию произойдет сбой, и он будет долго отвечать, наша страница будет долго грузиться, или же вылетит с ошибкой.

А так пользователь уже видит страницу, а мы себе делаем то что нужно.

Для получения информации и пользователе будет использовать сервис sypexgeo.net.

После получения сохраним город в Cookie на 30 дней, и дальше можем брать его оттуда.

И дальше, например при отправке заявки пользователем, мы вытянем город в PHP и $_COOKIE

Примечание: город посетителя может быть неточным, особенно при использовании мобильных устройств.
Для большей точности можно использовать это. Но при этом пользователь должен подтвердить передачу своего местоположения в ваш скрипт.

Надеюсь, статья была Вам полезной!)

Если вам понравился данный материал, пожалуйста, нажмите на кнопку от лайка
(находятся ниже) – чтобы о нем узнали другие люди.
Буду вам очень благодарен! Спасибо!

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL