AJAX, PHP en MySQL agenda

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ad Vertentie

Ad Vertentie

11/12/2019 12:34:13
Quote Anchor link
Maanden ben ik al op zoek naar een oplossing, diverse scriptpogingen heb ik al ondernomen.
Ik moet tot de conclusie komen dat het maar niet lijkt te lukken.

Wat ik wil is (volgens mij) niet eens zo heel spannend, echter met gebrek aan kennis / een goed voorbeeld is het redelijk onmogelijk om het werkend te krijgen.

Wat wil ik?
Een realtime agenda gaan bouwen met slechts 1 filter mogelijkheid.
De filter mogelijkheid zit in een pulldown (hierbij kan ik selecteren welke agenda ik wil zien b.v. Klanten agenda, Prive agenda, To do agenda)
De volgende stap is een agenda welke (in mijn situatie) een agenda welke dmv a href een datum naar de ajax call zou kunnen schieten (andere / betere mogelijkheden welkom!).


// index.php
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<? session_start(); ? >
<
html>
<
head>

<
script>
function
showCal(str) {
    if (str == "") {
        document.getElementById("cal").innerHTML = "";
        return;
    }
else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("cal").innerHTML = this.responseText;
            }
        };

        xmlhttp.open("GET","cal.php?q="+str,true);
        xmlhttp.send();
    }
}

</script>

</head>
<body>
<? $checked=intval($_SESSION['cal2show']); ?>
<div id="container" style="position: absolute;">
    <div id="lefttop" style="width:300px; height: 100px;float: left;display:inline-block;">
    <form action="<? echo $_SERVER['PHP_SELF']; ?>">
       <select name="agenda" onchange="showCal(this.value)">
       <option value="" <? if ($checked=='') {echo "SELECTED"; } ?>>Select Agenda:</option>
       <option value="1" <? if ($checked=='') {echo "SELECTED"; } ?>>1</option>
       <option value="2" <? if ($checked=='') {echo "SELECTED"; } ?>>2</option>
       <option value="3" <? if ($checked=='') {echo "SELECTED"; } ?>>3</option>
       </select>
    </form>
    </div>

    <div id="cal" style="width:1000px; float:left; display:inline-block;"></div>
    <div id="leftbot" style="width:1300px; float: left;">
    <a href="cal.php?day=10&month=12&year=2019">Today</a><br/>
    <a href="cal.php?day=11&month=12&year=2019">11-10-2019</a><br/>
    <a href="cal.php?day=12&month=12&year=2019">12-10-2019</a><br/>
    </div>
    

</div>
</body>
</html>

//call.php
<pre>
<? print_r($_REQUEST); ?>
</pre>

?>

Tevens is het de bedoeling om de selecties 'vast' te houden bij b.v. een page refresh, ik had gedacht om dit middels een sessie te gaan doen.
Wie kan me op weg helpen. (ik heb nog erg weinig ervaring met AJAX)
Gewijzigd op 11/12/2019 12:40:11 door Ad Vertentie
 
PHP hulp

PHP hulp

29/01/2020 00:11:49
 
Frank Nietbelangrijk

Frank Nietbelangrijk

11/12/2019 21:08:16
Quote Anchor link
Ik weet niet hoe ver je inmiddels bent maar vanaf het begin zou je je probleem moeten opdelen in meerdere stappen. Ook kun je in een later stadium AJAX aanroepen toevoegen. Bijvoorbeeld

1.Een database met een tabel waarin de "afspraken" komen en bepalen welke kolommen deze tabel krijgt. (bijvoorbeeld agenda_id welke een koppeling zou kunnen zijn aan een tabel "agendas").
2. Wat php functies die een afspraak kunnen lezen, aanmaken, wijzigen en verwijderen uit de database.
3. Wat php functies die afspraken over een bepaalde periode (dag, week, maand) uit de database kunnen halen.
4. PHP formulier waarmee je een afspraak kan toevoegen of wijzigen
5. een of meerdere agenda pagina's maken (bijvoorbeeld dag, week, maand overzicht).
5. Een login en gebruikers registratie. Immers wil je niet dat iedereen in je agenda komt
6. AJAX toepassingen
7. Het verslepen van afspraken met javascript

Waarom ben je er zo zeker van dat het element 'cal2show' in de $_SESSION aanwezig is? Of moet je dat misschien eerst nog even checken met isset()?
 
Ad Vertentie

Ad Vertentie

11/12/2019 22:50:11
Quote Anchor link
Hi Frank,

Thx voor je reactie.
Inmiddels een uur of 20 verder en ik krijg een slecht humeur van AJAX.
Dat komt voornamelijk omdat ik de kennis mis.

Ik heb een testmodel gemaakt, en dat lijkt bijna te werken echter mis ik nog wat kennis / stukjes.
Als ik in de console kijk van chrome, verdubbelt het aantal requests per click, klik je lang genoeg loopt het script vast.

Momenteel test ik met het volgende:
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
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
92
93
94
<?
<!doctype html>
<
html lang="en">
<
head>
  <
meta charset="utf-8">
  <
title>serialize demo</title>
  <
style>
  body, select {
    font-size: 12px;
  }

  form {
    margin: 5px;
  }

  p {
    color: red;
    margin: 5px;
    font-size: 14px;
  }

  b {
    color: blue;
  }
  <
/style>
<
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


</head>
<body>
 
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
 
  <br>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>
 
  <br>
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>
 
  <br>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>
 
<? //<p><tt id="results"></tt></p> ?>
<div id="contents">Contents:</div>
<script>


  function showValues() {
    var str = $( "form" ).serialize();
    $( "#results" ).text( str );
    $.ajax({
    type: 'get',
    url: 'cal.php',
    data:  str,
    success: function (str) {
        if(str.msgtype=="success")
                          {
                             clearconsole();
                           }    
    $( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
    $( "select" ).on( "change", showValues );
    
    },
    })
 
 
 $('#contents').load('cal.php', str);    
  };
 
 
 showValues();


</script>                    

 
 
 </script>


</body>
</html>
?>


Er gaan een paar dingen mis in het serialize verhaal.
Als ik een print_r($_REQUEST); doe in cal.php zie ik de waardes verschijnen (dat is goed).
Ik krijg ze voor dit moment nog niet afgevangen, echter is dat van latere zorg.

Wat ontbreekt (in mijn kennis) is het laden van cal.php (welke een agenda wordt) welke aan de hand van de selecties, realtime de agenda weergeeft.
Zodra iets in de dropdown / checkbox of radioboxes aangepast wordt, dient dit ook meteen zichtbaar te zijn.
Voor nu ga ik onder de wol, ik krijg er treurige zin van..
Mocht je tips of raad hebben... heel graag!
 
Frank Nietbelangrijk

Frank Nietbelangrijk

12/12/2019 15:36:25
Quote Anchor link
- Bij de multiple select en de checkboxen kun je het beste blokhaken ( [] ) achter de naam zetten zodat je een array terugkrijgt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<select name="multiple[]" multiple="multiple">

- Zet je javascript helemaal onder in het <body> deel van je pagina, ook de jquery 'include'.
- Als je JQuery gebruikt gebruik dan ook de JQuery .ready() functie om te voorkomen dat je script te vroeg van start gaat.
- Als je een formulier submit met of zonder AJAX dan is het advies meestal om de POST methode te gebruiken. Althans als je data aanlevert die je gaat opslaan op de server of er een of andere actie door bewerkstelligd wordt.
- Je kunt bij een ajax request kiezen wat voor response je terug geeft. Dit kan echt van alles zijn maar meestal gebruik je JSON. In de JSON kunnen ook weer stukjes HTML meegegeven worden.
- De fout die je maakte was om telkens weer opnieuw event handlers toe te voegen aan de HTML attributen.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$("select").on("change", showValues);
$("select").on("change", showValues);
$("select").on("change", showValues);

Bovenstaande resulteert er in dat als er een ander item gekozen wordt in de select dat de functie showValues() drie keer aangeroepen wordt in plaats van een keer.

Soms worden de HTML elementen ververst zoals je nu doet met de contents div. Dan kun je het beste over stappen op event delegation in plaats van rechtstreeks events aan deze elementen te koppelen.

Hier een werkend voorbeeldje.
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
<?php

// Indien geen post method
$data = ['status' => 'failed', 'message' => 'Only POST method accepted.'];

// Indien wel post method
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    
    // default value for count = 0
    $count = 0;

    // Als voorbeeldje tellen we het aantal geselecteerde items in de multiple select.
    if(isset($_POST['multiple'])) {
        $count = count($_POST['multiple']);
    }

    
    // response data
    $data = [
        'status' => 'success',
        'result' => '<h1 class="header">Hallo Wereld!</h1>',
        'post' => $_POST, // for debugging
        'selected' => 'Aantal geselecteerde items in de multiple: ' . $count
    ];
    
}


header('Content-Type: application/json');

echo json_encode($data);
?>


en:
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>serialize demo</title>
    </head>
    <body>

        <form>
            <select name="single">
                <option>Single</option>
                <option>Single2</option>
            </select>

            <br>
            <select name="multiple[]" multiple="multiple">
                <option selected="selected">Multiple</option>
                <option>Multiple2</option>
                <option selected="selected">Multiple3</option>
            </select>

            <br>
            <input type="checkbox" name="check[]" value="check1" id="ch1">
            <label for="ch1">check1</label>
            <input type="checkbox" name="check[]" value="check2" checked="checked" id="ch2">
            <label for="ch2">check2</label>

            <br>
            <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
            <label for="r1">radio1</label>
            <input type="radio" name="radio" value="radio2" id="r2">
            <label for="r2">radio2</label>
        </form>

        <div id="contents">Contents:</div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
            function showValues() {
                var str = $("form").serialize();
                $("#results").text(str);
                
                $.ajax({
                    method: 'post',
                    url: 'cal.php',
                    data: str,
                    success: function (data) {
                        console.log(data);
                        if (data.status == "success")
                        {
                            $('#contents').html(data.result); // plak de data.result in the contents div.
                        } else {
                            alert(data.message);
                        }
                    },
                })
            }
            
            $( document ).ready(function() {
                $("input[type='checkbox'], input[type='radio']").on("click", showValues);
                $("select").on("change", showValues);
                showValues();
            });
        </script>                    
    </body>
</html>
Gewijzigd op 12/12/2019 15:55:21 door Frank Nietbelangrijk
 



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.