php variabele in js

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Script Dude

Script Dude

29/04/2011 18:57:42
Quote Anchor link
Hoi. Ik zit met het volgende: Ik heb een php variabele die ik wil doorgeven aan een extern javascript-bestand. Dit doe ik op de webpagina via:
Quote:
<body onload="initAll(
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<?php echo $value; ?>
)">

($value wordt aangemaakt in een php-script in de head-sectie)

En hier het js-deel waar het om gaat:
Quote:
function initAll(theValue) {
var valToVar = theValue;

showBlock1(valToVar);
document.getElementById("object2").onclick = showBlock2;
document.getElementById("object1").onclick = showBlock1(valToVar);
}

function showBlock1(valForB1) {
document.getElementById("testObject").innerHTML = valForB1;
}

De php-variabele wil ik via body onload laden omdat ik hem in meerdere js-functies wil gebruiken. Ik zet dus deze parameter(theValue) in een variabele die ik weer als parameter in een andere functie stop. De functie(showBlock1) wil ik zowel onload oproepen als bij het klikken op de link "object1".

In Firefox(4.0.1) werkt het en in IE8 ook, maar ik gebruik daarnaast ook het programma IETester om de webpagina in verschillende IE's te testen. Daar krijg ik in alle geteste IE's(6, 7 en gek genoeg ook 8) een javascript error met de fout: "Niet geimplementeerd", verwijzend naar de regel met object1.onclick. Verwijder ik die regel dan krijg ik geen error. Dus in de functie initAll() accepteert hij deze regel wel:
Quote:
showBlock1(valToVar);

En dus ook de functie showBlock2, zonder parameter, werkt. Op één of andere manier accepteren de browsers in IETester de ingevoerde parameter niet in combinatie met een onclick. Iemand enig idee of- en wat ik hier fout doe?
Verder heb ik in mijn (php)script nog een soortgelijke onclick-functie:
Quote:
<a onclick=\"thisToMainItem($id)...

Dit werkt wel in alle eerder genoemde browsers zonder fouten, ik kom er maar niet uit waarom ik de errors krijg in IETester. Iemand die mij verder kan helpen?
Gewijzigd op 29/04/2011 19:00:12 door Script Dude
 
PHP hulp

PHP hulp

05/11/2024 15:51:10
 
Daniel O

Daniel O

29/04/2011 19:29:01
Quote Anchor link
De declaratie

document.getElementById("object1").onclick = showBlock1(valToVar);

wijst niet de functie showBlock1 toe aan het onclick event, maar het resultaat van showBlock1(valToVar). Maw: de functie wordt meteen uitgevoerd, terwijl jij 'm alleen wilt toewijzen aan het onclick event. Wat je kunt doen is de aanroep wrappen in een anonymous function:

document.getElementById("object1").onclick = function() { showBlock1(valToVar); };
Gewijzigd op 29/04/2011 19:29:30 door Daniel O
 
Crispijn -

Crispijn -

29/04/2011 20:26:22
Quote Anchor link
Bedoel je dit soms?

<script type="text/javascript">
var phpvar = '
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<?php echo $phpvar; ?>
';
</script>
 
Script Dude

Script Dude

30/04/2011 11:28:33
Quote Anchor link
@ Daniel: Bedankt! Dat is inderdaad de oplossing. Ik vindt de javascript-logica in deze wat vreemd maar ben al lang blij dat het nu goed werkt, nogmaals bedankt.
 
Wouter J

Wouter J

30/04/2011 11:43:11
Quote Anchor link
Maar element.onclick is een oude manier. Beter is te werken met addEventListener (voor FF, webkit, enz.) en attachtEvent (voor IE). Dan zal het zo worden:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Als de browser AddEventListener accepteerd
if( document.addEventListener ) {
  // Pak een element en maak daar een click event op
  document.body.addEventListener('click', geKlikt, false);
} // Als de browser attachEvent accepteerd
else if( document.attachEvent ) {
  // Pak een element en maak daar een click event op
  document.body.attachEvent('onclick', geKlikt);
}

// We hebben nu de functie geKlikt aangesproken dus moeten we die maken
function() {
  document.write('iets');
}
 
Daniel O

Daniel O

30/04/2011 13:54:23
Quote Anchor link
@ScriptDude graag gedaan

@Wouter om het helemaal naar 2011 te brengen pak je gewoon jQuery en dan
$(element).bind('click', clickHandler);

Dan heb je ook de if/else constructie niet nodig... Ben er overigens helemaal voor dat men eerst javascript leert alvorens jQuery te gebruiken :) dat zul jij ook met me eens zijn.
 
Wouter J

Wouter J

30/04/2011 17:36:03
Quote Anchor link
Daniel O op 30/04/2011 13:54:23:
om het helemaal naar 2011 te brengen pak je gewoon jQuery en dan
$(element).bind('click', clickHandler);

Ik vind niet dat je de hele tijd naar jQuery moet grijpen. Het kost laad tijd en is in 75% van de gevallen bij beginners totaal niet nodig om jQ te gebruiken. Daarnaast zou ik als ik jQuery gebruikte gewoon gebruik maken van .click()
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$('body').click(function() { document.write('iets') });

Daniel O:
Dan heb je ook de if/else constructie niet nodig... Ben er overigens helemaal voor dat men eerst javascript leert alvorens jQuery te gebruiken :) dat zul jij ook met me eens zijn.

Die if else constructie zit dan in de source code van jQuery, maar de rest ben ik het inderdaad helemaal mee eens.
 
Daniel O

Daniel O

30/04/2011 17:52:53
Quote Anchor link
Hmm de laadtijd van een minified jQuery lib is te verwaarlozen met de huidige internetverbindingen en processorsnelheden. Het nadeel van de laadtijd valt m.i. volledig in het niet bij de compatibility voordelen die het biedt. Als iemand die het tijdperk voor de js frameworks heeft meegemaakt ben ik vooral blij dat ik niet elk stukje js code in elke browser hoef te controleren. Maar beginners zouden die ellende eigenlijk een tijdje moeten meemaken, zodat ze jQuery echt op waarde schatten ;)

Het gebruik van de bind() heeft mijn persoonlijke voorkeur, omdat je daar alle soorten events mee kunt attachen (ook custom events), en jQuery onderwater altijd de bind() aanroept.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.