Wątek przeniesiony 2015-01-08 19:55 z Webmastering przez dzek69.

Wyszukiwanie danego indeksu w tabelce bez przeładowania

2015-01-08 19:21
0

Witam wszystkich,
mam pewien problem, a mianowicie mam tabelkę składającą się z 10 wierszy. W pierwszej kolumnie są inputy gdzie wprowadzam pewien indeks, w drugiej kolumnie chciałbym mieć wynik wyszukania danego indeksu. Chciałbym by to wszystko wyszukiwało się bez przeładowania strony za pomocą jQuery. Czyli wpisuje w pierwszym inpucie jakiś indeks, w drugiej kolumnie dla tego indeksu wyświetla mi wynik, itd, drugi i kolejny wiersz tak samo, wpisuje w inpucie indeks a w drugiej kolumnie wstawia mi wynik zapytania. Jak coś takiego zrobić?
Mam coś takiego:

formularz:

<html>
 <head>
 <script type="text/javascript" src="style/js/wybor.js"></script>
</head>
<body>

<form>
<table>
<tr><td>
<input type="text" name="rekord1" onKeyUp="showPart(this.value)">
</td><td><div id="informacja1">Wynik:</div></td></tr>

</table>
</form>

</body>
</html>

Plik odpowiedzialny za zapytanie do bazy:

$query = "SELECT * FROM tabela WHERE indeks LIKE '%".$part."%'";
$wyniki = mysql_query($query);

while($wiersz=mysql_fetch_array($wyniki))
{
echo $wiersz['wynik'];
}

oraz plik wybor.js

var xmlhttp;

function showPart(str)
{
xmlhttp=GetXmlHttpObject();
var url="baza.php";
url=url+"?part="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("informacja1").innerHTML=xmlhttp.responseText;
document.getElementById("informacja2").innerHTML=xmlhttp.responseText;
document.getElementById("informacja3").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
 {
 return new XMLHttpRequest();
 }
return null;
}

dodanie znacznika <code class="javascript"> - @furious programming

edytowany 1x, ostatnio: furious programming, 2015-01-08 20:44

Pozostało 580 znaków

2015-01-08 19:59
0
<table class=myTab>
  <tr>
    <td>
      <input />
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <input />
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <input />
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <input />
    </td>
    <td></td>
  </tr>
</table>
$('.myTab input').change(function(){
  $.get("baza.php", { part: this.value }, function(resp){
    $(this).closest('td').next().html(resp);
  });
});

edytowany 1x, ostatnio: dzek69, 2015-01-08 19:59

Pozostało 580 znaków

Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0