Kan geen js-function oproepen uit php-js file

[F.West98]

Hallo,

Ik heb een vaag probleem. Ik heb 2 bestanden, beide js.
filenaam1.js
filenaam2.php
De PHP-file headers heb ik zo gedaan dat 'ie t ziet als javacript.
Nu zit er in de php-file een function, die ik in datzelfde bestand kan aanroepen. Maar ik kan die functie niet oproepen vanuit filenaam1.js...
Inhoud van de bestanden die handig is:
filenaam1.js

JavaScript:

$('#init').click(function() {
/*blashit*/
init();
});

filenaam2.php

JavaScript:

<?php session_start(); header('Content-type: application/x-javascript'); ?>
$(document).ready(init(););
function init() {
/*blablabla*/
}

En ja, eerst wordt de PHP geladen, dat was mijn eerste gedachten. Als ik een functie uit een andere .js oproep vanuit filenaam1.js werkt dat WEL.
Firebug ziet filenaam2.php niet tussen de scripts...

Ik snap t niet meer?

[RaZ]

PHP is serverside. Dat moet door een parser heen. Je kan geen PHP code sturen naar de client, en verwachten dat die de PHP gaat uitvoeren.

Je zal het javascript gedeelte dus wel met PHP moeten echo'en naar de client.

Edit: En toen keek ik totaal om die ?> heen op regel 1. My bad.

[ Voor 13% gewijzigd door RaZ op 28-04-2012 23:18 ]

[F.West98]

Nee, ik heb de file .php genoemd, juist om 'm serverside te laten parsen. Dan komt er in de browser een werkend resultaat uit, zonder de php tags, maar met wat er moest worden geëcho'd. Alleen ik kan daar geen functie in oproepen.
(zo werkt mijn css ook, een .php file die ik php laat parsen en dan css-output. Zie wiethoofd's custom headerkleurtjes, doet dat ook)

edit:
ok

[orf]

Klik vanuit de broncode (view source) eens de script src aan? Dan moet je de javascript code zien. Als je met firebug filenaam2.php niet ziet, moet er iets mis zijn met de referentie in je html.

[F.West98]

Daar zie ik alles, ook de goede geparste js. In firebug herkent 'ie het script wel, maar niet als script in het tabblad scripts. Ik kan hem bij tab HTML wel uitklappen en dan zie ik scriptweergave... Heel vaag

Oja:
Alles werkt gewoon zoals het hoort, behalve dat aanroepen... (ook vanuit index.php zelf)

[ Voor 18% gewijzigd door F.West98 op 28-04-2012 23:27 ]

[Struikrover]

Je code is toch ook fout?

In plaats van

code:

$(document).ready(init();); 
function init() { 
/*blablabla*/ 
}

moet je

code:

$(document).ready(init); 
function init() { 
/*blablabla*/ 
}

doen. Als ik jouw code run op jsFiddle werkt ie niet, de tweede manier werkt wel.

[F.West98]

Struikrover schreef op zaterdag 28 april 2012 @ 23:28:
Je code is toch ook fout?

In plaats van

code:

$(document).ready(init();); 
function init() { 
/*blablabla*/ 
}

moet je

code:

$(document).ready(init); 
function init() { 
/*blablabla*/ 
}

doen. Als ik jouw code run op jsFiddle werkt ie niet, de tweede manier werkt wel.

Nee hoor, de init werkt bij ready wel. Maar als ik hem daarna oproep vanuit extern file werkt ie niet...
Daar gaat ie ook niet fout

[R4gnax]

F.West98 schreef op zaterdag 28 april 2012 @ 23:29:
[...]

Nee hoor, de init werkt bij ready wel. Maar als ik hem daarna oproep vanuit extern file werkt ie niet...
Daar gaat ie ook niet fout

Jij voert de functie meteen uit i.p.v. deze mee te geven aan de ready callback, die ervoor bedoeld is om code pas uit te voeren wanneer het veilig is om de DOM tree v/d pagina te manipuleren. Dat het in jouw huidige geval werkt is slechts een gelukstreffer; de DOM tree is toevallig al gereed op het moment dat jouw script file klaar is met laden en kan gaan draaien.

Dat hoeft echter (zeker met caching) niet het geval te zijn en als het dan verkeerd gaat kun je gelijk tegen lelijke issues aan lopen. Zo laten IE8 en lager bijvoorbeeld bij bepaalde manipulaties op een incomplete DOM tree een error dialog 'Operation aborted' zien en presenteren ze vervolgens alleen nog een placeholder pagina met een nietszeggende 'friendly error'.

[Struikrover]

Probeer het eens op een hele simpele manier. Ik krijg het namelijk wel voor elkaar als ik deze code gebruik:

dynjs.php:

code:

<?php session_start(); header('Content-type: application/x-javascript'); ?> 
function init() { 
 alert("hoi"); 
}

html file:

code:

<html>

<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dynjs.php"></script>
<script type="text/javascript">
    $(document).ready(init);
</script>
</head>
<body>
Hoi
</body>

</html>

[F.West98]

R4gnax schreef op zaterdag 28 april 2012 @ 23:37:
[...]


Jij voert de functie meteen uit i.p.v. deze mee te geven aan de ready callback, die ervoor bedoeld is om code pas uit te voeren wanneer het veilig is om de DOM tree v/d pagina te manipuleren. Dat het in jouw huidige geval werkt is slechts een gelukstreffer; de DOM tree is toevallig al gereed op het moment dat jouw script file klaar is met laden en kan gaan draaien.

Dat hoeft echter (zeker met caching) niet het geval te zijn en als het dan verkeerd gaat kun je gelijk tegen lelijke issues aan lopen. Zo laten IE8 en lager bijvoorbeeld bij bepaalde manipulaties op een incomplete DOM tree een error dialog 'Operation aborted' zien en presenteren ze vervolgens alleen nog een placeholder pagina met een nietszeggende 'friendly error'.

De code staat wel onderaan de body, dus dat kan het zijn. Is dan zonder de (); de goede manier? Dan zal ik dat doen

Struikrover schreef op zaterdag 28 april 2012 @ 23:38:
Probeer het eens op een hele simpele manier. Ik krijg het namelijk wel voor elkaar als ik deze code gebruik:

dynjs.php:

code:

<?php session_start(); header('Content-type: application/x-javascript'); ?> 
function init() { 
 alert("hoi"); 
}

html file:

code:

<html>

<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dynjs.php"></script>
<script type="text/javascript">
    $(document).ready(init);
</script>
</head>
<body>
Hoi
</body>

</html>

Helaas is het ready init niet het probleem, maar een losse call van init werkt niet.
DUS DE INIT IN FILENAAM1.JS GAAT FOUT. Niet die in filenaam2.php

[Struikrover]

Wat je in filenaam1.js doet, is een event handler registreren op een object dat op dat moment wellicht nog niet bestaat. Je moet het registreren van deze handler dus ook achter een $(document).ready() zetten.

Is dit nu wat je wilt?

script.js:

JavaScript:

$(document).ready(function()
{
    $('#knop').click(init);
});

dynjs.php:

JavaScript:

<?php session_start(); header('Content-type: application/x-javascript'); ?> 
function init() { 
    alert("kiekeboe");
}

html:

HTML:

<html>

<head>
    <title> test </title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="dynjs.php"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>
<input type="button" id="knop" value="klik" />
</body>

</html>

[Cartman!]

Je moet dus gewoon debuggen, prak de code uit je php file eens in een statische .js file en kijk wat ie dan doet. Als ie het dan ook niet doet kun je uitsluiten dat het aan php ligt. Pak Firebug erbij (of IE/Chrome devtools) en kijk wat de error is.

[F.West98]

Struikrover schreef op zondag 29 april 2012 @ 00:02:
Wat je in filenaam1.js doet, is een event handler registreren op een object dat op dat moment wellicht nog niet bestaat. Je moet het registreren van deze handler dus ook achter een $(document).ready() zetten.

Is dit nu wat je wilt?

script.js:

JavaScript:

$(document).ready(function()
{
    $('#knop').click(init);
});

dynjs.php:

JavaScript:

<?php session_start(); header('Content-type: application/x-javascript'); ?> 
function init() { 
    alert("kiekeboe");
}

html:

HTML:

<html>

<head>
    <title> test </title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="dynjs.php"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>
<input type="button" id="knop" value="klik" />
</body>

</html>

Dat wil ik, maar de functie werkt verder wel - de rest van de functie is 100 regels, samen met de externe functie. Dus de .click bevat nog veeeel meer code die wel werkt.

Cartman! schreef op zondag 29 april 2012 @ 12:11:
Je moet dus gewoon debuggen, prak de code uit je php file eens in een statische .js file en kijk wat ie dan doet. Als ie het dan ook niet doet kun je uitsluiten dat het aan php ligt. Pak Firebug erbij (of IE/Chrome devtools) en kijk wat de error is.

In een statische js file krijg ik vage errors omdat er dingen missen, zet ik die erin werkt het gewoon WEL
Firebug geeft error dat init(); niet bestaat, terwijl dat wel zo is omdat ie ergens anders wel kan worden aangeroepen.
Firebug herkent de .php dus niet als js

edit:
als .js met de php als comments doet hij NIETS meer en nog steeds herkent firebug m niet
edit2:
geconverteerd naar UTF-8 zonder BOM werkt de .php als .js wel
edit3:
werkend op UTF-8 zonder BOM.......
edit4:
oproepen werkt nog niet - function wordt niet uitgevoerd - rest van de aanroepfunction wel

[ Voor 6% gewijzigd door F.West98 op 29-04-2012 17:01 ]

[Cartman!]

F.West98 schreef op zondag 29 april 2012 @ 16:44:
[...]
In een statische js file krijg ik vage errors omdat er dingen missen, zet ik die erin werkt het gewoon WEL

Hoe kunnen die nu missen als je de output van de .php file gewoon opslaat?

Firebug geeft error dat init(); niet bestaat, terwijl dat wel zo is omdat ie ergens anders wel kan worden aangeroepen.

Blijkbaar zit je dan met een volgorde danwel scope probleem.

Firebug herkent de .php dus niet als js

edit:
als .js met de php als comments doet hij NIETS meer en nog steeds herkent firebug m niet

als comments? laat eens een voorbeeld zien? volgens mij klooi je maar gewoon iets aan.

edit2:
geconverteerd naar UTF-8 zonder BOM werkt de .php als .js wel
edit3:
werkend op UTF-8 zonder BOM.......
edit4:
oproepen werkt nog niet - function wordt niet uitgevoerd - rest van de aanroepfunction wel

Zoals ik zei, waarschijnlijk een volgorde of scope probleem.

[F.West98]

Cartman! schreef op maandag 30 april 2012 @ 09:55:
[...]

Hoe kunnen die nu missen als je de output van de .php file gewoon opslaat?

Ik had de .php naar .js gedaan, en toen de php-delen ge-comment en dan vergeten gewone results er voor in de plaats te zetten -_-

Zoals ik zei, waarschijnlijk een volgorde of scope probleem.

Dat weet ik heel zeker van niet. Want de volgorde van de scripts is goed. Eerst de .php met de function, daarna pas de .js die die function oproept. Praktijkvoorbeeld staat lokaal, om mijn IP hier nu te gaan posten... (en het werkt enkel na inlog)

[Struikrover]

Als je nu gewoon een uitgeklede of gecensureerde versie van je probleem maakt en die hier neer zet in plaats van eigenwijs te zijn en bij al onze hulp te zeggen dat daar het probleem niet ligt...
Dan kunnen we je helpen, en misschien lost het zich bij het opnieuw maken ook wel zelf op.

[Manuel]

F.West98 schreef op maandag 30 april 2012 @ 16:04:
[...]

Dat weet ik heel zeker van niet. Want de volgorde van de scripts is goed. Eerst de .php met de function, daarna pas de .js die die function oproept. Praktijkvoorbeeld staat lokaal, om mijn IP hier nu te gaan posten... (en het werkt enkel na inlog)

Wat nou als je een uitgeklede test case op http://jsfiddle.net/ zet?

[F.West98]

http://jsfiddle.net/3qqxs/5/
Mijn testcase. Zou moeten werken maar werkt niet. De inhoud van test.php:

JavaScript:

<?php header('Content-type: application/x-javascript'); ?>

function init() {
 $('body').addClass('js');
 $('.edit').click(function() {
    alert('clicked edit');
 }
}
$(document).ready(init);

test.js:

JavaScript:

function animate(data) {
    var wrap = $('.wrap');
    $(wrap).empty()
    $(wrap).append(data);
    init();
}

In de testcase gaat alles met function init fout

[Manuel]

Als ik alles letterlijk overneem krijg ik toch echt een error in mijn Firebug console, namelijk: 'missing ) after argument list' in jouw test.php. Je bent vergeten je $('.edit').click functie af te sluiten.

Lees ook eens Programming FAQ - Algemeen - Tips bij debuggen door

[F.West98]

Die heb ik inmiddels al 10x doorgenomen.
De fout die erin zat was een snelheidfoutje, maar... In de echte versie zit die fout niet. Ik heb alles nog 10x doorgenomen, nee daar zit geen fout in...

aha... hij geeft inmiddels geen init fout meer, maar alles in init wordt simpelweg niet gerund...
edit:
de init zoals ik die nu run: opnieuw initialiseren (alle elementen in de DOM) hoeft niet, als ik de init in animate() weghaal werkt het nog steeds. is er toch iets anders...

update:
als ik handmatig init run werkt hij, hij wordt simpelweg niet opgeroepen (gaat de .js nog eens controleren)
de .js moet helemaal goed zijn, jslint geeft ook geen errors (behalve een var die opnieuw wordt geset, haal ik het weg is het out of scope, ja, zo kan ik ook wel wat onzin maken)

[ Voor 66% gewijzigd door F.West98 op 30-04-2012 22:12 ]

[Cartman!]

Je jsfiddle doet niks omdat de 2 files op je IP timeouten. Zet ergens een losse testcase neer die gewoon alleen werkt met statische files zoals ik eerder al zei. Niet renamen ofzo maar gewoon view-source op je .php file doen en die opslaan als .js. Je lijkt onze adviezen momenteel een beetje te negeren.

[F.West98]

Cartman! schreef op dinsdag 01 mei 2012 @ 11:55:
Je jsfiddle doet niks omdat de 2 files op je IP timeouten. Zet ergens een losse testcase neer die gewoon alleen werkt met statische files zoals ik eerder al zei. Niet renamen ofzo maar gewoon view-source op je .php file doen en die opslaan als .js. Je lijkt onze adviezen momenteel een beetje te negeren.

Het werkt dus wel met 2x een .js, dat is het probleem...
verder timeoutte hij omdat mijn server tijdelijk uitstond, nu weer aan...

Nieuwe link:
http://jsfiddle.net/3qqxs/11/
2x js:
http://jsfiddle.net/3qqxs/10/

Geen van beide runnen de init(); in de animate, maar ze staan er wel maar firebug geeft ze niet weer

[ Voor 14% gewijzigd door F.West98 op 01-05-2012 20:34 ]

[F.West98]

Voor anderen die misschien ook tegen dit probleem aanlopen:
Het is opgelost d.m.v. het gebruiken van de jQuery functie .live(handler, action) i.p.v. .click()

Even hier neergezet aangezien het mij een veelvoorkomend probleem lijkt....

[R4gnax]

F.West98 schreef op vrijdag 18 mei 2012 @ 21:24:
Voor anderen die misschien ook tegen dit probleem aanlopen:
Het is opgelost d.m.v. het gebruiken van de jQuery functie .live(handler, action) i.p.v. .click()

Even hier neergezet aangezien het mij een veelvoorkomend probleem lijkt....

Slecht advies. jQuery's live functie is al sinds 1.4.x deprecated. Die hoor je helemaal niet meer te gebruiken. In plaats daarvan hoor je de delegate functie te gebruiken of vanaf versie 1.7 de on functie.

(Overigens gaan er ook plannen rond om alle shorthand event binders zoals de click functie te verwijderen uit jQuery core en enkel nog als plugin beschikbaar te stellen, dus deze gebruiken is ook niet slim.)

[ Voor 14% gewijzigd door R4gnax op 19-05-2012 18:42 ]

[F.West98]

R4gnax schreef op zaterdag 19 mei 2012 @ 18:40:
[...]


Slecht advies. jQuery's live functie is al sinds 1.4.x deprecated. Die hoor je helemaal niet meer te gebruiken. In plaats daarvan hoor je de delegate functie te gebruiken of vanaf versie 1.7 de on functie.

(Overigens gaan er ook plannen rond om alle shorthand event binders zoals de click functie te verwijderen uit jQuery core en enkel nog als plugin beschikbaar te stellen, dus deze gebruiken is ook niet slim.)

Inderdaad, die blijkt beter. (de on)

edit:

Toch niet... Hij werkt niet

[ Voor 4% gewijzigd door F.West98 op 19-05-2012 19:36 ]

[Barryvdh]

live() is wel deprecated, maar het verwijst gewoon naar de on functie. Dus qua werking zou het niet uit mogen maken. Mits je hem natuurlijk wel goed aanroept, zoals beschreven staat:

$("a.offsite").live("click", function(){ alert("Goodbye!"); }); // jQuery 1.3+
$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); }); // jQuery 1.7+

[F.West98]

Gevonden... Op één of andere manier laadde ik jQuery 1.6.x in -_-
In ieder geval werkt het nu