variabele veranderen binnen pagina

Status
Niet open voor verdere reacties.
W

whitetigerck

Gebruiker
Lid geworden
8 aug 2008
Berichten
196
Hallo,

Ik kom een probleem tegen en ik zou niet echt weten hoe ik dit moet oplossen aangezien ik zeer weinig ervaring (geen) heb met javascript. Ik zal eerst uitleggen wat ik wil bereiken.

Ik heb een map met allemaal dezelfde bestanden (.pgn) en daarvan maak ik automatisch links om deze in onderstaand javascript scriptje te laten zetten. Deze bestanden zijn databases met schaakpartijen die hierin worden ingevoerd:
siteadf33.jpg

Ik wil nu dat als je op de links vanboven klikt hij die databases laadt zonder een aparte pagina ervoor te moeten maken. Voor de duidelijkheid: per database wordt de inhoud van deze combobox dus anders. Maar hoe moet dat?

Zelf zat ik te denken aan een manier die hier staat met javascript, maar daar kom ik helaas niet echt uit, zoals je misschien ook wel ziet aan de code:p. Ik heb wat geprobeerd te veranderen maar dat werkt blijkbaar niet. Dit is de code die ik nu heb:

[JS]<body bgcolor="#eeeeee">

<?php

function RemoveExtension($strName)
{
$ext = strrchr($strName, '.');

if($ext !== false)
{
$strName = substr($strName, 0, -strlen($ext));
}
return $strName;
}

if ($handle = opendir('pgn')) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
$file2 = RemoveExtension($file);
$file3 = "pgn/$file";

?>

<script>

function veranderObjectText(pgnFile, pgngame)
{
var het_obj = document.getElementById(id);

switch(pgngame)
{
case "$file3": var pgnFile = "$file"; break;
}

}
</script>

<a href='#' onclick='veranderObjectText("pgnFile","$file");' ><?php echo $file2; ?></a><br><?php


}
}
closedir($handle);
}
?>

<script>




new PgnViewer(
{ boardName: "demo",
pgnFile: 'pgn/hzround9.pgn',

}
);
</script>



<div id="all">
<div id="demo-container"><br /></div>
<div id="demo-moves"></div>
</div>[/JS]

Alvast bedankt:thumb:
 
Blijkbaar lees ik je vraag helemaal verkeerd, onderstaand verhaal kan interessant zijn. Denk niet dat het je oplossing is. Scroll naar het rode gedeelte
Je zult inderdaad een AJAX call moeten maken.

Ik begrijp alleen niet goed wat je nu precies wilt.

Je wilt enkel dat die linkjes "hzround8" etc worden opgehaald uit een database?

Je zult dan dit als javascript hebben:
scripts.js
[js]
function maakXMLObj() {
var objXml = false;
try {
// Firefox, Opera 8.0+, Safari
objXml = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
objXml = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
objXml = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Uh-ohw, je browser ondersteund geen AJAX!");
return false;
}
}
}
}

function openBestand(bestand) {
var objXml = maakXMLObj();

objXml.open('GET',bestand,false);
objXml.send(null);

//okay, nu eerst kijken of we wel al klaar zijn met laden...
if(objXml.readyState == 4){
document.getElementByID('linkBox').innerHTML = objXml.responseText;
}else{
//hier kan je geavanceerdere error handling doen, bijvoorbeeld kijken naar de status. maargoed:
document.getElementByID('linkBox').innerHTML = "Error! De readystate was " + objXml.readyState;
}
}
[/js]
Vervolgens willen we een PHP-pagina hebben die ons steeds resultaten geeft welke we kunnen oproepen.

Kijk ik naar je script lijkt het mij dat je geen MySQL-database gebruikt maar verschillende bestanden.

Deze code gok ik dat ik moet hebben voor de resultaten.
results.php
PHP: 
<?php 
 
function RemoveExtension($strName) {
  $ext = strrchr($strName, '.');
  if($ext !== false) {
    $strName = substr($strName, 0, -strlen($ext));
  }
  return $strName;
}
 
if ($handle = opendir('pgn')) {
  while (false !== ($file = readdir($handle))) {
    if ($file != "." && $file != "..") {
      $file2 = RemoveExtension($file);
      $file3 = 'pgn/'. $file;
      echo '<a href="#" onclick="alert(\'pgnFile '. $file .'\');">'. $file2; .'</a><br />';
    }
  }
}
?>
Als het goed is krijg ik nu een lijstje terug van de bestanden in de map "pgn".

Alleen wat moet er gebeuren wanneer ik op zo'n link klik?
Ik heb er nu maar een alert van gemaakt, dan weet je tenminste of het werkt.

We hebben nu wel mooi de AJAX call en het resultaten bestand.
Nu moeten we het nog combineren zodat het op de pagina komt.

Dit is je pagina uiteindelijk.
Je ziet dat ik een id='linkBox' heb met de inhoud "Hier komen de linkjes".
Wanneer alles klopt zouden daar links moeten staan i.p.v. die tekst.
HTML: 
<html>
<head>
  <title>AJAX call</title>
  <script src="scripts.js" type="text/javascript"></script>
</head>
<body onload="openBestand('results.php')">
<div id="all">
  <div id="linkBox">Hier komen de linkjes</div>
  <div id="demo-container"><br /></div>
  <div id="demo-moves"></div>
</div>
</body>
</html>

Volgens mij moet dat allemaal wel goed gaan (let ook op dat je de juiste bestandsnamen gebruikt)
Alleen kan ik niet verder omdat ik nergens iets duidelijks in je verhaal kan vinden over dat schaakbord dat je er hebt staan.

Blijkbaar moet ik daarvoor iets aanroepen zodat dat wordt gemaakt, maar wat :(

Als ik de boel goed lees heb je alleen maar iets nodig dat steeds een nieuwe "pgnviewer" creert?
In principe hoef je dus alleen maar dit te doen begrijp ik.

PHP: 
<html>
<head>
 <title>JS PGN viewer</title>
</head>
<body>
<?php 
 
function RemoveExtension($strName) {
  $ext = strrchr($strName, '.');
  if($ext !== false) {
    $strName = substr($strName, 0, -strlen($ext));
  }
  return $strName;
}
 
if ($handle = opendir('pgn')) {
  while (false !== ($file = readdir($handle))) {
    if ($file != "." && $file != "..") {
      $file2 = RemoveExtension($file);
      $file3 = 'pgn/'. $file;
      echo '<a href="?pgn='. $file .'">'. $file2; .'</a><br />';
    }
  }
}
?>
<script type="text/javascript">
new PgnViewer({
  boardName: "demo",
  pgnFile: 'pgn/<?php echo $_GET['pgn']; ?>.pgn'
});
</script>
<div id="all">
  <div id="demo-container"><br /></div>
  <div id="demo-moves"></div>
</div>
 
Laatst bewerkt:
Dankje, dat met die GET zocht ik, ik had ook eerst iets geprobeerd wat je daarboven uitlegde voordat ik dit vraagde maar dat werkte niet geweldig voor mij (lees: het lukte niet:p).

Ik heb na lang googlen deze site gevonden:
http://abeautifulsite.net/notebook.php?article=21

en met het script op die site wordt het ajax/javascript gebeuren heel eenvoudig voor je gemaakt en het ziet er ook nog mooi uit ook:cool:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan