cel uit tabel opnieuw ophalen met Ajax

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bart C

Bart C

23/11/2012 22:09:13
Quote Anchor link
In navolging van een andere vraag wil ik een kalender opbouwen van waaruit ik kan aanklikken welke momenten van de week/dag een dokterspraktijk open is.
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)
PHP script in nieuw venster Selecteer het PHP script
1
    <a href="#" onClick="getInfo(this.id); id="36"><img ... /></a>


The Ajax
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
    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
    }


The PHP-file where I check if the practice is open or closed that day:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
    <?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>";
    ?>
 
PHP hulp

PHP hulp

05/02/2023 06:07:30
 
Frits Katoen

Frits Katoen

23/11/2012 23:48:48
Quote Anchor link
Volgens mij ben je zo idd op de goede weg, toch nog een paar tips:

- 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)
PHP script in nieuw venster Selecteer het PHP script
1
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>

?>
Gewijzigd op 23/11/2012 23:50:21 door Frits Katoen
 
Bart C

Bart C

24/11/2012 00:06:50
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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)
PHP script in nieuw venster Selecteer het PHP script
1
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>';


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
 
Frits Katoen

Frits Katoen

24/11/2012 13:08:20
Quote Anchor link
je kunt ook gewoon html code teruggeven vanuit de ajax-call, dus misschien is het makkelijker om de hele inhoud van de td te vervangen door de door het php-bestand gegenereerde html.

Het id-verhaal kun je als volgt oplossen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>';
?>


Je javascript wordt ongeveer als volgt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>

?>


Je ajax-scriptwordt dan iets als:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>';

        }
    }

?>


Je krijgt via je ajax-call nu de juiste html terug, dit moet je nog verwerken via je javascript:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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";
       }
    }
}

?>


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
 
Bart C

Bart C

25/11/2012 00:58:21
Quote Anchor link
Dag Fritz,

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
 
Frits Katoen

Frits Katoen

25/11/2012 01:04:14
Quote Anchor link
Haha foutje in de code....moest natuurlijk ook showInfo() zijn ipv getInfo() :)

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
 
Bart C

Bart C

25/11/2012 01:05:51
Quote Anchor link
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

Frits Katoen

25/11/2012 01:08:43
Quote Anchor link
Er zijn meerdere wegen die naar Rome leiden :)
 
Bart C

Bart C

25/11/2012 01:10:08
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
url: "./responsexml_calendar.php"+q,
data: { q: "?moment_id="+momentid+"&weekday="+weekday+"&sid="+Math.random()
 
Jurgen B

Jurgen B

25/11/2012 11:07:57
Quote Anchor link
The data option can contain either a query string of the form key1=value1&key2=value2, or a map of the form {key1: 'value1', key2: 'value2'}. (bron: http://api.jquery.com/jQuery.ajax/#sending-data-to-server)
 
Bart C

Bart C

25/11/2012 21:51:14
Quote Anchor link
Dom van mij: niet op gelet dat Fritz een type: "POST" gezet had terwijl ik op m'n php werk met $_GET...op die manier kan natuurlijk geen data worden doorgegeven

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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";
    })
}


Maar er wordt geen enkele parameter meegegeven
Gewijzigd op 26/11/2012 11:40:06 door Bart C
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.