Keskustelu: Nettisivujen teko: onkeypress

Hei!

Onko mitään mahdollisuutta saada nopeutettua onkeypress toimintaa, tai samaan efektiin ns. lukita sivun toiminnallisuus.

Minulla on sellainen ongelma, että onkeypress toiminnon jälkeen tulee tallennus toiminta (php, sql), mutta tapahtuma on niin hidas n.5 sekuntia jolloin käyttäjä kerkiää tekemään jo jotain muutakin.

Toisella koneella kokeilin, niin ongelma oli päinvastainen. onkeypress toiminnon jälkeen sivu jumittui 10 sekunniksi, jonka jälkeen käyttäjä vasta pääsi jatkamaan toimiaan.

<table style="width:100%;" class="MainTable">
<?php
$style = "style='width:100%; border:0px;'";

echo '<tr>';
echo '<td class="shadow" style="text-align:center; font-size:13px !important;"> Asiakkaan nimi</td>';
echo '<td class="shadow" style="text-align:center; font-size:13px !important;"> Henkilötunnus </td>';

for($td = 1; $td <= $MontakoPaivaaKuukaudessaOn; $td++){
  echo '<td class="shadow" style="text-align:center; font-size:13px !important;">';
    echo "$td";
  echo '</td>';
}

echo '</tr>';

$k1 = "SELECT CONCAT(snimi,' ', nimi) as henkilo, hetu, id FROM asiakkaat WHERE tyyppi = 0 AND poistettu IS NULL AND hetu != '' ORDER BY osasto LIMIT 5";
if(!($t1 = mysql_query($k1))){
  return;
}

$i = 1;

while($r = mysql_fetch_assoc($t1)){

$i++;

$henkilo = htmlspecialchars(trim(ucfirst($r['henkilo'])));
$henkiloId = intval($r['id']);
$henkilotunnus = htmlspecialchars(trim(ucfirst($r['hetu'])));

  echo '<tr>';
    echo '<td class="NewTd">';
      echo "<input type='text' name='henkilo_$i' $style value='$henkilo'>\n";
    echo '</td>';
    echo '<td class="NewTd">';
      echo "<input type='text' readonly size='8' name='henkilotunnus_$i' $style value='$henkilotunnus'>\n";
    echo '</td>';

  for($td = 1; $td <= $MontakoPaivaaKuukaudessaOn; $td++){

    $id = $henkiloId.$td;

    $tapahtumat->KalenteriMerkinnat($henkiloId, $id);
  }
}
echo '</tr>';
?>
</table>

function KalenteriMerkinnat($henkiloId, $id){

      $k = "SELECT arvo FROM v2_lasnaolo WHERE vuosi = $this->ValittuVuosi AND kuukausi = $this->ValittuKuukausi AND henkiloid = $henkiloId AND solunid = $id LIMIT 1";
      if(!($t = mysql_query($k))){
        return;
      }

      $r = mysql_fetch_assoc($t);
      $arvo = htmlspecialchars(ucfirst($r['arvo']));

      $tdStyle = '';
      $style = "style='width:100%; border:0px;'";

      if(!empty($arvo)){
        $k2 = "SELECT vari FROM v2_lasnaolo_merkinnat WHERE lyhenne = '$arvo'";
        if(!($t2 = mysql_query($k2))){
          return;
        }

        $r2 = mysql_fetch_assoc($t2);

        $vari =  htmlspecialchars($r2['vari']);

        $style = "style='background:$vari; width:100%; border:0px;'";
        $tdStyle = 'style="background:'.$vari.';"';
      }

      echo '<td class="NewTdSmall" '.$tdStyle.'>';
        echo "<input type='text' size='1' id='$id' $style name='sarake_$td' onkeyup='NoudaMerkki(event, $henkiloId, $id);' value='' >\n";
      echo '</td>';
    }

ps. onkeyup näytti olevan minulla toimintona. Saattaisi hieman nopeuttaa jos laittaa onkeypress. En tiedä?

Järki käteen siinä viestin kirjoituksessa. Dumppasit 80 riviä koodia, joista kolmanneksi viimeisellä on se onkeyup ja muut eivät (ainakaan näiden tietojen perusteella) liity asiaan mitenkään. Noiden perusteella on siis mahdoton sanoa, mikä on pielessä. Esimerkiksi NoudaMerkki-funktio olisi tässä miljoona kertaa tärkeämpi.

HTTP-pyyntö (myös AJAX) selaimelta palvelimelle kestää joka tapauksessa jonkin verran. Jos teet sen synkronisesti, selaimen pitäisi jumittua odottamaan. Jos teet sen muuten (kuten yleensä onkin kätevämpää), sinun pitää toiminnon ajaksi estää käyttäjää tekemästä muuta. Tämä täytyy tehdä vähintään JS-koodin puolella (eli tarkistetaan, onko vanha pyyntö kesken, ja jos on, ei lähetetä uusia), ja usein on suotavaa ilmoittaa asiasta myös käyttöliittymässä (esim. tekstillä tai jollain latauksesta kertovalla kuvalla).

<script type="text/javascript">
function NoudaMerkki(event, henkiloId, id){
  var hId = henkiloId;
  var kentanId = id;

  var arvo = document.getElementById(kentanId).value;

  if(arvo == ''){
    return;
  }
  else{
    document.forms.lasnaolo.henkilonId.value = hId;
    document.forms.lasnaolo.kentanid.value = kentanId;
    document.forms.lasnaolo.tarkistus.value = arvo;
    document.forms.lasnaolo.submit();
  }
}
</script>

Mod. huom: HTML ja JS eivät ole PHP:tä!

Hei!

Nappulan painamisongelma on ratkaistu niin, että ensin täytetään ruudut ja sitten tallennetaan. Tällä saa tämän odotusajan pois, mutta sivu latautuu yleisesti ottaen normaalia hitaammin. (ainakin minun mielestäni)

Jos henkilöitä tulee enemmän kuin 5, niin sivusta tulee todella raskas.

Sivu siis piirtää ruudulle 5(tai enemmän)*31 ruutua. Sen jälkeen kun ruudut on piirretty sivu "jökkää" hetkeksi ja sen jälkeen vasta ruutuja voi vasta alkaa täyttämään. (netin nopeudella ei näyttäisi olevan merkitystä tämän suhteen)

Olen dumpannut tänne jo mielestäni oleelliset koodit sillä itse en kyllä löydä syytä mikä hitauden saa aikaan. Onko koodissani jotain, mikä jää hetkeksi kiertämään tyhjää vai onko tosi, että sivu on niin raskas.

Tyyleihin käytän css3, joten onko se vielä niin uutta tekniikkaa, että hidastaa toimintaa?

Minusta hyvin ilmeinen syy hitauteen on, että ajat tuossa hirveän määrän yksittäisiä tietokantakyselyitä. Haet jokaisen henkilön jokaisen päivän erikseen ja joka kerta vielä värinkin uudelleen tietokannasta. Sinun pitäisi hakea kaikki taulun v2_lasnaolo tiedot yhdellä kyselyllä, koota ne kätevästi taulukkoon ja kerätä samalla lyhenteet ja hakea sitten myös värit yhdellä kyselyllä ja tehdä niistä taulukko.

Tiedon hakemisen ja tulostamisen sekoittaminen on lähes aina huono idea, koska koodista tulee sekavaa ja virhetilanteet tai yleensäkin poikkeukset tietorakenteissa on hankalampi käsitellä siististi. Hae ensin tiedot taulukoihin ja tulosta ne vasta sitten.

Funktiossa KalenteriMerkinnat taitaa olla määrittelemätön muuttuja $td.

Niin vähän arvelinkin, että siinä on hitauden lähde. Mietin vain kovasti miten sen puran, mutta tuo taulukko kuulostaakin todella järkevältä. Taidanpa kokeilla pukata ne taulukkoon :-)

Taulukon muotokin kannattaa miettiä sellaiseksi, että sinun on nopea hakea siitä tietoa. Mietipä sitäkin viahtoehtoa, ettei taulukon "hashit" olekaan numeroarvoja, vaan jotenkin semmoisia, että voit viitata päivämäärällä kyseiseen taulukon soluun.

esim. moniulotteinen taulu:

$tapahtuma[$vuosi][$kuukausi][$paiva] = array();

(voi sisältää esim. useamman tapahtuman)

Pitkästä aikaa pääsi kiinni ongelmaan, mutta se meinaa tuottaa kyllä liikaa päänvaivaa.

Ongelman lähtökohta.

Minulla on taulu, jossa on henkilot joten joudun rakentamaan niillä silmukan joka listaa henkilot allekkain.

Samalla luon tietenkin taulun

henkilo 1,2,3,4,5,6,7,8,9,10 jne...
henkilo 1,2,3,4,5,6,7,8,9,10 jne...
henkilo 1,2,3,4,5,6,7,8,9,10 jne...
henkilo 1,2,3,4,5,6,7,8,9,10 jne...
henkilo 1,2,3,4,5,6,7,8,9,10 jne...

Sitten on taulu jossa on merkinnät, jotka laitan taulukkoon..

Miten puran tämän taulukon edellä mainitussa silmukassa.

Minun pitää tietää mihin kohtaan merkintä taulussa tulee, joten käsittääkseni taulukko pitää nakata silmukan sisään, mutta jos nakkaan sen käydään taulukko läpi joka kerta kun silmukka pyörähtää. Tässä tapauksessahan olisi sama tehdä joka pyörähdys uusi kysely vai?

Eli miten lähtisin taulukon purkamaan.