views:

91

answers:

3

Hi there!

Here's the deal. I've got index.php which links to an internal JS file in it's header. index.php then includes another .php file, which outputs this: + add file. addFile() is a Javascript function defined in the external JS file.

By doing this nothing happens, the included php does not "see" the JS function. Encapsulating the JS in the included PHP makes it all work. But I don't want to do it that way.

Any ideas?

EDIT:

here's the source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
        <title>Archie</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" href="/screen.css" type="text/css" media="screen"/>
        <script src="/lib/js/archie.js" type="text/javascript"></script>
    </head>
    <body>
        ...
        ...
        //included php starts here
        <form action="/lib/course.php" method="post">
            <fieldset>
                    <div id="addFileLocation"></div>
                <a href="#" onClick="addFile()">+ add file</a>          
                <input type="hidden" id="addFileCount" value="0"/>
            </fieldset>
        </form>
        //ends here
        ...
        ...
    </body>
    </html>

and the js:

<script type="text/javascript">
    //Dynamically add form fields

    //add file browser
    function addFile() {
        var location = document.getElementById('addFileLocation');
        var num = document.getElementById('addFileCount');
        var newnum = (document.getElementById('addFileCount').value -1)+ 2;
        num.value = newnum;
        var newname = 'addFile_'+newnum;
        var newelement = document.createElement('input');
        newelement.setAttribute('name',newname);
        newelement.setAttribute('type','file');
        location.appendChild(newelement);
    }

</script>
+1  A: 

It's possible that the file has not been "loaded" by the browser at the point the function is called. That's why I use jQuery's $(document).ready() function. If you wrap your call to addFile in a function similar to jQuery's "document ready" (which simply waits until the whole document has been downloaded by the browser to execute js code), then all of your functions should be there. What happens when you wait until the whole thing is loaded and then manually call that function in the browser's address bar?

Rich
+1  A: 

After looking at the code sample, maybe your href="#" is short circuiting the onClick handler. What happens if you change the anchor to:

            <a href="javascript:addFile();">+ add file</a>  
Rich
that works, thank you. could you please also tell me why that happens?, does that make the href link first, so that onClick never gets executed?
Illes Peter
my bad. it still does not work
Illes Peter
I usually put debug statements in the form of an alert at different points in the function to let me know if I'm even hitting the function and if it's crapping out at a certain point. So, add alert("start of function"); as the first line of the func, and then just before the call to appendChild maybe alert some property of newelement to see the state of it and that your func hasn't silently exited with error, etc.
Rich
yes. i already did that before i posted the question. that's why i said the php does not "see" the js function
Illes Peter
have you confirmed that it's not something silly like a bad path to the js file or a typo in the js file causing it to be ignored by the browser? there's no complicated functionality going on here, so it should just work. that's usually a sign that something very small and seemingly insignificant is the reason.
Rich
A: 

Got it. Silly me, I forgot to remove the <script></script> pair from the external js file. Thanks for your help Rich!

Illes Peter