onclick in javascript binnen php-include - Softwareontwikkeling

zaterdag 28 juli 2007 22:18

Acties:

Verwijderd

Topicstarter

Ik ben een site aan het maken, en als structuur gebruik ik hiervoor een index.php die alle pagina-elementen include, en een switch-statement gebaseerd op $_GET[] heeft voor de content.
Nou wil ik binnen een van de content-includes gebruik maken van javascript.
Het ziet er ongeveer zo uit:

code:

<?
$go=$_GET['go'];
?>
<html>
<head>
<link href="css/mainstyle.css" rel="stylesheet" type="text/css" />
<title> A Zillion Easy Steps</title>
</head>
</body>
<div id="mainwrap">

<?
require_once("inc/main/head.php");
require_once("inc/main/nav.php");
switch($go){
  case music: require_once("inc/content/music.php");break;
  case drawings: require_once("inc/content/drawings.php");break;
  case experiments: require_once("inc/content/experiments.php");break;
  case videos: require_once("inc/content/videos.php");break;
  case links: require_once("inc/content/links.php");break;
  default:require_once("inc/content/home.php");break;
}
require_once("inc/main/footer.php");
?>
</div>
</body>
</html>

met in experiments.php:

code:

<div id="content"> Here i will place experiments with php, javascript, games, and other stuff 
  <div class="javabox">
<script language="javascript" src="/inc/js/exp.js"></script>
<a  href="" onclick="test()">test</a>
  </div>
</div>

en in exp.js

code:

1 2	function test() { document.write("test");}

Het resultaat is dat als ik op de button in index.php?go=experiments druk ik heel even een lege pagina met het woord test te zien krijg, waarna ik meteen weer terug ga naar index.php?go=experiments. Oftewel de code wordt uitgevoerd maar op een andere pagina die meteen weer wordt gesloten. Het gewenste resultaat is dat het woord test op dezelfde pagina verschijnt als waar de knop is.
Ik heb geen idee hoe dit kan, ik werk nog niet zo lang met javascript en php, misschien dat iemand van jullie raad weet?

zaterdag 28 juli 2007 22:31

Acties:

mithras

Wat je kan doen is het volgende: je hebt een index pagina (zeg index.html) waar je een xmlHttpRequest opbject in zet. By default haal je bij het laden van je body de pagina home.html op. En elke link zorgt dat je een nieuw xmlHttpRequest (asynchroon) stuurt en de nieuwe pagina binnenhaalt. Ajax zegmaar

Want waarom wil je php gebruiken?

zaterdag 28 juli 2007 22:34

Acties:

Verwijderd

Om je even snel de oplossing te geven:

Je href="" klopt niet in regel 4 van experiments.php, die zorgt ervoor dat je geredirect wordt.

Daarnaast denk ik dat je beter eerst even naar de basics kunt kijken voordat je hiermee aan de slag gaat.

PHP = server
Javascript = client

Aan je topic titel te zien haal je dat nog eens door elkaar.

zaterdag 28 juli 2007 23:29

Acties:

Verwijderd

Topicstarter

ok alvast bedankt voor de snelle reactie,
maar ik kan toch wel gewoon een javascriptje uitvoeren binnen een ge-include php bestand zonder ajax te gebruiken? Ik snap dat die href niet klopt, die zorgt er volgens mij voor dat hij weer terug komt op de site met de link.
Maar als ik het definieer als button:

code:

1	<input type="button" onclick="test()" value="test">

gaat hij ook naar een lege pagina met test, waarna hij bezig blijft met de pagina laden. Als ik dit echter zonder knop doe, en gewoon een script uitvoer komt test wel gewoon op de pagina te staan.

@mithras: ik wil php gebruiken voor de structuur van de site, zodat ik makkelijk met includes kan werken en alle content van elkaar gescheiden kan houden (en toch de rest (head,foot,nav) gelijk per pagina).

[ Voor 5% gewijzigd door Verwijderd op 28-07-2007 23:31 ]

zaterdag 28 juli 2007 23:34

Acties:

mithras

Je haalt javascript en php volgens mij nog steeds door elkaar. Kennelijk wil je met javascript wat html toevoegen, maar dat lukt je niet. Dat heeft dus niets met php te maken

Het komt omdat je dus even de functie test() uitvoert, maar daarna naar de pagina "" gaat (NULL dus, tenzij je een base url hebt ingesteld in je head). Dus vandaar dat je tekst "test" verdwijnt. Je kan na de onClick een return statement toevoegen:

<input type="button" onClick="test(); return:false" value="test">

Dan wordt de link niet uitgevoerd als je op de button klikt. Let wel op, je pagina is zo niet toegankelijk voor browsers die geen javascript ondersteunen / waar mensen js hebben uitgezet!

zondag 29 juli 2007 00:01

Acties:

Verwijderd

Topicstarter

ik wil inderdaad met javascript wat html toevoegen (uiteindelijk wat divs voor wat graphische toepassingen (conways life)), en dat lukt wel zonder dat ik met een knop werk, maar ik wil dus de content niet statisch houden maar kunnen updaten met een knop oid, en die content wil ik genereren met javascript.
Het toevoegen van return false geeft hetzelfde resultaat (nieuwe pagina, die blijft loaden).
Het kan dus goed zijn dat ik fundamenteel iets niet goed begrijp, maar ik begin te vermoeden dat ik toch aan de ajax moet als ik dynamische javascript op 1 pagina wil.

zondag 29 juli 2007 00:16

Acties:

Verwijderd

Het kan dus goed zijn dat ik fundamenteel iets niet goed begrijp

Dat heb je goed, dat is hier inderdaad het geval. Vandaar het advies je eens te gaan verdiepen in de basics, dat scheelt je zelf ook een hoop hoofdbrekens.

zondag 29 juli 2007 00:51

Acties:

Verwijderd

Topicstarter

tja, de basics... Ik dacht daar al wel wat van af te weten, in ieder geval van php en javascript los van elkaar. Daar heb ik ook geen problemen mee. Maar blijkbaar is dynamisch javascript nogal een toer in vergelijking met statisch.Ik zal me eens verdiepen in ajax (want als ik het goed begrijp moet daar mee kunnen wat ik wil).
thanx anyways

zondag 29 juli 2007 00:53

Acties:

Verwijderd

Mjah, door wat je zegt krijg ik het idee dat je het niet helemaal begrijpt allemaal. Dat kan natuurlijk zijn omdat een forum natuurlijk niet de beste manier van communicatie is, maar dat kun je zelf goed bepalen.

Javascript en PHP hebben namelijk niets met elkaar te maken, PHP is serverside waar javascript clientside is. Een wereld van verschil dus.

Koop eens een goed boek over PHP, een goed boek over javascript en daarna een goed boek over ajax (eventueel ook een boek over HTML/CSS). Dan kun je gelijk aan de slag en dat zal voor jezelf ook een stuk prettiger werken.

zondag 29 juli 2007 01:17

Acties:

funkwurm

Hohohoho, dit gaat helemaal mis. Dit is dus waarom je javascript vragen ook in WEB moet stellen. Met alle respect voor de programmeurs die hier rond surfen want die kunnen vast ook weer heel veel dingen die ik niet kan.

mithras schreef op zaterdag 28 juli 2007 @ 23:34:
Het komt omdat je dus even de functie test() uitvoert, maar daarna naar de pagina "" gaat (NULL dus, tenzij je een base url hebt ingesteld in je head). Dus vandaar dat je tekst "test" verdwijnt. Je kan na de onClick een return statement toevoegen:
<input type="button" onClick="test(); return:false" value="test">
Dan wordt de link niet uitgevoerd als je op de button klikt. Let wel op, je pagina is zo niet toegankelijk voor browsers die geen javascript ondersteunen / waar mensen js hebben uitgezet!

Hier is niks van waar, echt ook helemaal niks. Hij gebruikt een button en die heeft geen andere functie dan het uitvoeren van javascript (submitten en resetten gaat middels respectievelijk type="submit" en type="reset"). Dus hoef je de "native function" ook niet te annuleren met een return false; (waar dus inderdaad een spatie tussen staat, geen dubbele punt). Daarnaast is de camelStyle voor html-attributen uit den boze anno 2007, het is immers geen javascript maar (x)html, ook al verwijst het naar een javascript eventHandler.

Verwijderd schreef op zondag 29 juli 2007 @ 00:51:
Ik zal me eens verdiepen in ajax (want als ik het goed begrijp moet daar mee kunnen wat ik wil).
thanx anyways

Jij hoeft helemaal niks met ajax, ajax is om content van de server naar je script te halen, niet van je script naar de weergegeven pagina. Ajax klinkt alleen zo lekker stoer dus wordt het weer op de proppen gehaald als deux ex machina voor een willekeurige situatie waar men niet uit komt.

Wat hier mis gaat (gelukkig browser wij client siders ook welles hier rond

) is dat je gebruik maakt van document.write() terwijl de page-rendering al klaar is. Hierdoor schiet de browser weer in deze rendering modes en begint opnieuw de pagina op te bouwen. Je bestaande content verdwijnt dus en de browser geeft aan dat hij aan het "laden" is (renderen dus eigenlijk, maar vaak begint hij al met renderen van de eerste content terwijl de verdere content nog van de server ontvangen moet worden).

Dat is ook de reden dat document.write() prima werkt als je hem rechtstreeks uit laat voeren (tijdens de rendering van de pagina), maar het gaat mis als je naderhand een function aanroept die wil gaan write()'en.

Wat je dus wel moet doen is nodes in de DOM-tree plaatsen of iets smeriger de innerHTML van een element updaten. Kewatteh? Ja, je kunt het HTML-document zien als een boomstructuur (vergelijkbaar met de mappenstructuur in je windows verkenner) en je gaat nu een nieuw mapje toevoegen. Een textnode heet dat, dit doe je zo:

JavaScript:

1 2	var myNode = document.createTextNode('test'); document.getElementById('div_die_er_al_staat').appendChild(myNode);

Waarbij je dus van tevoren (met php) een lege div met id="div_die_er_al_staat" moet plaatsen in je document, zodat je die kunt aanspreken. De onorthodoxe manier is dit:

JavaScript:

1	document.getElementById('div_die_er_al_staat').innerHTML='test';

Ietsjepietsje korter, maar of je daarom nou de onderste wil kiezen. Beiden resulteren in hetzelfde, de text "test" wordt in de div geplaatst. De bovenste is een stuk netter, en volgens mij niet veel moeilijker.

zondag 29 juli 2007 10:46

Acties:

Verwijderd

Topicstarter

ok, nou bedankt funkwurm.
ik had eerlijk gezegd wel een vermoeden dat de DOM er aan te pas zou moeten komen, maar daarvoor wist ik toch te weinig. Je uitleg maakt een hoop sense in ieder geval.
Wat betreft de plaatsing, ik zie wel in dat hij beter bij WEB terecht kan, maar ik wist dus niet of php de boel op zat te fokken (hetgeen dus niet het geval is).
Maar ik kan verder, muchos gracias!

zondag 29 juli 2007 12:09

Acties:

crisp

Devver

Pixelated

--> Webdesign, Markup & Clientside Scripting dus

en goede uitleg funkwurm!

Intentionally left blank

zondag 29 juli 2007 12:13

Acties:

mithras

funkwurm schreef op zondag 29 juli 2007 @ 01:17:
Hohohoho, dit gaat helemaal mis. Dit is dus waarom je javascript vragen ook in WEB moet stellen. Met alle respect voor de programmeurs die hier rond surfen want die kunnen vast ook weer heel veel dingen die ik niet kan.

[...]

Jij hoeft helemaal niks met ajax, ajax is om content van de server naar je script te halen, niet van je script naar de weergegeven pagina. Ajax klinkt alleen zo lekker stoer dus wordt het weer op de proppen gehaald als deux ex machina voor een willekeurige situatie waar men niet uit komt.

[...]

offtopic:
Sorry voor mijn brakke toevoeging aan dit topic

Ik ben een server-side programmer, dus veel wist er inderdaad niet vanaf. Maar door het phpscriptje had ik het idee dat ts met javascript de content op de pagina wilde wisselen. Dus informatie ophalen, die wegschrijven op de pagina. En dat het schrijven fout ging. Vandaar mijn geblaat, maar bedankt voor de correcties