Tietokannasta www-sivulle, miten? (MySQL, PHP, Ajax?)

[ZZ]

Nyt on taas aika kysellä enempi tai vähempi tyhmiä ennen kuin pää hajoaa tai menee seinästä läpi. Tarkoitus olisi tulostaa tietokannasta hakutuloksia sivulle. Kaikki taitaa toimia hienosti, jos tuloksia on vain yksi joten keskitytään tässä useamman rivin hakemiseen. Kelataanpas alkuun näin intron jälkeen...

Haluaisin, yllättäen, hakulomakkeeseen syötettyjen tietojen avulla tulostaa hakutulokset sivulle. Ongelmaa ei ole, jos vain tulostaisin kaikki haluamani kentät tietokannasta kerralla näkyviin (paljon hakutuloksia, paljon skrollattavaa). Haluaisin tulostaa otsikkolistan, jonka otsikkoa osoittamalla tulostetaan kyseisen tietueen kaikki tiedot (rekursiivinen haku?). Mikä olisi paras tapa toteuttaa tämä toimenpide?

Vaihtoehto 1:
Data hakulomakkeesta php-prosessitiedostoon ja tulostus php:tä käyttäen. Javascriptillä (jQuery) voinee näyttää ja piilottaa otsikon alla olevia tarkempia tietoja. Tämä ei liene järkevää, jos tuloksia on paljon (miksi tulostaa sivulle piiloon satoja/tuhansia rivejä tietoja, jos niistä katsellaan vain muutamia?).

Vaihtoehto 2:
Data hakulomakkeesta php-prosessitiedostoon ja otsikoiden tulostus php:tä käyttäen. Osikkoa osoittamalla haetaan kaikki tietueen tiedot (jQuery, Ajax). (Pitäisi jotenkin selvittää miten php-muuttuja heivataan javascriptin puolelle ja tulokset saadaan ajaxmaisesti näkyviin lataamatta koko sivua uudestaan. Palataan yksikohtiin myöhemmin, jos tämä vaihtoehto on järkevin.)

Vaihtoehto 3:
Sama kuin yllä, mutta hoidetaan tulostus jQueryllä. Otsikkoa osoittamalla pitäisi vain lähettää uusi sql-kyselylause terästettynä tietueen id:llä. Pitäsi olla helppoa ja kätevää, mutta en ole vielä saanut jQueryn each-funktiota toimimaan haluamallani tavalla. (En osaa tulostaa hakutulosarrayta jQueryllä (JSON), mutta tämänkin kohdan yksityiskohtiin voidaan palata myöhemmin.)

Vaihtoehto X:
Yllä olevien yhdistelmä vai jotain aivan muuta?

Tulokset olisi myös kiva jakaa useammalle sivulle, mutta tämä ei ole vielä tärkeää. Nyt olisi päätettävä konsepti ja tekniikat, joita käytetään, jottei tarvitse painia eri vaihtoehtojen kanssa ja tuhlata liikaa aikaa kokeiluihin. Toistaiseksi puhutaan pienistä datamääristä: Eheitä tietuekokonaisuuksia olisi satoja, kymmenen tuhannen tietueen raja tuskin menee rikki lähivuosina. Kuitenkin olisi kiva tehdä taloudellista koodia, eikä vain hakea kaikkea mahdollista dataa palvelimelta ja näyttää/käyttää siitä vain murto-osaa.

Onko ajatuksia, ehdotuksia tai jopa ratkaisuja?

[jjari]

Mä en oikein ymmärrä miten vaihtoehdot 2 ja 3 eroavat toisistaan. Tai vaihtoehtoisesti 1 ja 2. Mutta ajaxillahan tuo olisi kaikkein elegantein toteuttaa.

Edit: parasta tapaahan ei ole olemassakaan. On vain erilaisia tapoja. Jotkut vain ovat huonoja ja jotkut hyviä.

[ZZ]

1 vs. 2:
1) Tulostetaan kaikki (otsikot + tarkemmat tiedot) hakutulokset kerralla.
2) Tulostetaan ensin vain hakutulosten otsikot ja erikseen pyydettäessä tarkemmat tiedot.

2 vs. 3:
2) Tulostetaan otsikot php:tä käyttäen ja tarkemmat tiedot jQueryllä.
3) Kaikki tulostus alusta asti jQueryllä.

Jälkimmäisessä ei taidakaan olla suurta eroa. Lähinnä kyse lienee siitä, missä vaiheessa käytetään JSONia tai joudutaanko php-muuttujia siirtämään javascsriptin puolelle (kakkosvaihtoehdossa ainakin pitää heittää muuttuja php:stä js:iin).

Ajaxia on tarkoitus käyttää. Koko sivua en halua ladattavan uudestaan joka kerta, kun tietokantaa käpistellään. Ongelmia tässä vaiheessa on ainakin tuo rekursiivisen haun toteuttaminen (php:n yhdistäminen jQueryyn/Ajaxiiin) ja useiden hakutulosten siisti tulostus jQueryn each-funktiolla.

Pikkasen on homma mulla hakusessa, mutta toivottavasti selkisi. Saa tietty kertoa toimivan ratkaisun askeleet alusta loppuun välittämättä antamistani vaihtoehdoista...

Niin, paras on häilyvä käsite. Jos nyt otetaan kriteeriksi vaikka verkon kuormittaminen, on vaihtoehto 1 huono(in) tapa, sillä siinä ladataan eniten dataa palvelimelta asiakaskoneelle. Ehkä se pitäisi jo tässä sulkea pois halutuista ratkaisuista. Sekoittelenko siis tulostamistarkoituksessa php:tä ja jQueryä? Vai JSON-koodaanko (vai mitä?) kaikki hakutulokset php-prosessitiedostossa ja hoidan tulostamisen jQueryllä?

[slaakso]

Onko ajatuksia, ehdotuksia tai jopa ratkaisuja?

Käy lataamassa tuolta http://mydbr.com/ myDBR-softa. Tekeminen helpottuu kummasti.

[jjari]

Useammalle sivulle jakaminen on itseasiassa aika oleellinen asia jo alkuvaiheessa, sehän rajoittaa hakutulosten kokoa jos sivutus suoritetaan ns. lazy loadingina.

En tunne php:ta tai jquerya juuri ollenkaan, mutta se miten ajax-ratkaisu toteutetaan on vähän makuasia. Mikä on helpompaa ja/tai nopeampaa? Tai mitä haluat oppia? Muuttujien heittäminen php:sta js:iin on helppoa, javascriptihän kirjoitetaan selaimeen php:stä ja siihen merkkijonoon voi sijoitella niitä muuttujien arvoja miten paljon haluaa.

Edit: muuttujia javascriptiin jotenkin tähän tyyliin (tietämättä php:n syntaksia tarkemmin):

Koodi: Valitse kaikki

<?php 
print('javascriptlausettajohonmuuttujatohon:' + $muuttuja + 'javacsriptjatkuu;'); 
?>

[ZZ]

slaakso. Katsoin hieman myDBR:ä. Siinä on demon perusteella pari kivaa toimintoa, mutta muuten menee aika paljon ohi aiheen. Lähinnä hakusessa on tietokannan tietojen syöttäminen/tulostaminen ja muokkaaminen, joten tuo koko paketti on liian iso ja monimutkainen tähän mukaan otettavaksi.

jjari. Lazy loading on tuntematon käsite minulle. Tarkoittaako tuo, jos rajoitan sql-lauseen kyselyitä LIMITiä käyttäen (esim. viisi tietuetta per sivu), tietokannasta haetaan kerrallaan viisi tietuetta, ja seuraava-/edellinen sivu -linkkejä painamalla haetaan seuraavat viisi tulosta? Tuollainen sivutussysteemi on kyllä jossain vaiheessa tehtävä, mutta vasta sitten kun olen saanut yksinkertaisemmat toiminnot toimimaan.

Eipä eilen tuntunut onnistuvan mikään helposti, jos ollenkaan. Edes lomakkeen mukana lähetettävää php-muuttujaa en saanut ajax-hakuun laitettua. ($yksimuuttuja kyllä toimii, mutta $row['id'] ei. Tulee vain "unterminated string literal" -virheilmoitus, kun yrittää tuota käyttää. Lisäksi php:n while-luupilla tulostetuista lomakkeen lähetysnapeista toimii vain ensimmäinen. Tää on just tätä: Homma toimii tai ei. Nyssei toimi...)

Palailen ajassa taakse päin ja kokeilen ottaa haltuun tuon jQueryn each-funktion ja JSON:n käytön:
1) tietokannasta haku lomakkeeseen syötettyjen tietojen perusteella (jQueryn ajax-funktio)
2) tulostetaan otsikkolista jQueryn ajax-funktion success-kohdassa määritellyllä funktiolla
3) osoitetaan otsikkoa, josta halutaan tarkastella kaikki tiedot (jälleen jQueryn ajax-funktio)
4) tulostetaan tarkemmat tiedot siten, että otsikkolista jää näkyviin
5->) sitten hauskuus jatkuu tietojen muokkaamistoiminnoilla...

Kertokaa toki, jos tuo kuulostaa tyhmältä tai mahdottomalta. Tarvitseeko käyttää jotain json-parseria, jotta saan json-stringin tulostettua jQueryn eachillä? Php:n json_encode palauttaa stringin, mutta eikö eachillä voi tulostaa stringejä siististi? Pitääkö tulostettavan materiaalin olla javascript-objekti?

Kiitos tähänastisista vinkeistä. Lisää saa pohdiskella ja jutustella.

[gramdel]

Lazy loading on tuntematon käsite minulle.

Lazy loading tarkoittaa sitä, että tieto ladataan vasta kun sitä tarvitaan, eli tässä esim. juurikin ajaxilla vasta kun valinnat on tehty.

Noin kokonaisuutena todella hankala pysyä kärryillä mikä tässä hommassa nyt se varsinainen ongelma on. Tee palikka kerrallaan, kyllä se siitä. Helpompi vastailla kun on jokin konkreettinen probleema, johon yritetään löytää ratkaisu. Nyt tämä on lähinnä jossittelua, että tähtäiskö näin, hihat ylös ja hommiin.

Hommassa ei mielestäni sinällään tarvita json objekteja jos se nyt tässä on suurin ongelma, vaikka homman toki niilläkin voi hoitaa. Printtauksen voi hoitaa ajaxin kutsumalla php fileelläkin.

[slaakso]

slaakso. Katsoin hieman myDBR:ä. Siinä on demon perusteella pari kivaa toimintoa, mutta muuten menee aika paljon ohi aiheen. Lähinnä hakusessa on tietokannan tietojen syöttäminen/tulostaminen ja muokkaaminen, joten tuo koko paketti on liian iso ja monimutkainen tähän mukaan otettavaksi.

myDBR:ssä on kyllä mukana myös tiedon syöttäminen ja tulostaminen. Myös tuo otsikkojen ja tarkempien tietojen käsittely Ajaxilla tulee heti mukana. Toiminnallisuuden tekeminen on vain kyselyjen tekeminen dataan. Loput hoituu automaattisesti.

Jos haluat koodata kaiken itse niin se menee seuraavasti:

Hae otsikkotiedot ja tarkempien tietojen käsittely PHP:llä sivulle ja liitä siihen mukaan javascript tiedosto jossa jQueryllä kutsut sitten tarkemmat tiedot otsikkotietojen mukaan liitetyn ID:n perusteella.

[ZZ]

Jossittelua ja käytettävien tekniikoiden valintaa tämän alkuketjun pitikin olla. Eri juttuja olen kokeillut ja mikään ei ole toiminut heti helposti ja nopeasti. Omaa syytäni osittain, kun olen hyppinyt kohdasta toiseen enkä oikeasti paneutunut yhden osa-alueen ongelmaan.

Sain sentään toimimaan jQueryn eachin. Eihän se vaatinut kuin eval-funktion käyttämisen json-stringiin. En ihan ymmärrä miksi tuo vaaditaan, sillä katsomissani esimerkkikoodeissa ei sitä käytetty. Json.org-sivulla tosin tuosta esimerkki annetaan.
http://www.json.org/js.html

Php on minulle tutuin, joten ehkä tuo php-tulostus on järkevin tapa jatkaa projektia. (Vastoin siis edellistä viestiäni. Javascript-tulostuksessa en osaa sivuuttaa tyhjiä kenttiä, joten php-tulostus on helpompi toteuttaa nykyisillä taidoillani.)

slaakso (gramdel, tai joku). En ihan ymmärtänyt tuota javascript-tiedoston liittämistä php-prosessitiedostoon. Saisiko tuosta tarkempaa kuvausta? Laitanko koodia näkyville vai onnistuuko ohjeistus näin? Nyt on suht selvää kauraa tuo ensimmäinen hakutoiminto (ensimmäinen jQueryn ajax-funktio) ja otsikkojen sekä id:eiden tulostus, mutta miten siitä eteen päin? (Tulostan hakutuloksen lomakkeeseen, jossa on piilotettu kenttä id:tä varten.) Aikaisemmin en saanut toimimaan sitä rekursiivista hakunappulaa, johon myös olin id:n sijoittanut (uniikki id elementille: lomake_{id}). Uniikin lomakenappulan avulla olisi tarkoitus tunnistaa lomake ja lähettää sen mukana uusi tietokantakysely (toinen jQueryn ajax-funktio), joka palauttaa kaikki kyseisen tietueen tiedot. Otsikkolistauksen tulisi jäädä näkyviin, jotta voidaan tarkastella eri tietueita helposti.

Minne siis laitan tuon toisen jQueryn ajaxin? Php-prosessitiedostoon? Aikaisemmin kokeilin laittaa sen pääsivulle missä se ensimmäinenkin ajax-funktio on, mutta se ei toiminut.

Toivottavasti ei ollut liian sekavaa. Mie ainakin olen vesi- ja tuoremehuselvä, ei uskoisi...

Kiitokset jälleen tähänastisista. Kivaahan tämä on – ainakin silloin, kun oppii jotain uutta eikä vaan yritä tuloksetta...

[jjari]

Kyseessähän ei ole rekursiivinen haku. Rekursiivinen tarkoittaa sitä että jokin funktio kutsuu itseään. Sql-haku ei sinällään voi olla rekursiivinen mutta esim oraclen pl/sql -funktio voi varmaankin kutsua myös itseään. Tämä pienenä sivujuonena, ei tainnut kuitenkaan kauheasti auttaa ongelmassa.

Javascript-tiedoston liittäminen php-tiedostoon tarkoittaa varmaan samalla lailla kuin vaikkapa css-tiedoston liittäminen html-tiedostoon.

[ZZ]

Siksipä tuo rekursiivinen olikin tuolla ekassa viestissäni kysymysmerkillä, kun en sen merkitystä muistanut (enkä jaksanut tarkistaa...). Sivujuonteet ovat mukavia, jos niistä oppii jotain uutta, tai jokin vanha muistuu mieleen. Kiitokset siis ojennuksesta. Jatkan huomenna varsinaisen ongelm... kröh, haasteen parissa...

[ZZ]

Tässä on nyt koodia, jossa suurin ongelma on php:n while-luupin sisällä olevan lomakkeen lähetysnappi. En saa js-funktiota tunnistamaan näitä lennossa luotuja id:eitä (id on tietokannan taulun pääavain, jonka avulla seuraava tietokantakysely tehdään). Alla on osa _hakuprosessit.php-sivun koodista.

Koodi: Valitse kaikki

while ($row = mysqli_fetch_array($r,MYSQLI_ASSOC)) {
  //tulostetaan ensimmäisen tietokantahaun otsikot
  echo '<span class="ajax_content_otsikko">';
    if (!empty($row['nimi_hlo'])) {
    echo $row['nimi_hlo'];
    }
  echo '</span>';
							
  //ja sen perään lomake, jonka perusteella haetaan valitun jäsenen kaikki tiedot
  echo '<form name="haettu_jasen_form' . $row['id'] . '" id="haettu_jasen_form' . $row['id'] . '">
  <input type="hidden" name="jasen_kokohaku" id="jasen_kokohaku" value="1" />
  <input type="hidden" name="jasen_id' . $row['id'] . '" id="jasen_id' . $row['id'] . '" value="' . $row['id'] . '" />
  <br />
  //lähetysnappi on nyt ongelma. jokaiselle pitäisi saada uniikki id ja lähettää se javascript-funktioon
  <a class="button_ajax" id="jasen_kokohaku_submit' . $row['id'] . '">Hae kaikki tiedot</a>
</form>';

}//end of while ($row = mysqli_fetch_array($r,MYSQLI_ASSOC))

Minne laitan tämän js-funktion ja miten saan siihen ekan tietokantakierroksen uniikin $row['id']:n mukaan? jsVar pitää paikkaa php:n while-funktion sisällä olevalle $row['id']:lle. Miten tämä muuttuja lomakkeen id:ssä ja js-funktiossa -hässäkkä tulisi toteuttaa?

Koodi: Valitse kaikki

$(function(){
  $('#jasen_kokohaku_submit'+ jsVar +'').click(function(){
  dataStringKoko = $('#haettu_jasen_form' + jsVar + '').serialize();
		$.ajax({
			url: '_hakuprosessit.php',
			//{}, //parametrit, ei varmaan tarvita, jos käytetään dataStringKokossa serializea? Tietty olisi lyhyempää jättää välistä tuo serialize, mutta miten sitten poimitaan tuo id mukaan?
			data: dataStringKoko,
			datatype: 'text',
			success: naytaKokoJasen
		});
	});
});

//yllä olevan success, kaikkien tietojen tulostus yllä olevan php-funktion tavoin while-luupissa
var naytaKokoJasen = function(dataInner){
	$('#jasenlista_inner').fadeIn(400);
	$('#jasenlista_inner').html('<div class="ajax_content">' + dataInner + '</div>');
}

Tuon yllä olevan js-funktion kaltainen funktio on pääsivulla, joka siis johtaa viestin alussa olevaan while-luuppiin. Php-koodi on _hakuprosessit.php-sivulla, jonne ajattelin lähettää myös tämän toisen js-funktion.

Ratkaisuja?

[RikuS]

Miksi et käyttäisi esimerkiksi Fancyboxia tarkempien tietojen näyttämiseen?

http://fancybox.net/

Eli teet alkuperäisen tietokantahaun esim:

Koodi: Valitse kaikki

$sql = $connection->prepare("SELECT * FROM taulu WHERE nimi_hlo != ''");
$sql->execute();
while ($row = $sql->fetch()) echo '<div class="rivi">' . $row['nimi_hlo'] . '</div>';

Lisää henkilön nimeen linkki Fancyboxiin, joka näyttää henkilön tarkemmat tiedot hakutulosten päällä hävittämättä niitä. Fancybox avaa siis sivun johon syötät rivin id:n, jonka avulla haetaan tarkat tiedot hakutuloksesta.

[rthghdfger]

Ihan vain toimintamallina:
Itselläni on XML-tietokanta, joka sisältää toista tuhatta tietuetta ja kukin tietue noin 15 alkiota, joista yksi on kuvalinkki kahteen tiedostoon. Tästä luodaan PHP:lla taulukkomuotoinen tietokanta, joka tallennetaan käyttäjän sessiomuuttujaksi. Sessiomuuttujan avulla tietokantaa ei tarvitse generoida PHP:ssa kuin kerran ja sain tällä selkeästi suoritusnopeutta lisää. Kaikki haku- ja lajittelutoimenpiteet tapahtuvat PHP:lla, javascriptilla vain muutamia grafiikkakikkailuja ja lomakkeiden tarkistuksia. Koko hommaa katsellaan nettiselaimen läpi.

[ZZ]

Tuo Fancybox näyttää aika loistavalta. Tulee varmasti kokeiltua sitä jossain vaiheessa. Eiköhän tuossa onnistu valokuvien sijaan lomakkeenkin avaaminen (iFrame-, Inline-, Ajax-esimerkit), ja muokkaaminen. Tuo muokkaaminen ja tietokantaan uudelleen tallentaminen on tässä vaiheessa oleellista sillä kyseessä on osa laajempaa kokonaisuutta, josta asiakastietojen tarkastelu ja ylläpito on vain yksi osa.

Suuri kiitos Fancyboxista RikuS.

Tämän hetkinen ongelma oli kuitenkin juuri tuon linkin/id:n lisääminen tietokannasta haettuun otsikkoon (siis sen saaminen js-funktion tunnistettavaksi, ks. ongelmankuvaus yllä). Tuo ongelma lienee sama liitänkö otsikon id:n yllä olevaan jQuery-funktioon vai Fancybox-funktioon.

mcpekkis. Kuulostaa aika hurjalta koko tietokannan tallentaminen sessiomuuttujaan. En usko, että lähden tuolle tielle, vaikka toistaiseksi tietomäärät ovat kohtuupieniä. Tarkoitus olisi asiakastietojen tarkastelun lisäksi luetteloida arkistoaineistoa ja ylläpitää kokoelmia. Lisäksi on vielä muitakin toimintoja. Nuo voisi varmaan jakaa siististi eri sessiomuuttujiin, mutten uskalla lähteä tuolle tielle. Onko sinulla kyseessä vain tietokannasta hakeminen? Tässä systeemissä kun pitää myös tallentaa tietoja tietokantaan, joten liikennettä menee koko ajan myös palvelimelle muutenkin kuin sql-hakujen muodossa. (Saahan ne tiedot kantaan toki sessiomuuttujasta riippumatta, mutta eikö tuolloin pitäisi päivittää sessiomuuttuja jokaisen syötön jälkeen? Tällöin ensin saavutettu hyöty taitaa kääntyä itseään vastaan.)

[RikuS]

Tämän hetkinen ongelma oli kuitenkin juuri tuon linkin/id:n lisääminen tietokannasta haettuun otsikkoon (siis sen saaminen js-funktion tunnistettavaksi, ks. ongelmankuvaus yllä). Tuo ongelma lienee sama liitänkö otsikon id:n yllä olevaan jQuery-funktioon vai Fancybox-funktioon.

Siis eikös tarkoitus ole tuosta otsikosta klikkaamalla avata otsikkoa koskevat tarkemmat tiedot? Jos näin, niin teet Fancyboxia varten oman php-sivun joka hakee annetun id:n perusteella tiedot ja tekee lomakkeet sun muut mitä tarvitset. Tälle php-sivulle siirrät id:n osoiterivillä get-muuttujana. Eli kun klikkaat rivin otsikkoa, Fancybox avaa päälle tämän sivun annetun id:n perusteella ja id tulee tietysti helposti jokaisen otsikon mukana.

Esim:

Koodi: Valitse kaikki

echo '<div class="rivi"><a href="tiedot.php?id=' . $row['id'] . '">' . $row['nimi_hlo'] . '</a></div>';

[RikuS]

Jos taas haluat javascriptillä tuoda samalle sivulle lomakkeen esiin kun klikkaat otsikkoa, menee se lonkalta kutakuinkin näin:

html

Koodi: Valitse kaikki

<div class="otsikko"><a href="#">Otsikko</a></div>
<form class="lomake">tähän lomake</form>

javascript - otsikkoa klikkaamalla lomake "liukuu" nopeasti otsikon alle

Koodi: Valitse kaikki

$(".otsikko").click(function(){ $(this).next(".lomake").slideToggle("fast"); });

Id-numeroa ei siis tarvi kuljettaa javascriptille vaan voidaan piilottaa/näyttää seuraava haluttu lomake.

[rthghdfger]

Kuulostaa aika hurjalta koko tietokannan tallentaminen sessiomuuttujaan. En usko, että lähden tuolle tielle, vaikka toistaiseksi tietomäärät ovat kohtuupieniä. Tarkoitus olisi asiakastietojen tarkastelun lisäksi luetteloida arkistoaineistoa ja ylläpitää kokoelmia. Lisäksi on vielä muitakin toimintoja. Nuo voisi varmaan jakaa siististi eri sessiomuuttujiin, mutten uskalla lähteä tuolle tielle. Onko sinulla kyseessä vain tietokannasta hakeminen?

Joo, mulla tietokantaa ylläpitää yksi henkilö ja muut vain katselevat.
Jokaisen päivityksen yhteydessä tietokanta luodaan tietysti uudestaan sessiomuuttujaan, muutenhan päivittäjä ei näkisi lisäämiään asioita. En tiedä, mikä tässä on kaikkein haavoittuvinta: kuinka iso sessiomuuttuja voi olla. Tietenkin esim. keskustelufoorumina tms. tämä ajatus ei toimisi, koska taulukko pitäisi päivittää koko ajan tai pitäisi luoda jokaiselle käyttäjälle lippu, joka jotenkin tarkastettaisiin joka kerta, onko muutoksia. Onneksi ei tarvitse muuttaa tätä nykyistä systeemiä.

[ZZ]

Jos taas haluat javascriptillä tuoda samalle sivulle lomakkeen esiin kun klikkaat otsikkoa, menee se lonkalta kutakuinkin näin:

Koodi: Valitse kaikki

$(".otsikko").click(function(){ $(this).next(".lomake").slideToggle("fast"); });

Id-numeroa ei siis tarvi kuljettaa javascriptille vaan voidaan piilottaa/näyttää seuraava haluttu lomake.

Tuo yllä oleva ei toiminut. Pitäisikö tuon jotenkin selata lomake-luokan lomakkeet yksitellen läpi?

Tämä toimii, mutta kun siinä ei käytetä id:tä, soveltuu se parhaiten tapauksiin, joissa hakutuloksia (ja näytettäviä lomakkeita) on vain yksi. Käyttöön tämä konsepti tulee paikkaan jos toiseenkin.

Koodi: Valitse kaikki

//piilotetaan lomake tavalla tai toisella
$(document).ready(function(){
	//$('.lomake').css('display', 'none');
	$('.lomake').hide();
});

//näytetään tarkemmat tiedot
$(document).ready(function(){
	$('.otsikko').click(function(){
	$('.lomake').slideToggle('fast');
	});
});

Ilmeisesti tuota document.readyä tulisi käyttää aina? Pääsivulla testatessani tuo koodi ei toimi ilman sitä, mutta prosessitiedostossa toimii (kun sitä kutsutaan hakutulosten tulostamisen jälkeen). Tuon käyttäminen lienee halpa toimintavakuus?

En vielä kokeillut Fancyboxia, kun leikin tämän slideTogglen kanssa. Ehkä jo huomenna paneudun Fancyboxin toimintaan. Jatkan vielä tuon id:n php–js-siirron etsimistä myös ilman Fancyboxia (toivottavasti tuo Fancybox toimii lennossa..). Tarvitsen sitä aika varmasti jossain vaiheessa. Stackoverflowsta löytyi jo pino postauksia, joissa ainakin ensi näkemältä näyttäisi olevan samankaltaisia ongelmia. Tutkin niitä jahka ehdin ja jaksan. Käsitit siis RikuS aivan oikein aikaisemmin – kertomasi perusteella Fancybox kelpaa moneen käyttöön, mutta haen myös tätä toista tapaa. Onpahan sitten valita kumpaa käyttää tarkoituksesta riippuen...

Kiitokset jälleen.

[ZZ]

Joo, mulla tietokantaa ylläpitää yksi henkilö ja muut vain katselevat.
Jokaisen päivityksen yhteydessä tietokanta luodaan tietysti uudestaan sessiomuuttujaan, muutenhan päivittäjä ei näkisi lisäämiään asioita. En tiedä, mikä tässä on kaikkein haavoittuvinta: kuinka iso sessiomuuttuja voi olla. Tietenkin esim. keskustelufoorumina tms. tämä ajatus ei toimisi, koska taulukko pitäisi päivittää koko ajan tai pitäisi luoda jokaiselle käyttäjälle lippu, joka jotenkin tarkastettaisiin joka kerta, onko muutoksia. Onneksi ei tarvitse muuttaa tätä nykyistä systeemiä.

Oletko ajatellut jossain vaiheessa tehdä muutoksia? Kuulostaa hassulta relaatiotietokannan(?) käyttötavalta, jos koko kanta ladataan muualle muistiin ja dataa katsellaan sitä kautta. Voisiko noita nopeusongelmia ratkaista helposti tietokannan rakennetta tai kyselylauseita muuttamalla tai luomalla indeksejä?

Kirjoitit aikaisemmin, että kannassa 15 alkioita tietuetta kohdin. Tarkoittaako tämä, että kannassa on yksi taulu, joka sisältää kaiken datan (jolloin kyseessä ei olisi relaatiotietokanta)? Simuloitko toimintatavallasi Memory-tietokantamoottoria?
http://dev.mysql.com/doc/refman/5.0/en/ ... ngine.html

Millaisista suoritusaikojen paranemisista puhutaan? Dataa ei kuitenkaan kertomasi perusteella ole niin paljoa, että normaalilla tietokantaratkaisulla ei pärjäisi (jollei jotain ole pahasti vialla tai pienikin nopeuslisä ole todella tärkeää).

Tuo yllä oleva on sitten vain aloittelevan amatöörin mietiskelyä. Ei siis millään pahalla. Kuulostaa vaan oudolta, kun tietokantojen usein mainostetaan olevan nopeita, vaikka rivejä olisi miljoonia.

[gramdel]

Tuo yllä oleva on sitten vain aloittelevan amatöörin mietiskelyä. Ei siis millään pahalla. Kuulostaa vaan oudolta, kun tietokantojen usein mainostetaan olevan nopeita, vaikka rivejä olisi miljoonia.

Kyllähän tuo erittäin oudolta toimintatavalta kuulostaa, mutta voihan tuo toimia joissakin yhteyksissä mikäli dataa ei käytännössä koskaan muuteta. Tietokannat ovat toki nopeita juuri isoilla datamäärillä, kunhan indeksointi on kunnossa. Jokunen tuhat riviä ei toki ole iso, mutta silti kuulostaa erittäin kummalliselta lähestymistavalta erityisesti sessioon painaminen.

[RikuS]

Jos taas haluat javascriptillä tuoda samalle sivulle lomakkeen esiin kun klikkaat otsikkoa, menee se lonkalta kutakuinkin näin:

Koodi: Valitse kaikki

$(".otsikko").click(function(){ $(this).next(".lomake").slideToggle("fast"); });

Id-numeroa ei siis tarvi kuljettaa javascriptille vaan voidaan piilottaa/näyttää seuraava haluttu lomake.

Tuo yllä oleva ei toiminut. Pitäisikö tuon jotenkin selata lomake-luokan lomakkeet yksitellen läpi?

Kyllä se itseasiassa toimii, kokeilin juuri. Tietysti sivulla pitää olla paljon muutakin, alla esimerkki koko sivusta joka taatusti pelaa:

Koodi: Valitse kaikki

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testi</title>
<style type="text/css">
form { display: none; }
</style>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".otsikko").click(function(){
			$(this).next(".lomake").slideToggle("fast");
		});
	});
</script>
</head>
<body>

<div class="otsikko"><a href="#">Otsikko 1</a></div>
<form method="post" action="#" class="lomake">
	<input type="submit" value="tallenna rivi 1" />
</form>

<div class="otsikko"><a href="#">Otsikko 2</a></div>
<form method="post" action="#" class="lomake">
	<input type="submit" value="tallenna rivi 2" />
</form>

</body>
</html>

[ZZ]

Joo, tuo toimii loistavasti staattisella sivulla.

Koodi: Valitse kaikki

$(document).ready(function(){
  $('.otsikko').click(function(){
    //tämä toimii staattiseen ja dynaamiseen listaan, mutta niputtaa kaikki elementit yhteen
    $('.lomake').slideToggle('fast');
    //toimii staattiseen listaan, ei dynaamiseen
    //$(this).next('.lomake').slideToggle('fast');
  });
});

Ilmeisesti event-handler (tai joku) ei tunnista dynaamisesti tulostettua otsikkolistaa this-avainsanan osalta. Olen kokeillut jQuery 1.3.2- ja 1.6.1-versioilla. Tuolla ylhäällä on se php-tiedoston while-luuppi, jolla tulostus tehdään (toki olen lisännyt siihen otsikko- ja lomake-luokat). Ei kai tämä oikeasti ole näin vaikeata, en vaan osaa....

Olisiko ongelmankuvaus lyhykäisyydessään: miten varmistua siitä, että dynaamisesti luodut/tulostetut luokat, elementit ja id:t tunnistetaan jQueryn selectoreilla yhtä varmasti, kuin staattisen sivun luokat, elementit ja id:t?

[RikuS]

Ilmeisesti event-handler (tai joku) ei tunnista dynaamisesti tulostettua otsikkolistaa this-avainsanan osalta. Olen kokeillut jQuery 1.3.2- ja 1.6.1-versioilla. Tuolla ylhäällä on se php-tiedoston while-luuppi, jolla tulostus tehdään (toki olen lisännyt siihen otsikko- ja lomake-luokat). Ei kai tämä oikeasti ole näin vaikeata, en vaan osaa....

Jos sinulla toimii tuo lähettämäni koko sivu, niin toimii varmasti tietokannasta haettujen rivienkin kanssa. Käytännössähän niillä ei ole mitään eroa jos luot täysin samanlaisen html-merkkauksen haun tuloksiin. Sillä, oletko kirjoittanut jokaisen rivin käsin vai tuleeko ne kannasta, ei ole siis mitään merkitystä.

Laita valmista koodia näkyville niin etsitään virheet

[ZZ]

Doddii, virhe löytyi ja homma toimii. En vain tiedä mikä se virhe on... While-luupin tulostukseen se liittyy. Yritän alla selventää vain sitä luuppia pseudokoodilla: RikuS:n postaama koodi siis toimii, kiitos siitä.

Koodi: Valitse kaikki

while ($row = myslqli_feth_array...){
  echo '<div class ="otsikko">';
    //tulostetaan tietokannasta kentät, jotka eivät ole tyhjiä
    //tätä diviä osoittamalla togglataan (greit finglish) näkyviin tarkemmat tiedot
  echo '</div>';
  echo '<form class="lomake">';
    //tulostellaan lisää kenttiä
    //nämä tiedot on siis haettu yhdellä ainoalla tietokantakyselyllä, tulostettu lomakkeeseen ja piilotettu jQueryn hide-funktiolla heti tietokannasta hakemisen jälkeen
  echo '</form>';
}//end of while

Yllä oleva siis toimii. Alla oleva toimimaton ratkaisu minulla oli aikaisemmin.

Koodi: Valitse kaikki

while ($row = mysqli_feth_array...){
  echo '<div class ="jokuturhaluokka">';
    //tulostetaan tietokannasta kentät, jotka eivät ole tyhjiä (useita kenttiä, joissa samanlainen if-tarkistus)
    if (!empty($row['henkilönimi'])) {
      echo '<div class ="otsikko">Nimi: ' . $row['henkilonimi'] . '</div>';
    }
    if (!empty($row['organisaationimi'])) {
      echo '<div class ="tassaEiOllutLuokkaaEikaDiviaTestivaiheessa">Nimi: ' . $row['organisaationimi'] . '</div>';
    }
  echo '</div>';//end of jokuturhaluokka
    echo '<form class="lomake">';
      //tulostellaan lisää kenttiä
    echo '</form>';
  //OBS placeholder for end of jokuturhaluokka
  //kun tuon yllä olevan jokuturhaluokan divin sulkutägin laittaa lomakkeen jälkeen, toimii myös tuo henkilönimeen liitetty otsikko-luokka näytä/piilota-togglen laukaisijana
}//end of while

Hauskaa tässä oli se, että tuota wrapperidivin (jokuturhaluokka) sulkutägiä siirtämällä homma toimii myös, vaikka tietokannasta tulostettaisiin vain henkilönimiä. Tämä on minulle edelleen mystistä, sillä while-tulostus tuotti joka tapauksessa validia koodia (jollei jotain jäänyt minulta huomaamatta).

Seuraavaksi jatkuu sen tietokannasta haetun id:n perusteella toisen tietokantakyselyn tekeminen. Fancybox, Lightbox, joku muu tai ei mikään lisäosa. Oppiminen on kivaa – eli palaan asiaan uusien ongelmien tiimoilta...

Suuri kiitos jälleen RikuS. Koodisi oli oikein alusta asti.