Avatar billede webmus Nybegynder
15. juni 2007 - 11:24 Der er 30 kommentarer og
1 løsning

Ajax suggestions sammen med php

Hej eksperter, jeg har sioden igår set mig sort på min kode så nu ber jeg om hjælp udefra ;D

Mit problem er at jeg gerne vil lave sådan så jeg har et tekstfelt hvor jeg skriver en adresse jeg vil blive sendt videre til. Nedenunder har jeg en boks med alle mine regstrede link, og til sidst har jeg til højre en boks hvor den skriver de link der matcher min adresse.
Dette er sådan set også fint nok, men når der så kun er 1 adresse der matcher den jeg er ved at skrive, skal den automatisk sende mig videre til den adresse uden jeg behøves at trykke på "Enter".

jeg har 2 filer: selve siden hvor boksene bliver udskrevet, og så gethint.php hvor den finder ud af hvilke links der matcher adressen.

selve siden ser sådan ud:

<script>
var xmlHttp

function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="gethint.php";
url=url+"?q="+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("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }

    document.write xmlHttp;
}
</script>
<table width="100%">
    <tr>
        <td>
            Indtast Webadresse<br>
            <form action="index.php?valgmenu=$_GET[valgmenu]" method="post" name="links" style="margin:0px;">
                <input type="text" name="str" id="txt1"
                onkeyup="showHint(this.value)" size="45">
                <input type="submit" class="inputknap" value="Gem">
            </form>
        </td>
        <td rowspan="2">
            <span id="txtHint"></span>
        </td>
    </tr>
    <tr>
        <td>
            Registrerede Webadresser:<br>
            <form action="index.php" method="get" style="margin:0px;">
                <select size="7" name="viderestil" onchange="this.form.submit()" style="width:330px;">
                    <?php
                        $resultat = mysql_query("SELECT addr FROM link_reg") or die(mysql_error());
                        while($post = mysql_fetch_array($resultat)) {
                            echo "<option>$post[addr]</option>";
                        }
                    ?>
                </select>
            </form>
        </td>
    </tr>
</table>




også gethint.php:

<?php
header("Cache-Control: no-cache, must-revalidate");
// Date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

include_once("includes/connect.php");
$str = $_GET[q];
$hint = "";
$i = 0;
$resultat= mysql_query("SELECT addr FROM link_reg WHERE addr LIKE '$str%'") or die(mysql_error());
while($post = mysql_fetch_Array($resultat)) {
        $hint .= "<option>$post[addr]</option>";
        $hint1 = "$post[addr]";
        $i++;
}

if($i == 0) {
    echo "<small>Der blev ikke fundet nogle matchende webadresser, du kan gemme den ved at klikke på 'Gem'.</small>";
} else {
    echo "<small>Der blev fundet $i antal webadresser der matchede din søgning</small>";
    echo "<form action='index.php' method='get' style='margin:0px;'>" .
            "<select size='9' name='viderestil' onchange='this.form.submit()' style='width:330px;'>" .
            "$hint" .
            "</select></form>";
}

$antal_matchene_adresse = $i;
?>




Jeg håber der er nogle kloge eksperter der kan hjælpe mig så det kommer til at virke ordentligt :D

//webmus
Avatar billede webmus Nybegynder
15. juni 2007 - 11:28 #1
Jeg tænkte faktisk på noget med at sende adressen fra gethint.php videre tilæ selve siden vha Sessions men så er problemet at man først skal opdatere hele selve siden, og det kan jeg bare ikke få den til automatisk!
Man skal nok bruge noget javascript men er desværre selv php-mand :S
Avatar billede olebole Juniormester
15. juni 2007 - 12:32 #2
<ole>

Den kode, du skriver, har ikke meget med AJAX at gøre, så du bør finde et bedre sted at lære det. For det første bruger man ikke GET i AJAX - og for det andet bruger man ikke innerHTML.

AJAX er betydeligt mere komplekst at kode, end de fleste tror og du kommer ikke ret langt uden stor JS- og DOM-viden og erfaring. Ikke mindst IE's garbage-collection stiller betydelige krav til koden, hvis ikke browseren skal lække hukommelse ved hvert serverkald.

Mit råd: Vent med AJAX, til du har lært en masse JS og DOM  =)

/mvh
</bole>
Avatar billede webmus Nybegynder
15. juni 2007 - 12:38 #3
ehm det var et script inde på www.w3schools.com men anyway ved godt at det er javascript og derfor jeg postede tråden her.
Jeg har så vidt som muligt prøve at sætte mig ind i koden, men kunne stadigvæk godt tænke mig lidt hjælp.
JEg har prøvet at lære javascript men efter jeg har lært php og kodet det i nogle år er det blev endnu sværre at lære javascript, men har stadig tænkt mig at forsøge at få det her til at virke :)

forresten i det sidste stykke javascript skal document.write naturligvis erstattes med return, det var et lille forsøg jeg lavede ehe.
Avatar billede olebole Juniormester
15. juni 2007 - 12:44 #4
w3schools.com er _absolut_ ikke et anbefalelsesværdigt sted at hente info om webkodning. Sitet er hamrende fyldt med fejl, mangler, misforståelser og udeladelser ... og AJAX har han ikke fattet det første af  :o|

AJAX er efter min bedste overbevisning ikke noget, man kan få 'lidt hjælp' til. Skal det kodes bare nogenlunde, kræver det som sagt stor indsigt i JS og DOM ... det er ikke noget, du får på få måneder.

Problemet er, at hvis jeg viser dig noget velfungerende kode, skal det hele laves væsentligt om, dersom du blot laver en lillebitte ændring eller tilføjelse. Det er der ikke ret mange, der fortæller dig ... men der er heller ikke ret mange, der kan kode ordentlig AJAX  =)
Avatar billede webmus Nybegynder
15. juni 2007 - 12:53 #5
Okay, men er dette her er jo heller ikke Ajax så, eller hvordan? Sådan som det ser ud i mine øjne ligner det her blot alm Javascript, også er det jo heller ikke noget problem at få det til at virke ordentligt, er det?
Avatar billede roenving Novice
15. juni 2007 - 13:11 #6
Jeg er ret sikker på, at oleboles holdning tager udgangspunkt i, at det aldrig er særlig smart at benytte sig af metoder, der ikke er standardiserede, og i dette tilfælde faktisk strider lodret mod det konceptuelle grundlag for javascript-DOM-binding ...

-- derfor er det helt grundlæggende tåbeligt at benytte innerHTML, som jo sammenblander node-ideen i DOM-behandling sammen med det at skrive html i dokumenter ...

Ajax er en teknik, hvor du benytter dig af serverkald til at hente data til browseren, disse bør være i et format, du i din behandling kan omsætte til DOM-noder, der bagefter kan indsættes i dit dokument, f.eks. XML eller JSON (JavaScript Object Notation !-)

-- problemet opstår så, når det skal omsættes til DOM-noder, der jo kan være afhængige af nesting og meget andet, derfor vil et script til dannelse og indsættelse af de nødvendige DOM-noder oftest være meget specifikt rettet mod en konkret opgave !o]
Avatar billede webmus Nybegynder
15. juni 2007 - 13:18 #7
Ehe jeg ved godt at det altid er foretrækket at overholde standarder, men da jeg ikke er kendt i Javascript men bare vil lege lidt med dets funktioner til et lille script er der egentlig ikke så vigtigt da det ikke skal bruges til noget konkret.
Når jeg koder i PHP til større sider holder jeg mig også kun til ordentlig kode, men i det her tilfælde er jeg på bar bund til et lille script, så egentlig ville jeg bare gerne prøve at få det her til at virke i første omgang =) hehe
Avatar billede coderdk Praktikant
15. juni 2007 - 13:21 #8
Du kunne prøve at bruge et framework som jQuery i stedet for at kode det selv...
www.jquery.com - Der findes også masser af tutorials på nettet omkr. jQuery :)
Avatar billede webmus Nybegynder
15. juni 2007 - 13:29 #9
okay men er det da svært at få til at virke selv eller hvordan?
Avatar billede olebole Juniormester
15. juni 2007 - 13:37 #10
Det er en rigtig god idé at øve sig på nogle JavaScripts, der kan bruges til noget fornuftigt. Det er bare ikke smart at kaste sig hovedkulds ud i det vanskeligste, du kan bruge JS til - og at bruge et færdigt library (som jQuery) strider jo ligesom mod hensigten: At lære om JS-kodning.

Ja, AJAX er som sagt nok det sværeste (eller det, der kræver mest viden, erfaring og overblik), du kan foretage dig med hensyn til JavaScript. Teknikken er fyldt med faldgrubber, som egentlig altid har eksisteret, men som først for alvor bliver synlige som problemer, når websider ikke skiftes i længere perioder, mens serverkommunikationen foregår i baggrunden
Avatar billede webmus Nybegynder
15. juni 2007 - 13:46 #11
Jeg kan godt følge dig, men da jeg også kan php er dette umiddelbart det eneste jeg kan bruge JS til. Og igen er det kun et lille script til mig selv som ikke skal bruges på offentlige sites. Hvis dette kommer til at virke kan det være jeg kaster mig ud i at lære JS fra bunden, men indtil da er jeg ikke sikker hvorvidt jeg gør det eller ej da jeg jo kan bruge php til det meste.
Avatar billede coderdk Praktikant
15. juni 2007 - 14:15 #12
olebole, Der er jo ingen der har sagt at formålet var at lære JS? ;) Det kunne jo være at formålet var at få en google-suggest-klon til at fungere med noget PHP...

Anyway! Det er nemt at få til at virke med jQuery. Der findes tilmed et AutoComplete-plugin til jQuery: http://www.dyve.net/jquery/?autocomplete
Avatar billede olebole Juniormester
15. juni 2007 - 14:24 #13
coderdk >> jQuery er et trestjernet eksempel på, hvor svært AJAX er at kode. Prøv at lukke IE - åbne din task-manager - og derefter kalde den side, du linker til. Tast så noget i feltet og se IE's hukommelsesforbrug stige øjeblikkeligt med over 30MB ... og det bliver ved, hvis du lave flere kald.

Bevares, det kan sagtens gøres dårligere ... men der er lysår igen, før authoren har lært at kode AJAX  ;o)
Avatar billede olebole Juniormester
15. juni 2007 - 14:26 #14
Nåja ... du skal selvfølgelig have en browser åben til at kalde siden i  :D

"Prøv at lukke IE - åbne din task-manager - og derefter åbne en frisk IE og kalde den side, du linker til"
Avatar billede olebole Juniormester
15. juni 2007 - 14:29 #15
- og min misforståelse vedr. spørgerens lyst til at lære JS udspringer sikkert af et forfængeligt håb  :D
Avatar billede webmus Nybegynder
15. juni 2007 - 14:30 #16
Men hvis vi nu blæser på al fornuft ang hvor optimalt og korrekt koden er, er der så ikke der så ikke nogle herinde der kan hjælpe med det oprindelige spørgsmål?
Avatar billede coderdk Praktikant
15. juni 2007 - 14:35 #17
olebole, Hmm, ja min startede på 14MB, ved suggestion steg den til ca 60MB og faldt så til ca 20 MB når jeg havde valgt noget. Det kunne godt se ud som om at den leaker lidt, men det lader også til at IE's GC rydder op efter kort tid. Det kunne være meget værre ;)
Avatar billede olebole Juniormester
15. juni 2007 - 14:43 #18
"men det lader også til at IE's GC rydder op efter kort tid" - det gør den ikke, men scriptet gør det til en vis grad ... men også kun til en vis grad. Jeg prøvede jQuery for nogen tid siden (ved ikke, om det er samme version) og der myldrede det med alvorlige fejl.

Den øvelse, der vises i eksemplet på den side, du linker til, er langtfra en af de mere komplicerede. Du kommer lynhurtigt ud i langt alvorligere situationer og da jeg testede lib'et, blev enormt meget af skidtet hængende. Selv efter sideskift blev hukommelsen ikke frigivet - hvilket bl.a. skyldes cirkulære referencer, closures, m.m.
Avatar billede olebole Juniormester
15. juni 2007 - 14:48 #19
- og en lækkage på 6MB efter ét kald er iøvrigt _absolut_ ikke 'lidt'  ;o)
Avatar billede webmus Nybegynder
15. juni 2007 - 14:51 #20
stadig ingen der kunne glemme alt om hvor korrekt koden er eller ikke er, og kunne fortælle mig hvad jeg kunne gøre for at få en langt frem optimal kode men som derimod virker?
Avatar billede webmus Nybegynder
15. juni 2007 - 14:52 #21
langt fra*
Avatar billede horsmark Nybegynder
15. juni 2007 - 14:54 #22
Hvis du vil bruge af et js framework er dette også en mulighed - der er foriøvrigt god dokumentation:
http://developer.yahoo.com/yui/

Olebole >> Nogle lærer at bygge et hus ved at læse lidt først og finde ud af at det er en god idé at støbe fundamentet først... andre (som jeg) lærer at bygge et hus ved at starte med at opsætte et tag der så falder lige ned i skalden på én pga manglende fundament og stueetage ...

Lad der være plads til dette ligeledes :-)
Avatar billede webmus Nybegynder
15. juni 2007 - 14:58 #23
horsmark>>

Godt svaret xD hehe.. kunne godt være jeg skulle kigge lidt på dit link da det ikke ser ud somom jeg får svar på spørgsmålet her mmh
Avatar billede coderdk Praktikant
15. juni 2007 - 15:08 #24
Men i øvrigt webmus, http://www.dyve.net/jquery/?autocomplete - Den er ret simpel, og der er en phps-fil der viser hvordan han genererer resultatet :)
Avatar billede olebole Juniormester
15. juni 2007 - 15:13 #25
horsmark >> Problemet er, at AJAX har været kendt i over 2 år nu - og det er stadig _ekstremt_ sjældent at se professionelle kodere mestre teknikken (Google's kodere er nogen af de eneste på markedet, der kan skrive det ordentligt). Taget _kan_ ikke blive hængende uden vægge - uagtet, hvor håbefuldt, du forsøger  =)

Der er altid plads til at eksperimentere, men det er nu engang smart at råde sine unger til at starte med en sæbekassebil ... så kan lille Bimmer zq altid blive ansat på Maserati-fabrikken, når han har lært at lægge fire og fire sammen.

På samme måde finder jeg det mest opbyggeligt at forsøge at drible spørgere udenom de allerværste faldgruber ... og AJAX er én stor faldbrube.

webmus >> Svar, der falder i en smag, er ikke altid de gode  ;o)
Avatar billede webmus Nybegynder
15. juni 2007 - 15:31 #26
olebole >> Ok men svar mig på en ting:

Når nu jeg så pænt har bedt om hvad jeg vil mene er et ganske simpelt svar, hvorfor er det så svært at besvare, selvom du du har en anden holdning til det?

Jeg regner ikke med at beskæftige mig videre med det ellers, men da dette her er et lille script kun til mig selv som jeg ikke har tænkt mig at gøre det store ud af, hvorfor er det så et problem?

Desuden bruger jeg allerede scriptet, men det er bare ikke 100% som jeg ønsker da der mangler en lille finesse, og den er sådanset det eneste jeg spurgte om hjælp til:/
Avatar billede horsmark Nybegynder
15. juni 2007 - 15:34 #27
olebole >> ...meningen med tag-eksemplet var kun "lerning by doing" vs. "lære via teori". Motivationsfaktoren er den der skal bestemme - og hvis motivationsfaktoren er høj ved learning by doing så er det den vej man skal gå - og så længe der er motivation bliver der gravet dybere... OG måske sidder webmus om nogle år fordybet i dom-scripting og skraldgriner over noget han byggede dengang i 2007 ...

Webmus >> http://developer.yahoo.com/yui/examples/autocomplete/customize.html
Avatar billede horsmark Nybegynder
15. juni 2007 - 15:36 #28
olebole >> {om-nogle-år} ... og kigger tilbage og ÆRGER sig over ikke at have lyttet til olebole da han ville have sparet sig selv for en hulens masse ærgelser ... :-) Dét er risikoen ved learning by doing...
Avatar billede olebole Juniormester
18. juni 2007 - 10:22 #29
For nogle år siden var jeg den irriterende stodder, der altid advarede mod chat-applikationer i script-sprog. Heller ikke dengang uden grund.

Efter således at have kæftet op i lang tid, mødte jeg en anden E-bruger. Han og nogle venner havde fået opgaven med at lave et site til en kendt, dansk TV-station i forbindelse med et reality-show. Sitet fungerede fint op til første udsendelse, men da seerne efterfølgende skulle chatte med deltagerne, brød serveren fuldstændig sammen. Chatten var ellers 'gennemprøvet' med 15-20 venner og fungerede i den skala fint ... men!
Heldigvis fik det ikke væsentlige økonomiske følger, men det kunne meget vel have resulteret i et erstatningskrav med voldsomt mange ciffre. Det var jo _noget_ af et statustab for stationen!

Som man kan se, er der dramatisk større risiko ved learning by doing, end det umiddelbart kan se ud til ... den værste er, at man ingen anelse har om, hvad man ikke kan og derfor kaster sig ud i noget, der kan blive ganske katastrofalt for én selv og andre.
Se blot på de 'professionelle' webløsninger på WWW. Skræmmende mange af dem burde aldrig nogensinde have ramt nettet. Årsagen er, at mange webkodere primært har deres viden fra tvivlsomme, men letfordøjelige tutorials, artikler og forumindlæg.

Learning by doing er en voldsom potent pædagogisk metode - men den har alvorlige mangler i et højt standardiseret miljø!

Da der er mange, der læser E's gamle spørgsmåls tråde og derigennem lærer nyt, kunne det aldrig falde mig ind bevidst at skrive dårlig kode som svar på et E-spørgsmål. Så hellere opfordre læseren til at lære det nødvendige først.

Med de 'bagtanker' og den motivation er det ikke spor svært at være den sure, gamle mand ... tværtimod!  ;o)
Avatar billede olebole Juniormester
18. juni 2007 - 10:30 #30
PS: Jeg har såmænd allerede en AJAX-artikel i smeltediglen - men foreløbig er den blevet til fire og ender nok på fem eller seks artikler. Det begyndte ganske uskyldigt med en tutorial om en XMLHttpRequest-wrapper, der sikrer et ens og effektivt interface for requests i 'de store browsere' - men da AJAX indeholder så utroligt mange faldgruber, greb den lynhurtigt om sig  =)
Avatar billede webmus Nybegynder
03. august 2008 - 19:22 #31
lukker
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester