отображать данные MySQL на странице без обновления страницы - выпадающий список - PullRequest
0 голосов
/ 10 января 2012

Мне нужна помощь, пожалуйста,

У меня есть страница PHP с выпадающим списком, заполненным запросом к базе данных mysql. Я хочу иметь возможность отображать детали базы данных для выбранного параметра в других ячейках таблицы. В идеале это может быть достигнуто без обновления страницы.

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

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

Я знаю, что мне нужно использовать ajax или javascript в дополнение к этому?

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

<?

  $con = mysql_connect("localhost","user","password");
  if (!$con)
  {
    die('Could not connect: ' . mysql_error());
  }

  mysql_select_db("dbname", $con);

  $packcodesql="SELECT packcode from skudata order by packcode"; 
  $resultpackcode=mysql_query($packcodesql); 
  $optionspackcode=""; 

  while ($row=mysql_fetch_array($resultpackcode)) { 
     $packcode=$row["packcode"]; 
     $optionspackcode.="<OPTION VALUE=\"$packcode\">".$packcode; 
  } 
?>

<table border=1>
<tr>
  <td>Pack Code</td>
  <td>Category</td>
  <td>Selling Units</td>        
  <td>Full Pallet QTY</td>
  <td>Order QTY</td>
</tr>
<Tr>
  <td>
    <SELECT NAME=packcode1 style="width:100px;"> 
        <OPTION VALUE=0><?=$optionspackcode?></SELECT> 
  </td>
  <td>
    <!-- show mysql result for "select Category from skudata where packcode=packcode1" -->
  </td>
  <td>
    <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode1" -->
  </td>     
  <td>
    <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode1" -->
  </td>
  <td><input type="text" id="qty" name="qty"></td>
</tr>       
<Tr>
  <td>
    <SELECT NAME=packcode2 style="width:100px;"> 
        <OPTION VALUE=0><?=$optionspackcode?></SELECT> 
  </td>
  <td>
    <!-- show mysql result for "select Category from skudata where packcode=packcode2" -->
  </td>
  <td>
   <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode2" -->
  </td>     
  <td>
   <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode2" -->
  </td>
  <td><input type="text" id="qty" name="qty"></td>
</tr>       
<Tr>
   <td>
    <SELECT NAME=packcode3 style="width:100px;"> 
        <OPTION VALUE=0><?=$optionspackcode?></SELECT> 
   </td>
   <td>
    <!-- show mysql result for "select Category from skudata where packcode=packcode3" -->
   </td>
   <td>
    <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode3" -->
   </td>        
   <td>
    <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode3" -->
   </td>
   <td><input type="text" id="qty" name="qty"></td>
</tr>       
<Tr>
   <td>
    <SELECT NAME=packcode4 style="width:100px;"> 
        <OPTION VALUE=0><?=$optionspackcode?></SELECT> 
   </td>
   <td>
    <!-- show mysql result for "select Category from skudata where packcode=packcode4" -->
   </td>
   <td>
   <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode4" -->
   </td>        
   <td>
    <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode4" -->
   </td>
   <td><input type="text" id="qty" name="qty"></td>
</tr>       
</table>

Ответы [ 2 ]

2 голосов
/ 10 января 2012

Вы хотите заполнить данными из базы данных, которая связана с полем над тд?

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

<select>
    <option onclick="myAjaxFunction(this);">Some name</option>
    <option onclick="myAjaxFunction(this);">Some other name</option>
</select>

тогда вам нужно будет создать функцию myAjaxFunction, которая будет содержать ваш код для запроса Ajax (http://api.jquery.com/jQuery.ajax/). Простой пример может быть:

<script>
function myAjaxFunction(elem) {
    $.ajax({
        url: 'target/file.php',
        success: function(response) {
            $("#target-td").html(response);
        }
    });
}
</script>

И, наконец, файл .php, который вы вызываете с помощью AJAX, содержащий вызов вашей базы данных. В файле вы просто отображаете то, что хотите отобразить.

В идеале вы должны сделать один вызов и вернуть все, используя json. Атрибут

dataType: 'json'

можно добавить к вызову $ .ajax (), и вы можете использовать:

echo json_encode($myContent);

в PHP вы json кодируете свой php контент (желательно в массиве ()).

Это должно было указать вам путь :), пожалуйста, скажите мне, если мне нужно быть более конкретным, или приведите лучшие примеры ...

UPDATE

Вы можете создать уникальные идентификаторы для каждого из тд, на которые вы хотите нацелиться. Затем создайте

<td>
    <select>
        <option onclick="firstPackCodeAjax('<?=$packcodeValue?>');" value="<?=$packcodeValue?>"><?=$packcodeValue?></option>
    </select>
</td>
<td id="categoryTd">
   <!-- show mysql result for "select Category from skudata where packcode=packcode1" -->
</td>
<td id="unitsTd">
    <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode1" -->
</td>     
<td id="palletTd">
    <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode1" -->
</td>

Тогда ваша функция AJAX будет:

<script>
function firstPackCodeAjax(packCode) {
    $.ajax({
        url: 'target/file.php',
        data: {code: packCode},
        dataType: 'json',
        success: function(json) {
            $("#categoryTd").html(json.Category);
            $("#unitsTd").html(json.SellingUnits);
            $("#palletTd").html(json.FullPalletQTY);
        }
    });
}
</script>

Предполагается, что вывод данных будет json и в формате:

[
    { "Category": "Fast cars" },
    { "SellingUnits": "9001" },
    { "FullPalletQTY": "9001" }
];

Затем вы создадите функцию для каждого выбора, с которым хотите включить AJAX. Цель / file.php вам нужно где-то создать самостоятельно. Здесь вы получаете данные и выводите их в формате json. Удачи;) Кроме того, это можно очень легко оптимизировать, но это будет позже ...

1 голос
/ 10 января 2012

Вы можете использовать AJAX для этого.У меня нет ни одного примера, но учебник w3schools по сочетанию AJAX и PHP является хорошей отправной точкой.http://w3schools.com/ajax/ajax_aspphp.asp Я бы изменил их пример, чтобы вывести все значения вашего тега option прямо в ваш тег выбора, используя функцию javascript, аналогичную функции, найденной на сайте w3schools.

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...