Использование Javascript для отображения содержимого, которое присутствует в БД

Question

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

Я получаю информацию из таблицы с помощью PHP, которую я помещаю внутрь тега <select>. Всякий раз, когда я нажимаю на одну из представленных опций (строк), она должна загружать / показывать определенную информацию в ячейке, которая находится рядом с ней. Если я выберу другой вариант, он должен показать другую информацию (загруженную из базы данных).

Вот так:

Нажмите на категорию, показать информацию. На самом деле я должен иметь во второй ячейке другую подкатегорию, но я верю, что если я смогу решить этот первый шаг, то это будет вопрос применения его ко 2/3 ячейкам.

UPDATE: Я также рассматриваю возможность использования фрейма внутри этой ячейки, документа php, который перезагружается каждый раз, когда пользователь нажимает одну из опций. Это также жизнеспособно?

Answer 1

Вы должны сделать ajax-вызов к базе данных (конечно, через PHP), чтобы получить обработанные данные и заполнить их.

$('#category').change(function(){
    $('#problem').load('/url-to-fetch?selected=' + $('#category').val());
});

Приведенный выше пример сделан с использованием jQuery (хотя вы можете сделать это с помощьюлюбая js-библиотека или простой javascript).

Код говорит, что когда бы ни происходило изменение в выбранном значении категории, сделайте ajax-вызов к url-to-fetch, передавая выбранное значение, а затем покажите деталив области problem (при условии, что проблема - это идентификатор текстовой области).

Answer 2

В зависимости от того, сколько вариантов или данных имеется, я думаю, у вас есть 2-3 базовых подхода.

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

2) Вариант № 1 выше, вы можете загрузить все свои данные в некоторый массив JS, а затем поместить элементы массива в задачу и решение при выборе категории.

3) Если у вас слишком много категорий, вы можете использовать AJAX-вызов, чтобы выполнить запрос mySQL (через PHP) и заполнить ячейки «Проблема» и «Решение» результатами вызова.

Надеюсь, это полезно!

Answer 3

Если вы не возражаете, поддерживая только клиентов с включенным JavaScript, вам нужно будет Ajax . Совершенно возможно делать вещи Ajax с необработанным JavaScript, но я настоятельно рекомендую использовать библиотеку типа jQuery , Prototype или Closure .

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

Вот пример использования jQuery: http://jsbin.com/agipu4

... и один, использующий прототип: http://jsbin.com/abido3

... но опять же, вы можете сделать то же самое с Closure или любым другим (или, опять же, используя только сырой JavaScript и объект XmlHTTPRequest и методы DOM напрямую).