cel uit tabel opnieuw ophalen met Ajax
Voorbeeld: http://www.restaurantterpolder.be/wachtkamer/vast.php
Dit schema is een standaardschema dat voor elke week gebruikt wordt. Daarom sla ik geen datum op maar wel de dag van de week. Standaard is het altijd gesloten. De open momenten worden dan opgeslagen in de databank.
tbl_open(ID, Weekday, Moment_ID, Doctor_ID)
Ik wil vermijden dat de pagina telkens terug naar boven springt wanneer je één van de onderste links aanklikt...nogal irritant. Een jQuery scrollto-functie bleek niet ideaal.
Ik heb het even geprobeerd en wil graag weten of m'n start goed is. Daarom denk ik dat ik dit nodig heb:
- een event op de pagina die de functie aanroep -> onClick=getInfo(this.id);. Dit wil ik triggeren wanneer ik op een link klik of misschien op de image die er staan. Is dat mogelijk?
- het js-bestand van waaruit het php-script opgeroepen wordt en waarna de info uit het xml-bestand gelezen wordt.
- php-bestand waarin 1)de data opgeslagen wordt na het klikken op de kalender 2)de nieuwe data ingeladen wordt 3)het xml-bestand gecreëerd wordt.
Klopt dit zo wat?
Code (php)
1
<a href="#" onClick="getInfo(this.id); id="36"><img ... /></a>
The Ajax
Code (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
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
var xmlHttp
//gegevens verzamelen om de juiste info uit de database te kunnen halen
function showInfo(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="responsexml_calendar.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
//info is uit de database gehaald en wordt nu in het formulier geplaatst
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
xmlDoc = xmlHttp.responseXML;
document.getElementById("...").value = xmlDoc.getElementsByTagName("class")[0].childNodes[0].nodeValue;
document.getElementById("...").value = xmlDoc.getElementsByTagName("link")[0].childNodes[0].nodeValue;
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
//gegevens verzamelen om de juiste info uit de database te kunnen halen
function showInfo(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="responsexml_calendar.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
//info is uit de database gehaald en wordt nu in het formulier geplaatst
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
xmlDoc = xmlHttp.responseXML;
document.getElementById("...").value = xmlDoc.getElementsByTagName("class")[0].childNodes[0].nodeValue;
document.getElementById("...").value = xmlDoc.getElementsByTagName("link")[0].childNodes[0].nodeValue;
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
The PHP-file where I check if the practice is open or closed that day:
Code (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
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
<?php
require('./functions.php');
connectdb();
//SAVE OR DELETE DATA IN DATABASE FIRST (still need to code this)
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
$query = 'SELECT ID
FROM tbl_open
WHERE ID = '.$q.'
$result = mysql_query($query) or die('foutmelding query ajax');
if (mysql_num_rows($result) > 0)
{
$class = 'class = "normal"';
$link = '<a onClick="getInfo(this.id); id="tbl_close_id"><img ... /></a><img src="./img/edit.png" /></a>'. PHP_EOL;
}
else
{
$class = 'class="unavailable"';
$link = '<a onClick="getInfo(this.id); id="tbl_close_id"><img ... /></a><img src="./img/edit.png" /></a>'. PHP_EOL;
}
echo '[code]<?xml version="1.0" encoding="ISO-8859-1"?>
<info>';
echo "<class>" .$class. "</class>";
echo "<link>" .$link. "</link>";
echo "</info>";
?>
require('./functions.php');
connectdb();
//SAVE OR DELETE DATA IN DATABASE FIRST (still need to code this)
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
$query = 'SELECT ID
FROM tbl_open
WHERE ID = '.$q.'
$result = mysql_query($query) or die('foutmelding query ajax');
if (mysql_num_rows($result) > 0)
{
$class = 'class = "normal"';
$link = '<a onClick="getInfo(this.id); id="tbl_close_id"><img ... /></a><img src="./img/edit.png" /></a>'. PHP_EOL;
}
else
{
$class = 'class="unavailable"';
$link = '<a onClick="getInfo(this.id); id="tbl_close_id"><img ... /></a><img src="./img/edit.png" /></a>'. PHP_EOL;
}
echo '[code]<?xml version="1.0" encoding="ISO-8859-1"?>
<info>';
echo "<class>" .$class. "</class>";
echo "<link>" .$link. "</link>";
echo "</info>";
?>
- Gebruik een javascript library als jQuery of Prototype, dit maakt de Ajax-calls etc een stuk makkelijker.
- id's van html-tags mogen niet alleen uit cijfers bestaan
- escape de waarden die je gebruikt in de query (in dit geval de variabele $q)
in jQuery ziet je functie showInfo er als volgt uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
<script type="text/javascript">
function showInfo(str){
$.ajax({
type: "POST",
url: "responsexml_calendar.php",
data: { q: str }
}).done(function( msg ) {
xmlDoc = msg;
$("...").value = xmlDoc.getElementsByTagName("class")[0].childNodes[0].nodeValue;
$("...").value = xmlDoc.getElementsByTagName("link")[0].childNodes[0].nodeValue;
}
}
</script>
?>
<script type="text/javascript">
function showInfo(str){
$.ajax({
type: "POST",
url: "responsexml_calendar.php",
data: { q: str }
}).done(function( msg ) {
xmlDoc = msg;
$("...").value = xmlDoc.getElementsByTagName("class")[0].childNodes[0].nodeValue;
$("...").value = xmlDoc.getElementsByTagName("link")[0].childNodes[0].nodeValue;
}
}
</script>
?>
Gewijzigd op 23/11/2012 23:50:21 door Frits Katoen
Frits Katoen op 23/11/2012 23:48:48:
- id's van html-tags mogen niet alleen uit cijfers bestaan
Dank je Frits,
ik heb zelf niet stilgezeten en ben al iets verder maar de opmerking hierboven is inderdaad een probleem.
Voorlopig werk ik zo:
Code (php)
1
2
3
2
3
<td align="center" onselectstart="return false;" class="unavailable">
<a href="#" onClick="showInfo(this.id);" id="weekday=1&moment=1&action=available"><img src="./img/edit.png" /></a>
</td>
<a href="#" onClick="showInfo(this.id);" id="weekday=1&moment=1&action=available"><img src="./img/edit.png" /></a>
</td>
Dat lukt blijkbaar perfect alhoewel het niet mag (zie id) zoals je in je opmerking schrijft. De onClick geeft netjes de string van de id mee en het javascript en php doen hun werk.
Alleen krijg ik, zoals verwacht, een foutmelding bij het opstellen van mijn xml-bestand dat deze onjuist gevormd is.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
//Deze zaken wil ik dus in mijn xml meegeven
$class = 'class="unavailable"';
$link = '<a href="#" id="vast.php?weekday='.$weekday.'&moment='.$moment_id.'&action=available"><img src="./img/edit.png" /></a>'. PHP_EOL;
}
echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<info>
<class>' .$class. '</class>
<link>' .$link. '</link>
</info>';
$class = 'class="unavailable"';
$link = '<a href="#" id="vast.php?weekday='.$weekday.'&moment='.$moment_id.'&action=available"><img src="./img/edit.png" /></a>'. PHP_EOL;
}
echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<info>
<class>' .$class. '</class>
<link>' .$link. '</link>
</info>';
Op welke manier kan ik dan alle parameters meegeven zoals weekday, moment en action?
En in principe moet ik ook de <td> hernieuwen want daarin moet de css-klasse gewijzigd worden zodat ik een andere achtergrond krijg die aangeeft of dat moment de praktijk open of dicht is...
Nu schrijf ik enkel de momenten weg in de database waarop de praktijk open is. Misschien moet ik alle momenten wegschrijven en werken met een bool. Dan kan ik bij elke link de id vanuit de database meegeven. Dan moet ik ook geen insert of delete doen maar enkel een update van het record in de tabel.
Gewijzigd op 24/11/2012 00:23:23 door Bart C
Het id-verhaal kun je als volgt oplossen:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php
// de td ook een id geven omdat je hiervan de innerhtml wilt vervangen
echo '<td id="col_'.$weekday.'_'.$moment_id.'" align="center" onselectstart="return false;" class="unavailable">';
// het hele element meegeven aan de functie, niet alleen het id (is handiger, je kunt dan ook nog andere handelingen op het element uitvoeren)
echo '<a href="#" onclick="showInfo(this);" id="moment_'.$weekday.'_'.$moment_id.'"><img src="./img/edit.png" /></a>';
echo '</td>';
?>
// de td ook een id geven omdat je hiervan de innerhtml wilt vervangen
echo '<td id="col_'.$weekday.'_'.$moment_id.'" align="center" onselectstart="return false;" class="unavailable">';
// het hele element meegeven aan de functie, niet alleen het id (is handiger, je kunt dan ook nog andere handelingen op het element uitvoeren)
echo '<a href="#" onclick="showInfo(this);" id="moment_'.$weekday.'_'.$moment_id.'"><img src="./img/edit.png" /></a>';
echo '</td>';
?>
Je javascript wordt ongeveer als volgt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
<script type="text/javascript">
//helaas even globaal maken omdat we deze in twee functies gebruiken
var weekday;
var momentid;
function showInfo(str){
// -- knip ajax code --
// het id van de variabele/element str is iets als: moment_5_33
// deze gaan we opsplitsen zodat je weekday en momentid eruit kunt halen
weekday = parseInt( str.id.split('_')[1] );
momentid = parseInt( str.id.split('_')[2] );
// met deze variabelen kun je nu de url voor de ajaxcall opbouwen, bijv
var url="responsexml_calendar.php?moment_id="+momentid+"&weekday="+weekday+"&sid="+Math.random();
}
</script>
?>
<script type="text/javascript">
//helaas even globaal maken omdat we deze in twee functies gebruiken
var weekday;
var momentid;
function showInfo(str){
// -- knip ajax code --
// het id van de variabele/element str is iets als: moment_5_33
// deze gaan we opsplitsen zodat je weekday en momentid eruit kunt halen
weekday = parseInt( str.id.split('_')[1] );
momentid = parseInt( str.id.split('_')[2] );
// met deze variabelen kun je nu de url voor de ajaxcall opbouwen, bijv
var url="responsexml_calendar.php?moment_id="+momentid+"&weekday="+weekday+"&sid="+Math.random();
}
</script>
?>
Je ajax-scriptwordt dan iets als:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
require('./functions.php');
connectdb();
if(ctype_digit($_GET['momentid']) && ctype_digit($_GET['weekday'])){
$query = "SELECT ID FROM tbl_open WHERE Moment_ID = '".$_GET['momentid']."' AND Weekday = '".$_GET['weekday']."'";
$result = mysql_query($query) or die('foutmelding query ajax');
if (mysql_num_rows($result) > 0){ // moment bestaat in db, dus deze verwijderen
mysql_query("DELETE FROM tbl_open WHERE Moment_ID = '".$_GET['momentid']."' AND Weekday = '".$_GET['weekday']."'");
// de nieuwe inhoud voor de td echo-en
echo '<a onclick="getInfo(this);" id="moment_'.$_GET['weekday'].'_'.$_GET['momentid'].'">hier de juiste img etc..</a>';
}
else{ // moment bestaat nog niet, deze invoegen
mysql_query("INSERT etc..");
// de inhoud voor de td echo-en
echo '<a onclick="getInfo(this);" id="moment_'.$_GET['weekday'].'_'.$_GET['momentid'].'">hier de andere juiste img etc..</a>';
}
}
?>
require('./functions.php');
connectdb();
if(ctype_digit($_GET['momentid']) && ctype_digit($_GET['weekday'])){
$query = "SELECT ID FROM tbl_open WHERE Moment_ID = '".$_GET['momentid']."' AND Weekday = '".$_GET['weekday']."'";
$result = mysql_query($query) or die('foutmelding query ajax');
if (mysql_num_rows($result) > 0){ // moment bestaat in db, dus deze verwijderen
mysql_query("DELETE FROM tbl_open WHERE Moment_ID = '".$_GET['momentid']."' AND Weekday = '".$_GET['weekday']."'");
// de nieuwe inhoud voor de td echo-en
echo '<a onclick="getInfo(this);" id="moment_'.$_GET['weekday'].'_'.$_GET['momentid'].'">hier de juiste img etc..</a>';
}
else{ // moment bestaat nog niet, deze invoegen
mysql_query("INSERT etc..");
// de inhoud voor de td echo-en
echo '<a onclick="getInfo(this);" id="moment_'.$_GET['weekday'].'_'.$_GET['momentid'].'">hier de andere juiste img etc..</a>';
}
}
?>
Je krijgt via je ajax-call nu de juiste html terug, dit moet je nog verwerken via je javascript:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
xmlDoc = xmlHttp.responseText;
if(xmlDoc != '' && xmlDoc != undefined){
// de td pakken die gevuld moet worden
var l_td = document.getElementById("col_"+weekday+"_"+momentid);
l_td.innerHTML = xmlDoc;
// de classname van de td nog even aanpassen naar de juiste:
if(l_td.className == "normal") l_td.className = "unavailable";
else l_td.className = "normal";
}
}
}
?>
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
xmlDoc = xmlHttp.responseText;
if(xmlDoc != '' && xmlDoc != undefined){
// de td pakken die gevuld moet worden
var l_td = document.getElementById("col_"+weekday+"_"+momentid);
l_td.innerHTML = xmlDoc;
// de classname van de td nog even aanpassen naar de juiste:
if(l_td.className == "normal") l_td.className = "unavailable";
else l_td.className = "normal";
}
}
}
?>
Bovenstaande code is uit de losse pols, niet getest, maar ik hoop dat het je in de juiste richting helpt.
Edit:
responseXML veranderd in responseText
Gewijzigd op 24/11/2012 13:49:47 door Frits Katoen
hartelijk dank voor je hulp. Het werkt perfect.
Alleen jammer dat, buiten alle verwachtingen om, de pagina toch terug naar boven scrollt bij het aanklikken van de onderste cellen. Ik had verwacht dat hij enkel de cel zou aanpassen zonder meer.
Dat komt, veronderstel ik, door de href="#" ?
Nu nog enkel de call met een jQuery afhandelen zoals in één van je vorige opmerkingen!
Gewijzigd op 25/11/2012 01:02:06 door Bart C
Toevoeging op 25/11/2012 01:05:25:
Je kunt dat verspringen trouwens opvangen door de <a href> die om de img heen staat te verwijderen en de onclick aan de img te hangen.
Vergeet dan niet om de <a> tag ook uit het ajax antwoord te halen en de image te stylen met style="pointer: cursor;" zodat je netjes een handje krijgt als je boven de image hangt (net als bij een link)
Gewijzigd op 25/11/2012 01:08:07 door Frits Katoen
Frits Katoen op 25/11/2012 01:04:14:
Haha foutje in de code....moest natuurlijk ook showInfo() zijn ipv getInfo() :)
Mea culpa, ik had getInfo() gezet op het forum terwijl er showInfo() op mijn pagina stond...
En wat dat scrollen betreft, dat is opgelost : onClick="showInfo(this.id); return false" did the trick!
Frits Katoen op 25/11/2012 01:08:43:
Er zijn meerdere wegen die naar Rome leiden :)
De volgende weg leidt mij nu naar bed ;-)
Een prettig weekend verder gewenst!
Toevoeging op 25/11/2012 10:36:47:
Wat moet er precies in de data ingevuld worden? Ik veronderstel de parameters maar ik vind geen concreet voorbeeld als ik google:
Code (php)
1
2
2
url: "./responsexml_calendar.php"+q,
data: { q: "?moment_id="+momentid+"&weekday="+weekday+"&sid="+Math.random()
data: { q: "?moment_id="+momentid+"&weekday="+weekday+"&sid="+Math.random()
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function showInfo(str)
{
weekday = parseInt( str.split('_')[1] );
momentid = parseInt( str.split('_')[2] );
$.ajax({
type: "POST",
url: "./responsexml_calendar.php",
data: { moment_id : momentid, weekday : weekday, sid : Math.random() }
}).done(function( msg ){
xmlDoc = msg;
// de td pakken die gevuld moet worden
var l_td = document.getElementById("col_"+weekday+"_"+momentid);
l_td.innerHTML = xmlDoc;
// de classname van de td nog even aanpassen naar de juiste:
if(l_td.className == "normal") l_td.className = "unavailable";
else l_td.className = "normal";
})
}
{
weekday = parseInt( str.split('_')[1] );
momentid = parseInt( str.split('_')[2] );
$.ajax({
type: "POST",
url: "./responsexml_calendar.php",
data: { moment_id : momentid, weekday : weekday, sid : Math.random() }
}).done(function( msg ){
xmlDoc = msg;
// de td pakken die gevuld moet worden
var l_td = document.getElementById("col_"+weekday+"_"+momentid);
l_td.innerHTML = xmlDoc;
// de classname van de td nog even aanpassen naar de juiste:
if(l_td.className == "normal") l_td.className = "unavailable";
else l_td.className = "normal";
})
}
Maar er wordt geen enkele parameter meegegeven
Gewijzigd op 26/11/2012 11:40:06 door Bart C