Archief - AJAX: simpel gevalletje van data ophalen

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
j

joyraider

Legacy Member
Ok, ben aan nieuwe website bezig en ik dacht er wat AJAX in te proppen, om er wat mee te experimenteren. Ik ben nu bezig met een basis-scriptje, maar bepaalde dingen vind ik niet, en Google begrijpt blijkbaar ook niet helemaal wat ik zoek :)

Ik heb dus een portfolio-pagina met een select-box. Hierin staan 4 items: webdesign, grafisch design, visualisatie en motion design. Als ik bijv. visualisatie aanklik, krijg ik onder de select-box het lijstje van visualisatie-projecten (zonder refreshen, daarmee m'n keuze voor AJAX).

M'n javascriptje (geplukt van de w3schools-tutorial):

Code: 
<script type="text/javascript">
function getPortfolio()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
        document.result.value=xmlHttp.responseText;
        }
      }
    xmlHttp.open("GET","getportfolio.php",true);
    xmlHttp.send(null);
  }
</script>

De pagina zelf:
HTML: 
<form name="portfolio">
<select class="dropdown" onclick="getPortfolio();" name="portfolio">
<option value="1">Webdesign</option>
<option value="2">Grafisch design</option>
<option value="3">Visualisatie</option>
<option value="4">Motion graphics</option>
</select>
</form>
<div name="result"></div>

En dan tenslotte getportfolio.php, die het uit de database haalt:

PHP: 
<?
$sql = "SELECT * FROM tblportfolio WHERE category = '??' ORDER BY date DESC";

$resultaat = mysql_query($sql);

while ($record = mysql_fetch_object($resultaat)) {
echo "blabla $record->name $record->url etc etc";
}

?>

Nu heb ik 2 vragen:

&#8226; Hoe geef ik aan getportfolio.php te kennen dat ik bvb alleen categorie 3 wil? Ofwel, hoe laat ik JavaScript de value van m'n selectbox doorgeven aan de php-pagina?

&#8226; Kan ik het resultaat netjes in mijn div 'result' gooien, of moet ik hiervoor gaan rotzooien omdat het geen form-element is?

Ik dank u alvast! :)
j

joyraider

Legacy Member
Heerlijk, werkt perfect! :) Zeer bedankt.

Net wel even in IE getest, en daar moet ik een optie selecteren én nog eens op de <select> klikken voor het resultaat (event-thingy is 'onmousedown'). Enig idee hoe ik dit kan verhelpen?
I

Incinnerator

Legacy Member
Probleem is dat je met de pijltjes selecteerd maar nog is op enter drukken of met de muis echt klikken?

ik dacht de onBlur event waaraan je de javascript functie moet koppelen

weet het ni zeker

Greetz
Incinnerator
j

joyraider

Legacy Member
Ah nevermind, heb een beter alternatief gevonden: onChange! ;)

Zeer bedankt voor je hulp :)
I

Incinnerator

Legacy Member
no problem

rekening komt achteraf wel ;)

Greetz
Incinnerator
j

joyraider

Legacy Member
Blijkbaar werkt m'n rollover-script (javascript) nu wel niet meer, enig idee wat er foutgaat? :/

HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" />
<?php
$page = $_GET['p'];
?>
<title>nmx - new media development - <? echo $page; ?></title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script language="Javascript" type="text/javascript">
function getPortfolio()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
        document.getElementById("result").innerHTML=xmlHttp.responseText;
        }
      }
    var waarde=document.portfolio.selectie.value;
    xmlHttp.open("GET","getportfolio.php?param=" + waarde,true);
    xmlHttp.send(null);
  }
</script>
<script language="JavaScript" src="../javascript/rollover.js" type="text/javascript" />
</head>
<body onload="getPortfolio();">

<div class="container">
    <div class="sitemap">English &bull; Sitemap &bull; Contact</div>
    <div class="header">&nbsp;</div>
    <div class="banner"><?php
    switch ($page) {
        case "nieuws":
            echo '<img src="../images/banner_nieuws.gif" alt="" />';
            break;
        case "diensten":
            echo '<img src="../images/banner_diensten.gif" alt="" />';
            break;
        case "portfolio":
            echo '<img src="../images/banner_portfolio.gif" alt="" />';
            break;
        case "contact":
            echo '<img src="../images/banner_contact.gif" alt="" />';
            break;
        case "sitemap":
            echo '<img src="../images/banner_sitemap.gif" alt="" />';
            break;
        default:
            echo '<img src="../images/banner_nieuws.gif" alt="" />';
            break;
        }
        ?></div>
    <div class="slogan">Uw website al vanaf <span style="color:yellow;">&euro;299,-</span></div><div class="menu"><?php
    if ($page=="" || $page=="nieuws") {
        echo '<img src="../images/menu_nieuws_o.gif" alt="" />';
    } else {
        echo '<a href="index.php?p=nieuws"><img src="../images/menu_nieuws.gif" alt="" class="imgover" /></a>';
    }
    if ($page=="diensten") {
        echo '<img src="../images/menu_diensten_o.gif" alt="" />';
    } else {
        echo '<a href="index.php?p=diensten"><img src="../images/menu_diensten.gif" alt="" class="imgover" /></a>';
    }
    if ($page=="portfolio") {
        echo '<img src="../images/menu_portfolio_o.gif" alt="" />';
    } else {
        echo '<a href="index.php?p=portfolio"><img src="../images/menu_portfolio.gif" alt="" class="imgover" /></a>';
    }
    if ($page=="contact") {
        echo '<img src="../images/menu_contact_o.gif" alt="" />';
    } else {
        echo '<a href="index.php?p=contact"><img src="../images/menu_contact.gif" alt="" class="imgover" /></a>';
    }
    ?></div>
    <div class="bg_right">&nbsp;</div>
    <?php
    if ($page=="" || $page<>"nieuws" && $page<>"diensten" && $page<>"portfolio" && $page<>"contact" && $page<>"sitemap") {
        $page = "nieuws";
    }
    include $page . ".php";
    ?>
<div class="footer">&copy;2007 NMX - BTW BE 5465 2511 43</div>
</div>
</body>
</html>

(mn rollover-script staat onder het ajax-deel, en zorgt voor mn rollover-menu)
j

joyraider

Legacy Member
Ok, lag dus aan het feit dat ik in m'n body een onload="functie()" had staan. Weggehaald, werkt.

Nog een vraagje:

ik zou graag Lightbox gebruiken, maar blijkbaar is er een conflict met ajax-script, waardoor lightbox niet werkt... Is hier iets aan te doen?

Het ajax-script nog maar eens:

Code: 
function getPortfolio()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
        document.getElementById("result").innerHTML=xmlHttp.responseText;
        }
      }
    var waarde=document.portfolio.selectie.value;
    xmlHttp.open("GET","getportfolio.php?param=" + waarde,true);
    xmlHttp.send(null);
  }

Heb em inmiddels wel apart gezet, met een verwijzing...
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan