Как передать значения формы для заполнения параметров запроса без обновления в ColdFusion

Question

Я ищу толчок в правильном направлении!

У меня есть страница ColdFusion с формой, которая динамически заполняет 3 выпадающих списка, используя javascript (вызывая функцию на странице .js, которая по очередииспользует Ajax для вызова другой страницы .cfm, которая указывает на хранимую процедуру ... и затем, в конечном итоге, возвращает результаты обратно на мою исходную страницу и заполняет следующее поле выбора - это удерживает страницу от необходимости обновления между выборами, PHEW!),

Есть также 2 текстовых поля, которые пользователь должен заполнить после выбора 3 предыдущих выпадающих списков.Исходя из этого пользовательского ввода мне нужно:

1) Вызвать запрос, который выполняет поиск в БД на основе ввода ТЕКСТ И ВЫБОР без обновления страницы (необходимо сохранить данные) 2) Вывести результаты в таблицу дляпользователь выбирает совпадение без обновления (предпочтительно) 3) Отправьте форму и передайте это значение из таблицы на следующую страницу, которая обрабатывает запрос

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

Есть ли у вас какие-либо советы о том, как я могу сделать это, используя метод Javascript, упомянутый выше?Я работаю с устаревшим кодом, поэтому мои возможности ограничены в переработке всей структуры, и я хотел бы сохранить как можно больше существующих функций.

Пример структуры раскрывающегося списка и ajax на вызывающей странице:

На главной странице CFM:

<tr>
    <td>Region :</td>
    <td>
        <select id="subregions" onchange="fillupRegion()">
         <option></option>
          <cfoutput>#regionstr#</cfoutput>
         </select>
      </td>
 </tr>
 <tr>
     <td>Sub Turf :</td>
      <td>
          <select id="region" name="region" onchange="fillupCLLI('','region','clli',true)"></select></td>
 </tr>
 <tr>
     <td>Street Address :</td>
     <td>
         <input type="text" maxlength="50" size="40" name="txtStreet" id="txtStreet"/>
   </td>
 </tr>

На странице .JS

function fillupRegion(){
       // fill up the sub region drop down according to the selected region
       $.ajax({
        type: "POST",      
        dataType: "text",
        url: "lookup_subregions.cfm",      
        data: "region="+ $("#subregions").val(),
        timeout : 30000,
        success: function(response){
            if (response=="<option value=''></option>"){
                $("#region").attr("disabled",true);
            }else{
                $("#region").attr("disabled",false);
            }
            $("#state option[value='']").attr("selected","selected");                      
            $("#region").html(response);                       
        },
        error: function(){
            alert("An error has occurred.");
        }
  });
}

Основной запрос, который должен быть заполнен на основе выборок (игнорируйте # аргументы # теги)

<cfset p=#ARGUMENTS.streetAdd#.split(" ")>
<cfquery name="getPossibleMatchQry"datasource="#request.application.dba#"
          username="#request.application.dbaid#"
          password="#request.application.dbapwd#">
          SELECT top 25 CLLI_CODE, CLLI_CODE_COMBINED_ADDRESS as STREETADDRESS, CITY_PLACE_NAME as CITY, STATE
   FROM CSMI_REF_CLLI_LAT_LONG
    WHERE (UPPER(CLLI_CODE_COMBINED_ADDRESS) LIKE UPPER('#p[1]#' + '%')
    <cfif gStreet EQ True>
     AND UPPER(CLLI_CODE_COMBINED_ADDRESS) LIKE UPPER('% ' + '#p[2]#' +'%'))
     <cfelse> )
    </cfif>

    AND (UPPER(CITY_PLACE_NAME) LIKE UPPER('#ARGUMENTS.city#' + '%') OR UPPER(CITY_PLACE_NAME) LIKE UPPER('%' + '#ARGUMENTS.city#' +'%'))
    AND STATE = '#ARGUMENTS.state#'
   ORDER BY CLLI_CODE_COMBINED_ADDRESS ASC
 </cfquery>

РЕДАКТИРОВАТЬ ПОСЛЕ РЕШЕНИЯ:

Я решил использовать подход CFC, создав новыйфункция на моей странице .JS.Функция вызывается, когда пользователь заполняет поля ввода Улица и Город.Мне еще предстоит выяснить, как отформатировать мою функцию и как эта функция / запрос (из cfc) вернуть таблицу (или cfgrid?), Заполненную результатами.Вот что у меня есть в моей функции (запрос пока остается таким же, как и выше):

<input type="text" maxlength="50" size="40" name="txtStreet" id="txtStreet" onchange="fillupMatch()"/>

function fillupMatch(){   
    $.ajax({
        type: "POST",      
        dataType: "text",
        url: "lookup_CLDS_match.cfm",      
        data: "streetAdd="+$("#txtStreet").val(),
          "city="+$("#city").val(),
          "region="+$("#region").val()
        timeout : 30000,
        success: function(response){
            $("#matches").html(response);                
        },
        error: function(){
            alert("An error has occurred");
        }
    });            
}

Answer 1

Хорошо, похоже, вы используете jQuery, что делает это довольно легко.Есть 2 способа, которыми вы можете подойти к этому, вы можете сгенерировать их на странице cfm, а затем загрузить их на свою существующую страницу, используя функцию jload.переместите ваши функции генерации запросов в CFC и затем вызовите его из javascript, используя <cfajaxproxy>.Приведенные ниже примеры взяты из того, когда это было реализовано в CF8, но синтаксис должен быть действительным для CF9.После того, как вы создали прокси вашего cfc, вы можете использовать его так же, как любой другой объект javascript для вызова его функций-членов.Ниже приведен пример заполнения выбора внизу страницы liveocs.

Документация:

http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_a-b_3.html

Пример:

<script type="text/javascript">
//Callback Function to display data.
function createTable(json){
   $(json).find('result').each(function(){
      var data1 = $(this).child('data1').val();
      var data2 = $(this).child('data2').val();
      var html = '<tr><td>'+data1+'</td><td>'+data2+'</td></tr>';
      $('#tbodyID').append(html);
   });
}
</script>
<table>
<thead>
</thead>
<tbody id='tbodyID'>
</tbody>
</table>