[PHP, JS, AJAX, HTML] Her laad DIV

[Verwijderd]

Hallo,

Voor een project ben ik een punten lijst aan het maken. Nu heb ik een dropdown menu waarmee eindgebruikers kunnen filteren. Wat ik daar heb aangegeven is dat als hij veranderd dat hij de form submit. Nu werkt dit wel maar wat ik eigenlijk wil is dat de onchange aangeeft dat er een DIV opnieuw moet worden geladen met de info die nu in de POST word mee gegeven.

Nu heb ik (natuurlijk) zelf al gezocht maar ik kon helaas niet iets goed bruikbaars vinden.

[Hipska]

Waarop heb je gezocht? En wat heb je gevonden? Lijkt me stug dat je daar niets over kon vinden, want dat is haast de meest gebruikte toepassing van het AJAX principe.

En daarnaast, wat heb je zelf al geprobeerd en wat werkt er niet aan?

[spleethoven]

Dit is een basis oefening waar je duizenden dingen van vind op het internet.

Misschien kan je eens naar JQuery en Ajax googlen, daar kom je al een heel eind mee.

[Verwijderd]

Veelal de .load() heb ik kunnen vinden. Maar steeds (maakt niet uit hoe) krijg ik het niet voor elkaar om dat iets te laten doen. http://api.jquery.com/load/#urldatacallback

[Mike2k]

doe ons eens wat code?

[Martijn19]

Je kan met .change() kijken of de dropdown verandert, dan kan je gebruik maken van .ajax() om een post te doen. In de succes handler van .ajax() kan je de terug gestuurde data met .html() in een #div zetten

[ Voor 29% gewijzigd door Martijn19 op 23-03-2012 10:02 ]

[Verwijderd]

HTML:

<form method="post" name="desites" action="<?php $_SERVER['PHP_SELF'] ?>">
<select name="dedesite" onChange='javascript:$("#lijstwrapper").load("lijst.php #lijstwrapper");'>
<option value=""><?php echo $Desite?></option>
    <?php 
        foreach($uitkomst as $domein){
        echo "<option value='".$domein['Domein']."'>" . $domein['Domein'] . "</option>";
        }
    ?>
</select>
</form>
<div class="lijstwrapper">
</div>

Dit is een van de manieren die ik heb geprobeerd

[Martijn19]

Voeg bij <select> ook een id mee, bijvoorbeeld <select id="dedesite" name=......etc>

JavaScript:

<script type="text/javascript">

$(function() {

$("#dedesite").change(function() {

var formData = $("#desites").serialize();

 $.ajax({

  type: "POST",
  url: "post.php",
  data: formData,
  dataType: html,
  success: function(data) {
    $("#divThatNeedsToBeChanged").html(data);
  } 

})

}

}

</script>

Zo uit mijn hoofd moet zoiets wel werken, ben verre van javascript expert. In de jquery api kan je vast meer informatie vinden over de functies die ik gebruik (change, serialize, ajax)

Dit is ook een goede course http://tutsplus.com/course/30-days-to-learn-jquery/ helemaal gratis.

[Verwijderd]

dank u, maar nu weet ik nog niet precies waar ik wat moet implementeren

[Martijn19]

Dit script kan je gewoon onder je formulier zetten, maar ik raad ten sterkste de Tutsplus jQuery course aan, dat zal het snappen van dit soort dingen een heel stuk makkelijker maken

[Woy]

Verwijderd schreef op vrijdag 23 maart 2012 @ 10:21:
dank u, maar nu weet ik nog niet precies waar ik wat moet implementeren

Je mag wel iets meer eigen inzet tonen, op deze manier wil je alleen aan het handje gehouden worden. Ik zou zeggen probeer het gewoon eens, en mocht het niet lukken start dan een nieuw topic.

Hou daarbij dan wel rekening met De Quickstart. Je topic is namelijk wel erg karig. We willen graag zien wat je al geprobeerd hebt, wat daar anders mee ging dan je verwachte. Als je gezocht hebt willen we ook graag weten wat je wel gevonden hebt en waarom dat niet voldeed aan wat jij wilde.

Als laatste wil ik je de tip geven om je probleem in meerdere kleine sub-delen op te splitsen. Zoals je in je titel al kunt zien ben je op dit moment met veel te veel te gelijk bezig. Begin eerst eens met het maken van een PHP pagina die de juiste data levert, probeer die dan via javascript te laden. Probeer daarna om deze in een div te tonen, en als laatste kun je dat allemaal aan elkaar knopen om het in het onchange event van een van je elementen te doen.

Dit topic doe ik in ieder geval op slot