 Moderator |
|
Je zou met AJAX (heeft jQuery ook uitgebreid gereedschap voor) een PHP-script kunnen aanroepen die de HTML teruggeeft met specifieke logo's (op grond van id). Afhankelijk van beveiliging / afscherming van informatie (mag bedrijf met id X popup-informatie zien van bedrijf Y of mag een anonieme partij dit script rechtstreeks aanroepen zonder identificatie van wie dit is) moet dit script aan meer eigenschappen voldoen. AJAX is uitermate geschikt voor het "on-the-fly laden van dynamische content".
EDIT: werkend voorbeeld.
De pagina met de "inline popup div" (test.ajax.htm):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script src="/pad/naar/jouw/jquery.js" type="text/javascript"></script>
<style type="text/css">
<!--
div#contentDiv { width: 500px; height: 200px; border: 1px solid #ff0000; }
//-->
</style>
</head>
<body>
<div>
<a href="?company=1" class="contentClick">company 1</a>
<a href="?company=2" class="contentClick">company 2</a>
<a href="?company=3" class="contentClick">company 3</a>
</div>
<div id="contentDiv">Hier wordt de company-content in geladen</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('a.contentClick').click(function(e) {
e.preventDefault(); // voorkom standaard klikafhandeling (volg de link waarop is geklikt niet)
$.ajax({ // voer een AJAX-request uit met de volgende instellingen (dit is standaard een GET-request)
'url': 'test.ajax.php'+$(this).attr('href'), // plak de querystring van de link vast aan de link waar het AJAX-request naartoe wordt gestuurd
'dataType': 'html', // het type content wat je terugkrijgt is HTML
'success': function(data) { // functie die uitgevoerd moet worden na het succesvol uitgevoerde request, data is de data (HTML) die je terugkrijgt
$('div#contentDiv').html(data); // vul de company-div met de HTML die je terugkrijgt
}
});
});
});
//]]>
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script src="/pad/naar/jouw/jquery.js" type="text/javascript"></script> <!-- div#contentDiv { width: 500px; height: 200px; border: 1px solid #ff0000; } //--> <a href="?company=1" class="contentClick">company 1 </a> <a href="?company=2" class="contentClick">company 2 </a> <a href="?company=3" class="contentClick">company 3 </a> <div id="contentDiv">Hier wordt de company-content in geladen </div> <script type="text/javascript"> //<![CDATA[ $().ready(function() { $('a.contentClick').click(function(e) { e.preventDefault(); // voorkom standaard klikafhandeling (volg de link waarop is geklikt niet) $.ajax({ // voer een AJAX-request uit met de volgende instellingen (dit is standaard een GET-request) 'url': 'test.ajax.php'+$(this).attr('href'), // plak de querystring van de link vast aan de link waar het AJAX-request naartoe wordt gestuurd 'dataType': 'html', // het type content wat je terugkrijgt is HTML 'success': function(data) { // functie die uitgevoerd moet worden na het succesvol uitgevoerde request, data is de data (HTML) die je terugkrijgt $('div#contentDiv').html(data); // vul de company-div met de HTML die je terugkrijgt } }); }); }); //]]>
PHP-script voor afhandeling AJAX-calls (test.ajax.php):
<?php
// je kunt de werking van dit script goed testen door deze rechtstreeks aan te roepen met ?company=X
// maar normaal doe je dit dus alleen via AJAX-requests
// houd er wel rekening mee dat dit script rechtstreeks te benaderen is, ook door kwaadwillenden!
// normale "best practises" zoals "filter input, escape output" zijn dus nog steeds -zoals in elk script- van kracht
// controles / initialisatie
if (isset($_GET['company']) && is_numeric($_GET['company'])) {
$companyId = $_GET['company'];
} else {
$companyId = 0;
}
// output buffering, niet per se nodig, maar wel handig, geen gezever met (het escapen van) quotes en echo's
ob_start();
// simulatie van queries op een database o.i.d. (bestaande bedrijven: 1, 2 en 3, rest is onbekend)
switch ($companyId) {
case 1:
?><h1>Company 1</h1><?php
break;
case 2:
?><h2>Company 2</h2><?php
break;
case 3:
?><h3>Company 3</h3><?php
break;
default:
?><i>Bedrijf niet gevonden</i><?php
}
// druk de HTML in de output buffer af op het scherm
echo ob_get_clean();
?>
<?php // je kunt de werking van dit script goed testen door deze rechtstreeks aan te roepen met ?company=X // maar normaal doe je dit dus alleen via AJAX-requests // houd er wel rekening mee dat dit script rechtstreeks te benaderen is, ook door kwaadwillenden! // normale "best practises" zoals "filter input, escape output" zijn dus nog steeds -zoals in elk script- van kracht // controles / initialisatie $companyId = $_GET['company']; } else { $companyId = 0; } // output buffering, niet per se nodig, maar wel handig, geen gezever met (het escapen van) quotes en echo's // simulatie van queries op een database o.i.d. (bestaande bedrijven: 1, 2 en 3, rest is onbekend) switch ($companyId) { case 1: ?><h1>Company 1</h1><?php break; case 2: ?><h2>Company 2</h2><?php break; case 3: ?><h3>Company 3</h3><?php break; default: ?><i>Bedrijf niet gevonden</i><?php } // druk de HTML in de output buffer af op het scherm ?>
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
