FOK!forum / Digital Corner / data uit mysql halen zonder de hele pagina te refreshen ?of:
BaggerUserzaterdag 24 september 2005 @ 13:08
hoi, ik ben bezig met een site, maar nu ben ik een beetje tegen iets aangelopen
op de pagina die ik maak staan een hele rij links en het enige wat moet gebeuren als je op zo'n link klikt is dat er wat text bovenin de pagina veranderd moet worden, het liefst zonder de hele pagina te refreshen.

nu zou j ezeggen a en frame of een iframe ofzo maar dat wil ik eigenlijk niet (ik maak mn hele pagina met divs) nu heb ik wel eens iest gezien over een div die zich gedraagt als iframe maar daar kan ik op google verder niks opvinden

of is er ook een mogelijkheuid om met b.v. javascript iets uit een mysql databse te halen en dan de etxt te verranderen zonder de hele pagina te refreshen? ik vrees van niet mar misschien kn iemand me iets verder helpen

alvast bedankt!
MaxPoweredzaterdag 24 september 2005 @ 13:14
Heej, dat probleem hebben we van de week al een keer gehad:

Oplossing:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		<HTML>
<HEAD>
<SCRIPT>
function setHelptekst(pTekst){
   document.getElementById("helptekst").innerHTML = pTekst;
}
</SCRIPT>
<BODY>
<h1>
<A onmouseover="setHelptekst('<IMG SRC=http://www.dutchville.com/test/plaatje1.png>');"  
   onmouseout="setHelptekst('');">1</A> 

<A onmouseover="setHelptekst('<IMG SRC=http://www.dutchville.com/test/plaatje2.png>');"  
   onmouseout="setHelptekst('');">2</A>
</h1>

      <TABLE border=0>
        <TR>
          <TD id=helptekst>
          </TD>
        </TR>
      </TABLE>
</BODY>
</HTML>


Te testen op:
http://www.dutchville.com/test/test.html
MaxPoweredzaterdag 24 september 2005 @ 13:17
Tekst veranderen door er op te klikken kan als volgt:
Verander de regels 10 t/m14 maar eens naar:
<a href=# onclick="setHelptekst('Hallo!');">test</a>
<a href=# onclick="setHelptekst('Tokyo!');">test</a>

Klaar is kees

Zie: http://www.dutchville.com/test/test2.html
.
.
.
.
En als je gegevens uit een MySQL-database wilt halen heb je toch echt php/asp nodig.
BaggerUserzaterdag 24 september 2005 @ 13:24
ja dat is het dus... als ik al die text van te voren uuit de database haal wordt het ongelovelijk sloom anders had ik idd dit wel gebruikt.
cyberstalkerzaterdag 24 september 2005 @ 13:34
quote:
Op zaterdag 24 september 2005 13:14 schreef MaxPowered het volgende:
Heej, dat probleem hebben we van de week al een keer gehad:

Oplossing:

[ code verwijderd ]

Te testen op:
http://www.dutchville.com/test/test.html
yuck .

Maar goed, als antwoord op de vraag: ja, dat kan, daarvoor kun je gebruik maken van xmlHTTPRequest. Een manier om een pagina op te vragen, zonder de pagina te hoeven verversen.
R-Monzaterdag 24 september 2005 @ 13:35
Hoewel er nog steeds wat php aan te pas moet komen, kan het ophalen van gegevens zonder te vernieuwen wel met Javascript. Ga dit eens lezen: http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
R-Monzaterdag 24 september 2005 @ 13:36
quote:
Op zaterdag 24 september 2005 13:34 schreef cyberstalker het volgende:

[..]

yuck .

Maar goed, als antwoord op de vraag: ja, dat kan, daarvoor kun je gebruik maken van xmlHTTPRequest. Een manier om een pagina op te vragen, zonder de pagina te hoeven verversen.
GMTA
BaggerUserzaterdag 24 september 2005 @ 14:18
quote:
Op zaterdag 24 september 2005 13:35 schreef R-Mon het volgende:
Hoewel er nog steeds wat php aan te pas moet komen, kan het ophalen van gegevens zonder te vernieuwen wel met Javascript. Ga dit eens lezen: http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
goed artikel! alleen ik krijg het helaas niet echt aan de praat omdat ik niet weet wat ik in welk bestand moet stoppen (dat wordt er ook niet echt duidelijk bij gezet)

als jij dat weet en even zou willen zeggen wat in welk bestand moet zou ik je zeer dankbaar zijn het is namelijk precies wat ik zoek denk ik

ik heb dit in form.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39		<script language="javascript">

function checkName(input, response)
{
  if (response != ''){ 
    // Response mode
    message   = document.getElementById('nameCheckFailed');
    if (response == '1'){
      message.className = 'error';
    }else{
      message.className = 'hidden';
    } 
  }else{
    // Input mode
    url  = 
      'http://localhost/xml/checkUserName.php?q=' + input;
    loadXMLDoc(url);
  }

}
</script>

<style>
span.hidden{
  display: none;
}

span.error{
  display: inline;
  color: black;
  background-color: pink;  
}
</style>

<input id="username" name="username" type="text" 
  onblur="checkName(this.value,'')" />
<span class="hidden" id="nameCheckFailed">
  This name is in use, please try another. 
</span>


en dit in checkUserName.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64		<?xml version="1.0" encoding="UTF-8" 
  standalone="yes"?>
<response>
  <method>checkName</method>
  <result>1</result>
</response>

<script language="javascript">
function processReqChange() 
{
    // only if req shows "complete"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            // ...processing statements go here...
      response  = req.responseXML.documentElement;

      method    =
response.getElementsByTagName('method')[0].firstChild.data;

      result    = 
response.getElementsByTagName('result')[0].firstChild.data;

      eval(method + '(\'\', result)');
        } else {
            alert("There was a problem retrieving the XML 
                data:\n" + req.statusText);
        }
    }
}
</script>


<?php
header('Content-Type: text/xml');

function nameInUse($q)
{  
  if (isset($q)){
    switch(strtolower($q))
    {
      case  'drew' :
          return '1';
          break;
      case  'fred' :
          return '1';
          break;
      default:
          return '0';
    }
  }else{
    return '0';
  }
  
}
?>
<?php echo '<?xml version="1.0" encoding="UTF-8"
  standalone="yes"?>'; ?>
<response>
  <method>checkName</method>
  <result><?php 
    echo nameInUse($_GET['q']) ?>
  </result>
</response>


maar ik krijg bij het blurren telkens een javascript error op regel 19

oftewel hij zou die pagina niet kunnen vinden ofzo? en dat terwijl hij echt in de map http://localhost/xml staat

[ Bericht 37% gewijzigd door BaggerUser op 24-09-2005 14:39:12 ]
wonkozaterdag 24 september 2005 @ 14:35
TVP
cyberstalkerzaterdag 24 september 2005 @ 15:17
En welke javascript error krijg je precies? 'een javascript error' is niet de meest duidelijke manier om je probleem te omschrijven.
R-Monzaterdag 24 september 2005 @ 15:26
form.php (moet de drie js functies hebben volgens mij)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87		<html>
<head>
<style>
span.hidden{
  display: none;
}

span.error{
  display: inline;
  color: black;
  background-color: pink;  
}
</style>

<script>
var req;

function loadXMLDoc(url) 
{
    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.send();
        }
    }
}

function checkName(input, response)
{
  if (response != ''){ 
    // Response mode
    message   = document.getElementById('nameCheckFailed');
    if (response == '1'){
      message.className = 'error';
    }else{
      message.className = 'hidden';
    } 
  }else{
    // Input mode
    url  = 
      'http://localhost/xml/checkUserName.php?q=' + input;
    loadXMLDoc(url);
  }

}

function processReqChange() 
{
    // only if req shows "complete"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            // ...processing statements go here...
      response  = req.responseXML.documentElement;

      method    =
response.getElementsByTagName('method')[0].firstChild.data;

      result    = 
response.getElementsByTagName('result')[0].firstChild.data;

      eval(method + '(\'\', result)');
        } else {
            alert("There was a problem retrieving the XML 
                data:\n" + req.statusText);
        }
    }
}
</script>
</head>
<body>
<input id="username" name="username" type="text" 
  onblur="checkName(this.value,'')" />
<span class="hidden" id="nameCheckFailed">
  This name is in use, please try another. 
</span>
</body>
</html>


checkUserName.php (je had het xml gedeeltje dubbel en een javascript functie erin)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31		<?php
header('Content-Type: text/xml');

function nameInUse($q)
{  
  if (isset($q)){
    switch(strtolower($q))
    {
      case  'drew' :
          return '1';
          break;
      case  'fred' :
          return '1';
          break;
      default:
          return '0';
    }
  }else{
    return '0';
  }
  
}
?>
<?php echo '<?xml version="1.0" encoding="UTF-8"
  standalone="yes"?>'; ?>
<response>
  <method>checkName</method>
  <result><?php 
    echo nameInUse($_GET['q']) ?>
  </result>
</response>
BaggerUserzaterdag 24 september 2005 @ 15:30
heb het veranderd naar wat jij had maar krijg deze foutmelding:

Regel : 82
Teken 1:
Fout: Object wordt verwacht
Code: 0
url: http://lovslhost/xml/form.php
R-Monzaterdag 24 september 2005 @ 15:39
quote:
Op zaterdag 24 september 2005 15:30 schreef BaggerUser het volgende:
heb het veranderd naar wat jij had maar krijg deze foutmelding:

Regel : 82
Teken 1:
Fout: Object wordt verwacht
Code: 0
url: http://lovslhost/xml/form.php
Ik kreeg dit eigenlijk:

Error: unterminated string literal
Source File: file:///c:/let/hier/niet/op/Text3.html
Line: 73, Column: 18
Source Code:
alert("There was a problem retrieving the XML

Staat dit op één regel bij jou?:
1alert("There was a problem retrieving the XML data:\n" + req.statusText);
cyberstalkerzaterdag 24 september 2005 @ 15:45
Gebruik anders Firefox om te testen, dan krijg je tenminste zinnige foutmeldingen, misschien dat we je dan kunnen helpen .
BaggerUserzaterdag 24 september 2005 @ 15:46
nu wel

maar ik krijg ngo steeds die foutmelding van 82
BaggerUserzaterdag 24 september 2005 @ 15:49
het lek eis daar krijg ik gewoon helemaal geen foutmeldingen
BaggerUserzaterdag 24 september 2005 @ 15:49
maar het werkt daar ook niet mee
R-Monzaterdag 24 september 2005 @ 16:22
Dit ook op één regel?
1<input id="username" name="username" type="text" onblur="checkName(this.value,'')" />


Mijn knippen en plakken zal wel een beetje fout gegaan zijn
BaggerUserzondag 25 september 2005 @ 12:57
ja nu idd dat ook op 1 regel en geen foutmeldingen meer
alleen bij fred of drew gebeurd niks verder

dus ergens gaat het mis (hij maakt in iedergeval de div niet visible)
vbmotzondag 25 september 2005 @ 13:14
quote:
Op zaterdag 24 september 2005 13:35 schreef R-Mon het volgende:
Hoewel er nog steeds wat php aan te pas moet komen, kan het ophalen van gegevens zonder te vernieuwen wel met Javascript. Ga dit eens lezen: http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
*Bookmarkt
Esczondag 25 september 2005 @ 13:21
Ik heb hier ook wel eens mee zitten kloten, mijn idee was toen een onzichtbaar iframe te maken, en daarin alle communicatie met de DB te regelen, vervolgens de data in een soort global javascript array gooien, maar echt elegant lijkt me die methode niet..
BaggerUserzondag 25 september 2005 @ 13:24
het probleem is er gebeurd zover ik zie weinig bij het blurren
( http://80.61.232.209/xml/form.php )
cyberstalkerzondag 25 september 2005 @ 13:28
quote:
Op zondag 25 september 2005 13:24 schreef BaggerUser het volgende:
het probleem is er gebeurd zover ik zie weinig bij het blurren
( http://80.61.232.209/xml/form.php )
Ik ook, maar dat komt omdat je verbinding probeert te maken met localhost, i.p.v. met 80.61.232.209

Als je dat even aanpast, kan ik even meekijken.
BaggerUserzondag 25 september 2005 @ 13:31
aangepast
cyberstalkerzondag 25 september 2005 @ 13:51
Het result veld in je checkuserName.php geeft een extra spatie mee, en 1[spatie] is niet hetzelfde als 1, en de match wordt dus nooit gemaakt .

Verder ben ik niet zo gecharmeerd van eval statements, maar dat moet je natuurlijk helemaal zelf weten.
BaggerUserzondag 25 september 2005 @ 13:58
ik zie die spatie niet ik kijk er volgens mij de hele tijd overheen
cyberstalkerzondag 25 september 2005 @ 14:03


Zoek de spatie !
BaggerUserzondag 25 september 2005 @ 14:08
weet je hoe vet hij werkt


het kwam doordat dat ook op meerdere regels was geplaatst daarom vond ik geen spatie, hoogstens een enter
BaggerUserzondag 25 september 2005 @ 14:43
oke dom van me... maar het is naturlijk niet mogelijk om de text in de div te verranderen met per naam een andere melding er in
cyberstalkerzondag 25 september 2005 @ 15:03
quote:
Op zondag 25 september 2005 14:43 schreef BaggerUser het volgende:
oke dom van me... maar het is naturlijk niet mogelijk om de text in de div te verranderen met per naam een andere melding er in
Waarom zou dat niet mogelijk zijn .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19		function checkName(input, response)
{
  if (response != ''){ 
    // Response mode
    message   = document.getElementById('nameCheckFailed');
    username  = document.getElementById('username').value;
    if (response == '1'){
      message.className = 'error';
      message.firstChild.nodeValue='The name ' + username + ' is in use, please try another.';
    }else{
      message.className = 'hidden';
    } 
  }else{
    // Input mode
    url  = 'http://localhost/xml/checkUserName.php?q=' + input;
    loadXMLDoc(url);
  }

}
BaggerUserzondag 25 september 2005 @ 15:19
ik heb die functie vervangen door de functie die jij geschreven hebt maar krijg een foutmelding.
maar volgens mij is dat nog niet helemaal wat ik bedoel, want hij moet zegmaar de text van de foutmelding uit de database halen.

dus hij moet uit checkUsername.php niet alleen 1 of 0 teruggeven maar ook een stukje text en die text moet in de div komen.. als je me nog volgt
R-Monzondag 25 september 2005 @ 17:31
quote:
Op zondag 25 september 2005 15:19 schreef BaggerUser het volgende:
ik heb die functie vervangen door de functie die jij geschreven hebt maar krijg een foutmelding.
maar volgens mij is dat nog niet helemaal wat ik bedoel, want hij moet zegmaar de text van de foutmelding uit de database halen.

dus hij moet uit checkUsername.php niet alleen 1 of 0 teruggeven maar ook een stukje text en die text moet in de div komen.. als je me nog volgt
Zo dat was lastig. checkUserName.php geeft nu een <result> en een <error> terug. Ook moest form.php aangepast worden om de <error> op te vangen.

form.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91		<html>
<head>
<style>
span.hidden{
  display: none;
}

span.error{
  display: inline;
  color: black;
  background-color: pink;  
}
</style>

<script>
var req;

function loadXMLDoc(url) 
{
    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.send();
        }
    }
}

function checkName(input, response, error)
{
  if (response != ''){ 
    // Response mode
    message   = document.getElementById('nameCheckFailed');
    if (response == '1'){
      message.className = 'error';
    }else{
      message.className = 'hidden';
    }
    if (error != '0') { //TOEGEVOEGD
      message.innerHTML = error;
   }else{
     message.innerHTML = '';
     }
    
  }
  else{
    // Input mode
    url  = 'checkUserName.php?q=' + input;
    loadXMLDoc(url);
  }

}

function processReqChange() 
{
    // only if req shows "complete"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            // ...processing statements go here...
      response = req.responseXML.documentElement;

      method = response.getElementsByTagName('method')[0].firstChild.data;

      result = response.getElementsByTagName('result')[0].firstChild.data;
      
      error = response.getElementsByTagName('error')[0].firstChild.data; //TOEGEVOEGD

      eval(method + '(\'\', result, error)');
        } else {
            alert("There was a problem retrieving the XML data:\n" + req.statusText);
        }
    }
}
</script>
</head>
<body>
<input id="username" name="username" type="text" onblur="checkName(this.value,'')" />
<span class="hidden" id="nameCheckFailed">
#nameCheckFailed
</span>
</body>
</html>


checkUserName.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41		<?php
header('Content-Type: text/xml');

if (isset($_GET['q'])){
   $q = $_GET['q'];
   strtolower($q);
   
   //query maken, kijken of q tussen de namen zit
   //zoja, $indb = 1;
   //zonee, $indb = 0;
   
   //EVEN EEN TEST DATABASE
   $db['fred'] = 'jammer, fred bestaat al!';
   $db['drew'] = 'drew is al bezet!';
   
   if(array_key_exists($q, $db)) { $indb = '1'; $error = $db[$q]; }
   else { $indb = '0'; $error = '0'; }
   //EINDE TEST DATABASE
   
   /* DEZE REGEL WEG
   
   if ($indb) {
      $error = ''; //SELECT error WHERE name=$q
      $error = 'gaat niet door'; // TEST, kan weg
   }
   else { $error = ''; } //niet in db, geen error, leeg laten
   
   DEZE REGEL WEG */
}
else { $indb = '0'; $error = '0'; } //als er niets is ingevuld kan er ook niets fout aan zijn

// $indb = <result>, en $error = <error>
// $error = '0'; betekent *alles okay, geen error*

?>
<?php echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>'; ?>
<response>
  <method>checkName</method>
  <result><?php echo $indb; ?></result>
  <error><?php echo $error; ?></error>
</response>


Ik heb een array als test-database gebruikt, fred en drew geven verschillende berichten. Even goed m'n comments lezen om hem aan te passen, en op hoop van zegen.
BaggerUsermaandag 26 september 2005 @ 11:15
geweldig
en het werkte in 1 keer he twas even kloten om het ook werkend te krijgen met plaatjes en extra regels text etc maar is ook gelukt geweldig dank jullie wel!
R-Monmaandag 26 september 2005 @ 15:35
quote:
Op maandag 26 september 2005 11:15 schreef BaggerUser het volgende:
geweldig
en het werkte in 1 keer he twas even kloten om het ook werkend te krijgen met plaatjes en extra regels text etc maar is ook gelukt geweldig dank jullie wel!
Graag gedaan, ik heb er zelf ook wat van geleerd. Waar ga je het voor gebruiken, als ik vragen mag?
Aaargh!maandag 26 september 2005 @ 15:59
quote:
Op zaterdag 24 september 2005 13:08 schreef BaggerUser het volgende:
of is er ook een mogelijkheuid om met b.v. javascript iets uit een mysql databse te halen en dan de etxt te verranderen zonder de hele pagina te refreshen? ik vrees van niet mar misschien kn iemand me iets verder helpen
http://en.wikipedia.org/wiki/AJAX