Query opnieuw uitvoeren zonder pagina refresh
Ik zit met het volgende probleem:
Er zijn 2 select vakjes met beide dezelfde mogelijkheden.
De mogelijkheden worden uit een tabel gehaald met een query.
Bij het veranderen wordt de keuze direct opgeslagen in de database via AJAX.
Als je bij 1 bijv. A kiest is het de bedoeling dat je bij 2 geen A meer kan kiezen.
De query waaruit de mogelijkheden worden gehaald, moet dus opnieuw worden uitgevoerd zonder dat de pagina ververst.
Heeft iemand enig idee, hoe ik dat voor elkaar krijg?
Maar is het verwijderen van optie A uit select-vak 2 met Javascript niet makkelijker?
Voorbeeld: je kan kiezen uit:
KEUZE 1: Haarlem, Utrecht, Den Haag, Arnhem
KEUZE 2: Haarlem, Utrecht, Den Haag, Arnhem
Bij KEUZE 1 kies ik Utrecht.
Dan moet "Utrecht dus verwijderd worden uit KEUZE 2:
KEUZE 1: Utrecht
KEUZE 2: Haarlem, Den Haag, Arnhem
Dan kan ik dus Haarlem, Den Haag of Arnhem kiezen.
Als beide select-dingen hetzelfde zijn, is dit een eitje. Dit kan makkelijk met Javascript (en met iets als jQuery of Mootools nog makkelijker).
Even pseudo: ALS select1.val() != '' >> select2.val() - select1.val() ...
Hier de codes, ik hoop dat iemand mijn op weg kan helpen.
PHP bestand:
<script type="text/javascript" src="/js/verander.js"></script>
<table>
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
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
<?
$array = array("Verdedigend", "Middenveld", "Aanvallend");
$i = 1;
foreach($array AS $value) {
echo'
<tr>
<td>
'.$value.':
</td>
<td>
<select name="'.$value.'" onchange="showUser(this.value);">
<option value="0-'.$value.'">Geen</option>
';
$array2 = array("Keeper", "Verdediger", "Middenvelder", "Aanvaller");
foreach($array2 AS $value2) {
echo'<option disabled>'.$value2.'s</option>';
$trainen = mysql_query("SELECT a.spelerid, a.trainenp, b.voornaam, c.achternaam FROM spelers AS a, voornamen AS b, achternamen AS c, posities AS d WHERE a.voornaamid = b.voornaamid AND a.achternaamid = c.achternaamid AND a.positieid = d.positieid AND d.soort = '".$value2."' AND (a.trainenp = '".$value."' OR a.trainenp = '') AND a.teamid = ".$teamid."");
while($tra = mysql_fetch_assoc($trainen)){
echo'<option ';
if($tra['trainenp'] == $value) {
echo'selected ';
}
echo'value="'.$tra['spelerid'].'-'.$value.'">'.$tra['voornaam'].' '.$tra['achternaam'].'</option>';
}
}
echo'</select>
</td>
<td id="txtHint'.$i.'">
</td>
</tr>
';
$i++;
}
?>
$array = array("Verdedigend", "Middenveld", "Aanvallend");
$i = 1;
foreach($array AS $value) {
echo'
<tr>
<td>
'.$value.':
</td>
<td>
<select name="'.$value.'" onchange="showUser(this.value);">
<option value="0-'.$value.'">Geen</option>
';
$array2 = array("Keeper", "Verdediger", "Middenvelder", "Aanvaller");
foreach($array2 AS $value2) {
echo'<option disabled>'.$value2.'s</option>';
$trainen = mysql_query("SELECT a.spelerid, a.trainenp, b.voornaam, c.achternaam FROM spelers AS a, voornamen AS b, achternamen AS c, posities AS d WHERE a.voornaamid = b.voornaamid AND a.achternaamid = c.achternaamid AND a.positieid = d.positieid AND d.soort = '".$value2."' AND (a.trainenp = '".$value."' OR a.trainenp = '') AND a.teamid = ".$teamid."");
while($tra = mysql_fetch_assoc($trainen)){
echo'<option ';
if($tra['trainenp'] == $value) {
echo'selected ';
}
echo'value="'.$tra['spelerid'].'-'.$value.'">'.$tra['voornaam'].' '.$tra['achternaam'].'</option>';
}
}
echo'</select>
</td>
<td id="txtHint'.$i.'">
</td>
</tr>
';
$i++;
}
?>
</table>
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
45
46
47
48
49
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
<?
verander.js
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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 (xmlhttp.readyState==4 && xmlhttp.status==200)
{
arr = str.split("-");
if(arr[1] == "Verdedigend") {
document.getElementById("txtHint1").innerHTML=xmlhttp.responseText;
}
else if(arr[1] == "Middenveld") {
document.getElementById("txtHint2").innerHTML=xmlhttp.responseText;
}
else {
document.getElementById("txtHint3").innerHTML=xmlhttp.responseText;
}
}
}
xmlhttp.open("GET","js.php?q="+str,true);
xmlhttp.send();
}
js.php
[code]<?php
//Keuze wordt in de database gezet.
echo'<img src="/img/vink_groen.png"/>';
?>
verander.js
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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 (xmlhttp.readyState==4 && xmlhttp.status==200)
{
arr = str.split("-");
if(arr[1] == "Verdedigend") {
document.getElementById("txtHint1").innerHTML=xmlhttp.responseText;
}
else if(arr[1] == "Middenveld") {
document.getElementById("txtHint2").innerHTML=xmlhttp.responseText;
}
else {
document.getElementById("txtHint3").innerHTML=xmlhttp.responseText;
}
}
}
xmlhttp.open("GET","js.php?q="+str,true);
xmlhttp.send();
}
js.php
[code]<?php
//Keuze wordt in de database gezet.
echo'<img src="/img/vink_groen.png"/>';
?>
Gewijzigd op 24/08/2012 16:14:49 door Rob van der W
Ik vind js.php wel grappig..... je noemt iets JS om uiteindelijk alleen maar 1 statisch HTML-regeltje te geven...
Daarnaast een aantal verbeterpunten:
1. <? moet je niet gebruiken. Gebruik <?php
2. Probeer consequent in te springen
3. Definieer variabelen zo vroeg mogelijk. Liefst bovenaan je script. Zeker als het niet dynamischi (afhankelijk van andere variabelen is).
4. Gebruik goede namen voor je variabelen... $array en $array2 zeggen niets
Ik heb jouw code iets gewijzigd... Met extra classes op de <select> en <option>.
Dat kan je gebruiken voor een simpel Javascript.
Persoonlijk zou ik geen AJAX gebruiken, maar gewoon Javascript om de <selects> te wijzigen.
Niet verwijderen (want dan vervallen gemaakte keuzes), maar dat element gewoon 'verbergen'.
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
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
<?php
$plaatsen = array("Verdedigend", "Middenveld", "Aanvallend");
$rollen = array("Keeper", "Verdediger", "Middenvelder", "Aanvaller");
$i = 1;
foreach($plaatsen AS $plaats)
{
echo '<tr>
<td>'.$value.':</td>
<td><select class="'.$plaats.' name="'.$plaats.'" onchange="showUser(this.value);">
<option value="0-'.$plaats.'">Geen</option>';
foreach($rollen AS $rol)
{
echo'<option disabled>'.$rol.'s</option>';
$trainen = mysql_query("SELECT a.spelerid, a.trainenp, b.voornaam, c.achternaam FROM spelers AS a, voornamen AS b, achternamen AS c, posities AS d WHERE a.voornaamid = b.voornaamid AND a.achternaamid = c.achternaamid AND a.positieid = d.positieid AND d.soort = '".$rol."' AND (a.trainenp = '".$plaats."' OR a.trainenp = '') AND a.teamid = ".$teamid."");
while($tra = mysql_fetch_assoc($trainen))
{
$selected = '';
if($tra['trainenp'] == $plaats)
{
$selected = 'selected';
}
echo'<option class="spelerid_'.$tra['spelerid'].'" '.$selected.' value="'.$tra['spelerid'].'-'.$plaats.'">'.$tra['voornaam'].' '.$tra['achternaam'].'</option>';
}
}
echo' </select></td>
<td id="txtHint'.$i.'"></td>
</tr>';
$i++;
}
?>
$plaatsen = array("Verdedigend", "Middenveld", "Aanvallend");
$rollen = array("Keeper", "Verdediger", "Middenvelder", "Aanvaller");
$i = 1;
foreach($plaatsen AS $plaats)
{
echo '<tr>
<td>'.$value.':</td>
<td><select class="'.$plaats.' name="'.$plaats.'" onchange="showUser(this.value);">
<option value="0-'.$plaats.'">Geen</option>';
foreach($rollen AS $rol)
{
echo'<option disabled>'.$rol.'s</option>';
$trainen = mysql_query("SELECT a.spelerid, a.trainenp, b.voornaam, c.achternaam FROM spelers AS a, voornamen AS b, achternamen AS c, posities AS d WHERE a.voornaamid = b.voornaamid AND a.achternaamid = c.achternaamid AND a.positieid = d.positieid AND d.soort = '".$rol."' AND (a.trainenp = '".$plaats."' OR a.trainenp = '') AND a.teamid = ".$teamid."");
while($tra = mysql_fetch_assoc($trainen))
{
$selected = '';
if($tra['trainenp'] == $plaats)
{
$selected = 'selected';
}
echo'<option class="spelerid_'.$tra['spelerid'].'" '.$selected.' value="'.$tra['spelerid'].'-'.$plaats.'">'.$tra['voornaam'].' '.$tra['achternaam'].'</option>';
}
}
echo' </select></td>
<td id="txtHint'.$i.'"></td>
</tr>';
$i++;
}
?>
Toevoeging op 24/08/2012 16:26:23:
En kan je even de gegeneerde HTML van hierboven even ergens online gooien?
Gewijzigd op 24/08/2012 16:25:55 door Eddy E
Heb al van alles geprobeerd met remove, maar het wil maar niet lukken.
Eddy Erkelens op 24/08/2012 16:12:48:
En kan je even de gegeneerde HTML van hierboven even ergens online gooien?
Liefst zonder inlog etc?
Van dat script werkt gewoon alles.
Met jQuery op bovenstaande code:
Code (php)
1
$(".spelerid_1234").hide();
Maar dat verbergt alle options bij die speler. Je wilt dat alleen bij je laatst gewijzigde select niet.
Je zal met jQuery kunnen kijken of de select wijzigt (met onChange wellicht makkelijker?).
En dan bij de andere selects (hun ID heb je) de options daarin verwijderen.
Dat kan dus zo:
Code (php)
1
2
2
$("select#middenveld option.spelerid_1234").hide();
$("select#verdediging option.spelerid_1234").hide();
$("select#verdediging option.spelerid_1234").hide();
Dit moet je dus doen bij het wijzigen van de spits.
Ga maar eens kijken naar jQuery en wat bovenstaande doet.
jQuery (maar ook andere Javascript-frames) gebruiken de CSS-selectie-dingen.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script>
$("select.Verdedigend").change(function () {
$("select.Middenveld option.spelerid_3").hide();
$("select.Aanvallend option.spelerid_3").hide();
})
.change();
</script>
$("select.Verdedigend").change(function () {
$("select.Middenveld option.spelerid_3").hide();
$("select.Aanvallend option.spelerid_3").hide();
})
.change();
</script>
Het doet nog niets. Maar zit ik op de goede weg?
Gewijzigd op 25/08/2012 18:59:42 door Rob van der W
Eddy Erkelens op 25/08/2012 19:02:51:
Ja. Alleen die laatste .change() mag gewoon weg.
Ok. Maar wat doe ik nu nog fout?
Maakt het uit of het boven- of onderaan de pagina staat?
Eddy Erkelens op 25/08/2012 19:28:22:
Je roept wel ergens jQuery.js aan? Als dit het enige is, doet het helemaal niets inderdaad.
Dat was ik inderdaad vergeten.
Het verbergen is nu gelukt, maar hoe moet het nu weer getoond worden als de select voor de tweede keer veranderd?
Toevoeging op 26/08/2012 12:42:50:
Het werkt nu helemaal!
Eddy, bedankt voor de hulp.
Gewijzigd op 25/08/2012 23:38:30 door Rob van der W