PHP + Javascript
Ik ben bezig met een script waarbij gebruikers uit een selectie menu een categorie kunnen kiezen, waarna een nieuwe selectie menu verschijnt waarmee ze hun selectie verder kunnen specificeren (met een subcategorie). Dit gedeelte werkt al, maar het daaropvolgende gedeelte wilt maar niet lukken.
Ik wil namelijk mbv AJAX en de 2 variabelen die door de gebruiker zijn geselecteerd, een array vertonen waarin alle afbeeldingen worden getoond die met de 2 variabelen 'getagd' zijn.
Voorbeeld:
Gebruiker kiest categorie 'Voertuig' uit selectie (dropdown) menu 1. Hierdoor verschijnt er een tweede selectie menu genaamd 'subcategorieën', waaruit de gebruiker de selectie 'Auto' heeft gemaakt.
Met behulp van het AJAX script moeten de variabelen/tags 'Voertuig' en 'Auto' gebruikt worden om uit de database alle afbeeldingen te tonen die hier aan gekoppeld zijn.
Dit is de javascript code die na het formulier volgt:
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
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
<script language="Javascript">
function ajaxCall( urlStr, queryStr, divID ) {
var request = false;
var self = this;
if (window.XMLHttpRequest) {
// Mozilla and Safari
self.request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE
self.request = new ActiveXObject("Microsoft.XMLHTTP");
}
self.request.open( 'POST', urlStr, true );
self.request.setRequestHeader( 'Content-Type',
'application/x-www-form-urlencoded' );
self.request.onreadystatechange = function() {
if (self.request.readyState == 4) {
document.getElementById( divID ).innerHTML =
self.request.responseText;
}
}
document.getElementById( divID ).innerHTML =
'<ul id="loading-container"><li id="loading-row"><div id="loading-center"><img src="images/loading-gif.gif" alt="loading"/></div></li></ul>';
self.request.send( queryStr );
}
</script>
function ajaxCall( urlStr, queryStr, divID ) {
var request = false;
var self = this;
if (window.XMLHttpRequest) {
// Mozilla and Safari
self.request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE
self.request = new ActiveXObject("Microsoft.XMLHTTP");
}
self.request.open( 'POST', urlStr, true );
self.request.setRequestHeader( 'Content-Type',
'application/x-www-form-urlencoded' );
self.request.onreadystatechange = function() {
if (self.request.readyState == 4) {
document.getElementById( divID ).innerHTML =
self.request.responseText;
}
}
document.getElementById( divID ).innerHTML =
'<ul id="loading-container"><li id="loading-row"><div id="loading-center"><img src="images/loading-gif.gif" alt="loading"/></div></li></ul>';
self.request.send( queryStr );
}
</script>
Ik wil er uiteindelijk voor zorgen dat de informatie verwerkt wordt in een extern bestand. Dit is momenteel een .PHP bestand, hoewel ik niet weet of dit beter in een javascript bestand moet gebeuren omdat dit een json_encode() scheelt. De informatie moet, na in het PHP bestand verwerkt te zijn, in de regel 'self.request.responseText;' het stukje 'responseText' gaan vervangen.
In een ander stukje Javascript wordt het selectiemenu voor de subcategorie aangemaakt, hierin worden de variabelen voor de bovenstaande Javascript functie gedefinieerd. Hieronder staat het gedeelte dat terugslaat op de vorige code:
Code (php)
1
2
3
4
5
2
3
4
5
...
<select class="select subselect" name="df2" onchange="JavaScript:ajaxCall(\'js/ajax/printdesign.php\', \'dfilter=\' + escape( this.form.df1.value, this.form.df2.value ), \'designs\' )">
...
<select class="select subselect" name="df2" onchange="JavaScript:ajaxCall(\'js/ajax/printdesign.php\', \'dfilter=\' + escape( this.form.df1.value, this.form.df2.value ), \'designs\' )">
...
Om het te verduidelijken:
urlStr = 'js/ajax/printdesign.php'
Dit is de bestandslocatie van het gedeelte dat de responseText moet gaan vervangen.
queryStr = 'dfilter= + escape( this.form.df1.value, this.form.df2.value )'
Met deze query wil ik de 2 variabelen doorsturen. In het originele voorbeeld, waarvan ik deze functie heb afgeleid, werd er maar 1 variabele behandeld en stond er dus maar 1 keer 'this.form.selectName.value' tussen de haakjes. Ik weet niet of ik hier al de fout in ben gegaan.
divID= 'designs'
Dit is de ID van de div waarin de content wordt vertoond.
De selectiemenu's worden verder goed weergegeven. Het punt is dat ik deze code heb afgeleid van een Twiki voorbeeld dat in TML is geschreven, en daar heb ik 0,0 ervaring mee. Ik wil de variabelen doorsturen naar een extern bestand waarin ik netjes de array kan ophalen en terugsturen naar de Javascript functie.
Mijn vraag: Hoe moet ik dat in hemelsnaam doen?
Ik heb voorlopig als 'placeholder' een .php bestand gemaakt waarin ik test wat wel en niet lukt (met weinig succes).
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
if(isset($_GET['dfilter'])){
$dfilter = mysql_escape_string($_GET['dfilter']);
// Moet ik deze variabele hier wel nog eens escapen?
// of gebeurd dit nu dubbelop?
// Vervolgens moet er een stuk code komen waarmee ik een array
// voor de afbeeldingen aanmaak, welke ik vervolgens terug kan
// sturen naar de Javascript (of HTML) code.
} else {
// Tags worden niet gevonden of er is een fout voorgekomen:
$dfilter = '<div class="statusmsg">Can\'t find any designs. Please try refining your search or select a different catergory. If you would like to submit a new design, please visit the <a href="">submit new design page</a>.</div>';
}
// Het volgende gedeelte is tijdelijk en wordt vervangen zodra ik het
// pagination gedeelte in Javascript heb aangemaakt.
$dfilter .= '<br/>results<br/><p><-previous | 1/100 | next-></p>';
?>
if(isset($_GET['dfilter'])){
$dfilter = mysql_escape_string($_GET['dfilter']);
// Moet ik deze variabele hier wel nog eens escapen?
// of gebeurd dit nu dubbelop?
// Vervolgens moet er een stuk code komen waarmee ik een array
// voor de afbeeldingen aanmaak, welke ik vervolgens terug kan
// sturen naar de Javascript (of HTML) code.
} else {
// Tags worden niet gevonden of er is een fout voorgekomen:
$dfilter = '<div class="statusmsg">Can\'t find any designs. Please try refining your search or select a different catergory. If you would like to submit a new design, please visit the <a href="">submit new design page</a>.</div>';
}
// Het volgende gedeelte is tijdelijk en wordt vervangen zodra ik het
// pagination gedeelte in Javascript heb aangemaakt.
$dfilter .= '<br/>results<br/><p><-previous | 1/100 | next-></p>';
?>
Ik krijg hierbij in eerste instantie niks terug, ik zie alleen heel kort mijn loading-gif verschijnen bij een nieuwe selectie.
Ik heb om te experimenteren tijdelijk de volgende code in < div id="designs"> geplaatst:
Daarbij zie ik na een pageload eerste de inhoud van de ELSE statement verschijnen, maar zodra ik een selectie maak is de DIV wederom leeg en zie ik de loading-gif weer voorbij komen.
Mijn conclusie is dus dat ik:
OF de variabelen verkeerd doorgeef, waardoor ze niet eens bij printdesign.php aankomen. Maar dan snap ik niet waarom er niet constant een lege DIV verschijnt ipv de ELSE statement.
OF ik formuleer de code verkeerd in het PHP bestand waardoor de javascript functie er niets mee kan.
OF ik snap er totaal geen bal van.
Ik heb een donkerbruin vermoeden dat mijn laatste stelling van kracht is. Dus als iemand anders hier raad mee weet, dan zou het mij enorm helpen als dit persoon tips kan geven!
Graag commentaar!
Groeten,
Chris
PS. Het lukt me niet om dit te wijzigen, maar de eerste 2 stukjes code zijn dus Javascript, en geen PHP...
Toevoeging op 11/07/2012 23:45:39:
Mijn vraag hierboven gaat puur over het heen en weer sturen van gegevens tussen de javascript functie en een extern bestand (eventueel PHP?), en niet over het aanmaken van de array etc in het PHP bestand.
Ik hoef geen kant en klare code, maar heb even iemand nodig die naar mijn code kijkt omdat ik het gevoel heb dat ik iets belangrijks over het hoofd zie. Ik ben al langer dan 12 uur (aan andere bestanden) aan het scripten en ben daarom misschien iets te moe om mijn fouten gelijk te herkennen...
Gewijzigd op 11/07/2012 23:50:38 door Christopher A
Ik neem aan dat je samen werkt met een database voor de plaatjes?
Als dit zo is: Moet je dan niet in je .php file een query verwerken om de gegevens op te halen vanuit de database. En dan dit via de keys "Voertuig" en "Auto"
Verder zie ik in de .php file staan:
Die mysql_escpade_string() word doorgaans na mijn weten alleen gebruikt om SQL_injection tegen te gaan in query's. Of dit gebruikt word in Javascript weet ik niet.
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
//in je javascript zet je:
self.request.open( 'POST', urlStr, true );
//in php doe je
$dfilter = mysql_escape_string($_GET['dfilter']);
// verander dit in
$dfilter = mysql_escape_string($_POST['dfilter']);
//
if(isset($_POST['dfilter'])){
$dfilter = mysql_escape_string($_POST['dfilter']);
// Moet ik deze variabele hier wel nog eens escapen?
// ** JA, alleen hoef je hem niet nog eens aan een variabele toe te wijzen
// of gebeurd dit nu dubbelop? Nee
// Vervolgens moet er een stuk code komen waarmee ik een array
// voor de afbeeldingen aanmaak, welke ik vervolgens terug kan
// sturen naar de Javascript (of HTML) code.
} else {
// Tags worden niet gevonden of er is een fout voorgekomen:
$dfilter = '<div class="statusmsg">Can\'t find any designs. Please try refining your search or select a different catergory. If you would like to submit a new design, please visit the <a href="">submit new design page</a>.</div>';
/*********************************************************************
Je vergeet te echoen
*********************************************************************/
echo $dfilter;
}
// Het volgende gedeelte is tijdelijk en wordt vervangen zodra ik het
// pagination gedeelte in Javascript heb aangemaakt.
$dfilter .= '<br/>results<br/><p><-previous | 1/100 | next-></p>';
?>
//in je javascript zet je:
self.request.open( 'POST', urlStr, true );
//in php doe je
$dfilter = mysql_escape_string($_GET['dfilter']);
// verander dit in
$dfilter = mysql_escape_string($_POST['dfilter']);
//
if(isset($_POST['dfilter'])){
$dfilter = mysql_escape_string($_POST['dfilter']);
// Moet ik deze variabele hier wel nog eens escapen?
// ** JA, alleen hoef je hem niet nog eens aan een variabele toe te wijzen
// of gebeurd dit nu dubbelop? Nee
// Vervolgens moet er een stuk code komen waarmee ik een array
// voor de afbeeldingen aanmaak, welke ik vervolgens terug kan
// sturen naar de Javascript (of HTML) code.
} else {
// Tags worden niet gevonden of er is een fout voorgekomen:
$dfilter = '<div class="statusmsg">Can\'t find any designs. Please try refining your search or select a different catergory. If you would like to submit a new design, please visit the <a href="">submit new design page</a>.</div>';
/*********************************************************************
Je vergeet te echoen
*********************************************************************/
echo $dfilter;
}
// Het volgende gedeelte is tijdelijk en wordt vervangen zodra ik het
// pagination gedeelte in Javascript heb aangemaakt.
$dfilter .= '<br/>results<br/><p><-previous | 1/100 | next-></p>';
?>
Frank WD op 12/07/2012 03:28:58:
Ik neem aan dat je samen werkt met een database voor de plaatjes?
Als dit zo is: Moet je dan niet in je .php file een query verwerken om de gegevens op te halen vanuit de database. En dan dit via de keys "Voertuig" en "Auto"
Als dit zo is: Moet je dan niet in je .php file een query verwerken om de gegevens op te halen vanuit de database. En dan dit via de keys "Voertuig" en "Auto"
Klopt! Dit wilde ik in het PHP bestand gaan uitvoeren waar ik het commentaar had geplaatst. De plaatsjes worden geüpload aan de hand van een HoofdTag (Voertuig), een SubTag (Auto) en een unieke ID, bijvoorbeeld:'voertuig_auto_12345678.jpg'. Die tags wil ik dan mbv AJAX zien te achterhalen zonder een pageload zodat de gebruiker zonder haperingen kan rondspelen met de gewenste afbeeldingen en ook de vrijheid heeft om deze te veranderen zonder telkens op die pageload te wachten.
Frank WD op 12/07/2012 03:28:58:
Verder zie ik in de .php file staan:
Die mysql_escpade_string() word doorgaans na mijn weten alleen gebruikt om SQL_injection tegen te gaan in query's. Of dit gebruikt word in Javascript weet ik niet.
Die mysql_escpade_string() word doorgaans na mijn weten alleen gebruikt om SQL_injection tegen te gaan in query's. Of dit gebruikt word in Javascript weet ik niet.
Ik voer de escape eerst uit in de Query String uit de Javascript functie:
Code (php)
1
queryStr = 'dfilter= + escape( this.form.df1.value, this.form.df2.value )'
Maar Ger verteld zojuist dat het niet nutteloos is om de escape dubbel uit te voeren dus dat is in ieder geval opgelost!
Ger van Steenderen op 12/07/2012 08:14:43:
@Christopher
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
//in je javascript zet je:
self.request.open( 'POST', urlStr, true );
//in php doe je
$dfilter = mysql_escape_string($_GET['dfilter']);
// verander dit in
$dfilter = mysql_escape_string($_POST['dfilter']);
//?>
//in je javascript zet je:
self.request.open( 'POST', urlStr, true );
//in php doe je
$dfilter = mysql_escape_string($_GET['dfilter']);
// verander dit in
$dfilter = mysql_escape_string($_POST['dfilter']);
//?>
Aaaaaaah, wat stom van me! Ik zal m'n werkuren eens gaan inkorten zodat ik voortaan met een helder hoofd dit soort stommiteiten voorkom... Bedankt voor de tip!
Ger van Steenderen op 12/07/2012 08:14:43:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<?
} else {
// Tags worden niet gevonden of er is een fout voorgekomen:
$dfilter = '<div class="statusmsg">Can\'t find any designs. Please try refining your search or select a different catergory. If you would like to submit a new design, please visit the <a href="">submit new design page</a>.</div>';
/*********************************************************************
Je vergeet te echoen
*********************************************************************/
echo $dfilter;
}
?>
} else {
// Tags worden niet gevonden of er is een fout voorgekomen:
$dfilter = '<div class="statusmsg">Can\'t find any designs. Please try refining your search or select a different catergory. If you would like to submit a new design, please visit the <a href="">submit new design page</a>.</div>';
/*********************************************************************
Je vergeet te echoen
*********************************************************************/
echo $dfilter;
}
?>
Alweer zo'n fout waarvoor ik m'n hoofd tegen m'n bureau wil slaan... Ik heb de echo voor de ?> sluit tag geplaatst zodat de '$dfilter .=' toevoeging ook mee wordt genomen.
Nu zie ik eindelijk licht aan het eind van de tunnel! Er wordt in ieder geval iets geprint waardoor ik zie dat het php bestand 'werkt':
Code (php)
1
2
3
4
5
6
2
3
4
5
6
// HTML code/tekst
voertuigvoertuig
results
<-previous | 1/100 | next->
voertuigvoertuig
results
<-previous | 1/100 | next->
Het probleem is nu nog dat de value van de submenufilter niet wordt gevonden, in plaats daarvan wordt de waarde van het eerste selectiemenu 2x geprint.
En om d'r een schepje bovenop te doen veranderd deze waarde (in dit geval 'voertuigvoertuig' niet in iets anders wanneer ik een andere optie uit het eerste menu selecteer, hoewel ik wel telkens mijn loading-gif tussen het maken van selecties door zie verschijnen.
Ik zal eens grondig m'n code door gaan lezen! Alvast bedankt voor jullie hulp!
Toevoeging op 12/07/2012 16:01:46:
Christopher A op 12/07/2012 15:36:27:
Het probleem is nu nog dat de value van de submenufilter niet wordt gevonden, in plaats daarvan wordt de waarde van het eerste selectiemenu 2x geprint.
Het dubbele printen is opgelost. Ik had ergens in de code nogmaals een echo aangemaakt...
Toevoeging op 12/07/2012 16:29:28:
Ik zal gister wel heel moe zijn geweest... Ik had in de onchange waarde van de andere selectie opties psuedocode ingevoerd waardoor er niks werd uitgevoerd bij een keuze hiervan.
Dit probleem is nu dus ook opgelost, hoewel ik wel nog steeds alleen maar de value van het eerste selectiemenu terug krijg!
Zodra ik die andere waarde ook op m'n scherm zie verschijnen post ik in deze thread de oplossing daarvoor.
Ik besef me zojuist dat ik gister in de staat waarin ik toen verkeerde aan nog meer scripts heb geprutst... Dat wordt dus een dagje script nakijken op stomme foutjes... *zucht*
Gewijzigd op 12/07/2012 16:30:56 door Christopher A