Zadziałało, dzieki.
Jednak coraz to pojawiaja sie nowe problemy. Robie to tak troche po omacku.
Jak wspomniałem, chce zrobić taka prosta wyszukiwarke. To znaczy ktos wpisuje pierwsze 2 litery szukanej frazy do formularza, a ten odwołuje sie przez Ajax do PHP i wyciąga tablice z danymi na której to podstawie mozna wygenerować ładny box pod formularzem z podswietlanymi rekordami.
Po kliknięciu rekord ma być przepisany do formularza.
Generalnie chciałbym zrobić kilka takich dynamicznych formularzy na stronie.
Z ktorych kazdy by miał inny typ. To znaczy jeden by wyswietlał jakies imiona, drugi nazwiska.
Najpierw robiłem to strukturalnie, ale jak potem zorientowałem sie ze ma być kilka takich formularzy, to lepiej bedzie stworzyć klase, na której to podstawie bede tworzył obiekty.
Jako przykład kilka fotek ze znanych serwisów, gdzie zastosowano takie coś:
http://img248.imageshack.us/my.php?image=fotka2gu9.jpg
http://img142.imageshack.us/my.php?image=fotka3kf8.jpg
http://img168.imageshack.us/my.php?image=fotka4ff9.jpg
Mam pare pytań.
Na jakiej zasadze sie opiera cały ten box? Tabela czy nie?
Gdzie sa wyswietlane dane na temat szukania, czyli "Wyszukiwanie",
"Nie znaleziono". W tym samym boxie, czy oddzielny div?
Jak zrobić, by ten nowo utworzony box przykrył nowe elementy, a nie przykrywał je? Pozycjonowanie z-index?
Tutaj jest mój kod:
<?php
require("export_sajax.php");
?>
<html>
<head>
<style type="text/css">
td {border: 1px solid black;}
}
</style>
<script type="text/javascript"><? sajax_show_javascript(); ?></script>
<script type="text/javascript">
function nfosource(divid, type, inputid)
{
var divid = divid
var type = type
var inputid = inputid
var tmpThis = this;
this.export = function () {
if (document.getElementById("moja_tabela"))
{
this.del();
}
var content = document.getElementById(inputid).value;
if (content.length >=2)
{
this.loadnfo();
if (window.timerId) {clearTimeout(window.timerId);}
window.timerId = setTimeout(function() {
tmpThis.send(content);}, 1000);
}
else
{
this.del();
this.cleannfo();
}
};
this.send = function (x) {
x_search_cpu(x, type, this.generate)
};
this.novaluesnfo = function () {
document.getElementById(divid).innerHTML = "Brak rekordów wg podanego klucza";
this.del();
};
this.loadnfo = function () {
document.getElementById(divid).innerHTML = "Trwa szukanie rekordów";
};
this.cleannfo = function () {
document.getElementById(divid).innerHTML = "";
};
this.del = function () {
var deltab = document.getElementById("moja_tabela");
deltab.parentNode.removeChild(deltab);
};
this.generate = function (php_output) {
var table = document.createElement('table');
var tbody = document.createElement('tbody');
table.id = 'moja_tabela'
table.appendChild(tbody);
var i=0
while (php_output[i] != undefined)
{
var tr = document.createElement('tr');
tbody.appendChild(tr);
var td = document.createElement('td');
td._str = php_output[i];
td.appendChild(document.createTextNode(td._str));
td.style.cursor = 'pointer';
td.onmouseover = function() {
this.style.backgroundColor = '#87CEFA' };
td.onmouseout = function() {
this.style.backgroundColor = '' };
td.onclick = function() {
document.getElementById(inputid).value = this._str; tmpThis.del();};
tr.appendChild(td);
i++
}
if (php_output[0] != undefined)
{
tmpThis.cleannfo();
document.body.appendChild(table);
}
else
{
tmpThis.novaluesnfo();
}};
}
var tabela = new nfosource("cpu_table", "1", "pole1")
</script>
</head>
<body>
<form>
<input type="text" id="pole1" onkeyup="tabela.export()">
</form>
<div id ="cpu_table"></div>
</body>
</html>
Generalnie w tym układzie mam problemy ze stworzeniem nowej tabeli czyli tego całego box-a, zaraz po znaczniku <form>, oraz by nowo powstała tabela była zawsze równo pod <form> i przykryła elementy znajdujące sie za nowo wygenerowaną tabelą.
Kod nie działa pod IE, natomiast działa pod Opera i Firefoxem
poza tym nie wiem czy nie dało by sie łatwiej definiować zależnosci miedzy skryptem, a html-em:
var tabela = new nfosource("cpu_table", "1", "pole1")
<body>
<form>
<input type="text" id="pole1" onkeyup="tabela.export()">
</form>
<div id ="cpu_table"></div>
</body>
Nie jasny dla was może być kod:
this.send = function (x) {
x_search_cpu(x, type, this.generate)
};
To jest SAJAX, ktory łączy funkcje z PHP do JS.
Ogólnie funkcja send dostaje dane z formularza, oczywiście nie bezpośrednio.
Najpierw inne funkcje sprawdzają, czy ktos skonczyl pisać, czy ma wiecej niz 2 znaki itd.
Następnie "wirtualną" funkcją search_cpu (napisaną w PHP) przekazuje jej dane z formularza, typ danych i funkcje do której przegenerowane dane mają powrócić.
Czyli PHP otrzymuje pewien ciąg danych, następnie łączy sie z MySQL-em sprawdza w bazie czy sa wyniki podobne do podanego ciągu danych i zwraca rekordy w postaci tablicy poprzez SAJAX do funkcji this.generate co jest trzecim parametrem wywołania x_search_cpu.
Dla rozjaśnienia gotowy przykład mojego kodu mozna znaleźć tutaj:
Link przeniesiony do postu niżej.
Jak klucz prosze wpisać generalnie nazwy procesorów, czyli Ath (od Athlon), Pal (od Palomino).
Pent (Pentium) itd.
Prosze o jakiś komentarz, czy generalnie idea jest zła czy nie.
Jezeli mozna to prosze wskazać poprawki dotyczące kodu. Moze tam być troche głupot, ponieważ nie mam dużego doświadczenia w JS.
Pozdrawiam.