Изменение текста на основе страницы Выберите список выбора и запрос данных без перезагрузки страницы

Question

У меня есть список выбора на моей странице, и в зависимости от того, какой элемент выбран (каждый элемент является номером детали), текст на странице, который описывает размеры детали, должен измениться. Размеры каждой детали (диаметр, высота) указаны в дБ. Я вызываю запрос, используя cfquery.

Значения в списке выбора - это номера деталей в моем запросе. Я думаю, что у меня проблемы с получением необходимой мне информации из запроса без перезагрузки страницы.

Я ищу способ сказать: «Я щелкнул« Вариант 2 ». Получите Диаметр и Высота для« Варианта 2 »из моего запроса и поместите эти размеры в мой тег P».

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

Answer 1

Я согласен со вторым вариантом Бена. У меня есть приложение, в котором есть два раскрывающихся меню, в одно из которых возвращаются данные из запроса, вызванного первым меню.

Я предлагаю проверить jQuery, так как с ним немного проще работать: JQuery Ajax

При вызове страницы ColdFusion должна возвращаться строка. Вот пример jQuery, который я использовал:

$('#menu1').change(function() {

    <!-- Get the value of the dropdown menu -->    
    var selected = { menu1:$(this) .val()}       


        $.ajax({
            type: "POST",
            url: "the CFM file name",
            dataType: "json",              
            data: selected,
            success: function(response){                  

                <!-- if the response from the database is null set the result to "nothing found", else set it to the response -->
                if (response != "") {                       
                         $("#output").append(response);                                                 




                } else {
                   $("#output").append("nothing found");  
                }                                            

            }//end the success function

        });// end ajax call        

});    //end menu1 change function

Я изменил свой код, чтобы его (надеюсь) было легче понять. Надеюсь, это поможет.

Answer 2

Хорошо, я понял это.Я использую:

$('#foo').change(function () {
    $.get('getInfo.cfm', function (data) { $('#output').text(data) });
});

И в моем CFM мои данные возврата указаны в скобках cfoutputРаботает как шарм!Спасибо всем за помощь и предложения!

Answer 3

Есть в основном два варианта.Оба включают JavaScript.

Во-первых, все данные хранятся в большом массиве JS.Когда выбранный элемент блока выбора изменяется, этот элемент используется для поиска соответствующего элемента в массиве и отображения его в соответствующем элементе div (или в любом другом месте).

Второй вариант аналогичен, но вместо использования локальногокопия списка, вы используете AJAX для извлечения текста из CFC на вашем сервере.

Я бы использовал второй вариант, если есть несколько вариантов.Первый вариант отображает страницу медленнее (больше элементов, медленнее загрузка), но быстрее реагирует на изменения.Опция AJAX сделает начальный рендеринг страницы более быстрым, но вам придется ждать отключения сервера для отображаемого текста.Обратите внимание, что при использовании опции AJAX пользователь может выполнять другие операции во время загрузки текста.