 HTML interesse |
|
Ik heb hier een klein voorbeeldje gemaakt.
De refresh_div.html bevat de twee div's en de code voor het ophalen van de gegevens uit content_for_div.php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Refresh div on click</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#div_1 ul li").click( function() {
$.post("content_for_div.php", {optie: $(this).text()}, function(result) {
if(result != "")
$("#div_2").html(result);
});
});
});
</script>
</head>
<body>
<div id="div_1" style="position: relative; width: 200px; height: 200px; border: 1px solid black;">
<ul>
<li>optie 1</li>
<li>optie 2</li>
<li>optie 3</li>
</ul>
</div>
<br />
<div id="div_2" style="position: relative; width: 200px; height: 200px; border: 1px solid black;"> </div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> $(document).ready( function() { $("#div_1 ul li").click( function() { $.post("content_for_div.php", {optie: $(this).text()}, function(result) { if(result != "") $("#div_2").html(result); }); }); }); <div id="div_1" style="position: relative; width: 200px; height: 200px; border: 1px solid black;"> <div id="div_2" style="position: relative; width: 200px; height: 200px; border: 1px solid black;"> </div>
<?php
if( isset( $_POST['optie'] ) && $_POST['optie'] != "" ) {
switch ($_POST['optie']) {
case "optie 1":
echo "U hebt gekozen voor optie 1";
break;
case "optie 2":
echo "U hebt gekozen voor optie 2";
break;
case "optie 3":
echo "U hebt gekozen voor optie 3";
break;
default:
echo "Gekozen optie is default";
break;
}
}
?>
<?php if( isset( $_POST['optie'] ) && $_POST['optie'] != "" ) { switch ($_POST['optie']) { case "optie 1": echo "U hebt gekozen voor optie 1"; break; case "optie 2": echo "U hebt gekozen voor optie 2"; break; case "optie 3": echo "U hebt gekozen voor optie 3"; break; default: echo "Gekozen optie is default"; break; } } ?>
Denk er wel aan dat je zelf even jquery moet dowloaden en in een bestandje jquery.js moet zetten.
gr, |
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
