PHP + Javascript

He lui,

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="JAVASCRIPT"]
<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>
[/code]

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="JAVASCRIPT"]
...

<select class="select subselect" name="df2" onchange="JavaScript:ajaxCall(\'js/ajax/printdesign.php\', \'dfilter=\' + escape( this.form.df1.value, this.form.df2.value ), \'designs\' )">

...
[/code]

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"]
<?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>';

?>
[/code]

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:
[code="PHP"]
<?
include ("printdesign.php");
echo $dfilter;
?>
[/code]

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...

[size=xsmall]Toevoeging op 11/07/2012 23:45:39:[/size]

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...