SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Location
    Clare, Ireland
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question function not defined error

    Hi all,
    I'm trying to adapt code from "The JavaScript Anthology" for making parts of a webpage appear depending on which option in a select list the user clicks on. The js code is as follows and resides in an external .js file.

    Code:
    function addLoadListener(fn)
    {
        if (typeof window.addEventListener != 'undefined')
        {
            window.addEventListener('load', fn, false);
        }
        else if (typeof document.addEventListener != 'undefined')
        {
            document.addEventListener('load', fn, false);
        }
        else if (typeof window.attachEvent != 'undefined')
        {
            window.attachEvent('onload', fn);
        }
        else
        {
            var oldfn = window.onload;
            if (typeof window.onload != 'function')
            {
                window.onload = fn;
            }
            else
            {
                window.onload = function()
                {
                    oldfn();
                    fn();
                };
            }
        }
    }
    
    addLoadListener(init);
    //addLoadListener(checkProgramme);
    
    function init()
    {
       function checkProgramme()
        {
            var programme = document.getElementById("programme"); 
            var selectValue = programme.value;
            alert("You chose the " + selectValue + "programme");
            //
            
            return selectValue;
            
        }
        // ... more functions removed
    }
    The relevant php/html code is here:

    Code:
    echo "<select name=\"programme\" id=\"programme\" onchange=\"checkProgramme()\">\n";
    			echo "<option> ----> Choose <---- </option>\n";
    			echo "<option value=\"jc\">Junior Cert.</option>\n";
    			echo "<option value=\"lc\">Leaving Cert.</option>\n";
    		   echo "</select>\n";
    
    // below are the divs to show depending on option selected
    
    echo "<div id=\"jc\">"; // JC Section starts here - if jc selected above
    //...
    echo "</div>\n";
    
    echo "<div id=\"lc\">"; // LC Section starts here - if lc selected above
    //...
    echo "</div>\n";
    The problem is that the FF errorConsole gives a "checkProgramme is not defined" error and nothing happens.
    I've tried placing the checkProgramme() function outside the init() function also but to no avail.
    Any ideas?

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why do you nest the functions? Skip the init function and call checkProgramme instead.

  3. #3
    SitePoint Member
    Join Date
    Apr 2007
    Location
    Clare, Ireland
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally I didn't have the function nested, pepejeria, and just called it like you said, but it didn't work.
    So I tried nesting it.

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You will not be able to access the function if you nest it. What error did you get before you nested it?

  5. #5
    SitePoint Member
    Join Date
    Apr 2007
    Location
    Clare, Ireland
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The same error as I'm getting now, namely "checkProgramme is not defined".
    I've double and triple-checked that I haven't made any silly typos. I've been coding php for a couple of years but am not that familiar with javascript.

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about providing the generated code (HTML, JavaScript, no PHP) to see what is wrong with the code?

  7. #7
    SitePoint Member
    Join Date
    Apr 2007
    Location
    Clare, Ireland
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    How about providing the generated code (HTML, JavaScript, no PHP) to see what is wrong with the code?
    Here's the javascript (I've denested the checkProgramme() function and uncommented the addLoadListener(checkProgramme) line but still no luck:
    Code:
    function addLoadListener(fn)
    {
        if (typeof window.addEventListener != 'undefined')
        {
            window.addEventListener('load', fn, false);
        }
        else if (typeof document.addEventListener != 'undefined')
        {
            document.addEventListener('load', fn, false);
        }
        else if (typeof window.attachEvent != 'undefined')
        {
            window.attachEvent('onload', fn);
        }
        else
        {
            var oldfn = window.onload;
            if (typeof window.onload != 'function')
            {
                window.onload = fn;
            }
            else
            {
                window.onload = function()
                {
                    oldfn();
                    fn();
                };
            }
        }
    }
    
    addLoadListener(init);
    addLoadListener(checkProgramme);
    
    function init()
    {
      
        // ... more functions removed
    }
    
     function checkProgramme()
        {
            var programme = document.getElementById("programme"); 
            var selectValue = programme.value;
            alert("You chose the " + selectValue + "programme");
            
            return selectValue;
            
        }
    And here's the generated html (with the non-relevant bits removed):

    Code:
    <table class="datatable"><caption>Programme Details</caption>
    <tr><th width="40%">Select Programme: <span class="emphasis">**</span></th>
    <td><select name="programme" id="programme" onchange="checkProgramme()">
    <option> ----> Choose <---- </option>
    <option value="jc">Junior Cert.</option>
    <option value="lc">Leaving Cert.</option>
    </select>
    </td></tr></table>
    
    <!-- here are the sections to be displayed/hidden depending on selection above -->
    
    <div id="jc"><table class="datatable">
    <caption>Junior Certificate</caption>
    <!-- html code here -->
    </div>
    
    <div id="lc"><table class="datatable">
    <caption>Leaving Certificate</caption>
    <!-- html code here -->
    </div>
    I've also tried changing the onchange attribute in the select tag to change with no success.

  8. #8
    SitePoint Zealot logitron's Avatar
    Join Date
    Feb 2006
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am assuming that the javascript file and the php file are seperated. If this is the case, I am curious: Is the PHP file including the javascript file in any way?
    Patrick Smith
    PHP Programmer

  9. #9
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I put the code above in an HTML page and it worked just fine. No JavaScript errors. There has to be another problem with the page that can't be seen from what you provided.

  10. #10
    SitePoint Member
    Join Date
    Apr 2007
    Location
    Clare, Ireland
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logitron View Post
    I am assuming that the javascript file and the php file are seperated. If this is the case, I am curious: Is the PHP file including the javascript file in any way?
    You assume correctly, Logitron. The javascript file is linked to in the head section of the page which is inserted using a php function as follows:
    Code:
    do_html_header("Add a Person to STTC db");
    The contents of the do_html_header() fuction are as follows:
    Code:
    {
      // print a HTML header
    ?>
    	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	 <title><?=$title?></title>
      <style type="text/css" media="all">@import "stilesttc.css";</style>
      <script language="text/javascript" src="form_stuff.js"></script>
    </head>
    <body>
    <div id="container">
    	<div id="content">
    <?
      if($title)
        do_html_heading($title);
    }

  11. #11
    SitePoint Member
    Join Date
    Apr 2007
    Location
    Clare, Ireland
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've removed the do_html_header() php function from the page and added the plain html code. This seems to have solved the function undefined errors as the FF error console is not longer throwing them. However, the js script still doesn't appear to be working, as it is not hiding the sections on page load like it should. Sigh!
    I've removed the functions I had nested inside the function(init), but that doesn't seem to have solved it either.

  12. #12
    SitePoint Member
    Join Date
    Apr 2007
    Location
    Clare, Ireland
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    The fact that the error console is no longer throwing errors must mean the javascript is at least legal code. So the fact that it still isn't working the way it should must be caused by something else.
    I've just made the following changes to the html code:
    Call the stylesheet using a <link ..> tag instead of <script ... @import>.
    Replaced the language attribute with the type attribute for calling the js file.
    Reversed the html calls to the stylesheet and javascript (the javascript call came before the stylesheet).
    That did the trick as the script is now working the way it should.
    So what caused the problem?
    I surmise that html call to javascript which modifies the className of an element must come after the stylesheet holding the relevant class selector (that's logical I think).
    Perhaps the stylesheet must be called using the <link> tag also.
    There also appears to be a problem when link to javascript file in a html page is made from inside a php function.

    Thanks to pepejeria and logitron for their suggestions.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •