AJAX create form/table on change

У меня есть таблица, заполненная из базы данных. Как я могу использовать только заполнение этой таблицы после изменения пользователем опции выбора? Я думаю, что мне нужен AJAX и onchange для выпадающего списка, так как запрос таблицы изменит ожидающий выбор, хотя я не уверен, как это сделать. Я знаю, что это не может быть слишком сложно, но мне нужно увидеть пример, прежде чем я смогу его понять и применить в другом месте.AJAX create form/table on change

Использование PHP 5.2

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

<td style="vertical-align: top;"> 
    <select name="caseless_numbers" id="ValTwo" class="DropChange"> 
     <option value=""></option> 
     <option value="1">A</option> 
     <option value="2">B</option> 
     <option value="3">C</option> 
     <option value="4">D</option> 
    </select> 
</td>

источник

2013-08-12 Skot

Поиск AJAX и как это работает. – putvande

Вы в порядке с помощью jQuery? [Вот ответ] (http: // stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843 # 17974843), который ссылается на несколько простых примеров, чтобы начать работу с AJAX. Один из них включает в себя элементы управления SELECT. – gibberish

Вот как я это сделаю.

Оберните таблицу в div под названием tablewrap или что-то еще, а затем добавьте событие с изменениями в раскрывающийся список. Используя пост JQuery вы можете отправить значение в качестве переменной называется selection в PHP скрипт, чтобы сделать таблицу, а затем использовать результат как HTML для DIV:

$("#ValTwo").on("change", function() { 
    $.post("getTableData.php", { selection: $(this).val() }, function(data) {  
    $("#tablewrap").html(data.table); 
    }, "json"); 
});

источник

2013-08-12 15:45:20 Naterade

Вы хотите читать на XMLHttpRequest и how to use them.

Есть буквально десятки статей в Интернете, в которых подробно обсуждается, как это сделать.

источник

2013-08-12 15:40:16

Не зная, что вы используете в качестве серверный язык, я не могу привести вам пример этого. Ниже приведен пример сообщения ajax, в котором используется сервер ASP.NET MVC4.

JQuery:

$('#ValTwo').change(function(){ 
    $.ajax({ 
    type: "POST", 
    url: "/{controller}/{action}/", 
    data: { 'Selection' : $('#ValTwo').val() }, //PASSES BACK SELECT VALUE 
    dataType: "json", 
    success: function (data, text) { 
     //APPEND TABLE HERE, 'data' WILL CONTAIN ANYTHING RETURNED 
    }); 
});

ПРИМЕЧАНИЕ: Любые входные/Выбор/управления TextArea добавлена к странице после загрузки (то есть: в методе успеха) нужно будет использовать $.live добавить любые слушатели событий.

Jquery Документация по Ajax:http://api.jquery.com/jQuery.ajax/

источник

2013-08-12 15:45:30 mambrowv

Извините, я должен был сказать Linux, php 5.2. Хотя я уверен, что могу сломать ваш пример – Skot

Единственное реальное отличие здесь в том, что свойство url будет неверным. – mambrowv

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

Используя этот маршрут, вы должны внимательно посмотреть на примеры Server Side Processing. Важно отметить, что вы можете использовать либо URL-адрес сценария, либо функцию обратного вызова для этого свойства параметра, и что вы можете заставить возвращаемый datatable вывести свежую информацию с сервера в событие on-change (посмотрите на fnReloadAjax plugin).

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

источник

2013-08-12 17:29:33

AJAX create form/table on change

ответ

Смежные вопросы