Page 1 of 1

Function not defined

Posted: Tue Aug 13, 2013 10:04 pm
by rick.emmet
Hello everyone,
I have a problem that is stumping me. I wrote some JS code that worked fine on two development machines and then work perfectly on the production server. I made a single change to my JS library and tested it, one of my JS function (show / hide) stopped working. I reverted back to the original code and restested it. The showHide function is still not working. Firebug provides an error message that says "showHide( ); is not defined."

I looked at the code and can't see anything wrong with it, so I went online to JSHint and validated the code. It validates. Here's the code in my JavaScript Library:

Code: Select all

(function($) {
        // This allows the jQuery object to be used w/o interferance

        // Always nice to use strict mode
        "use strict";

 function ShowHide() {
            var head1 = document.getElementById("head1");
            var showform = document.form1.head1.checked;
            head1.style.visibility = (showform) ? "visible" : "hidden";
        }

})(jQuery);
And here is the JS code embedded in XHTML:

Code: Select all

<form name="form1" >
<input type="checkbox" name="head1" onclick="ShowHide();" />Edit Content</form>
Here's what JSHint says of the code:

Code: Select all

function ShowHide() {
'ShowHide' is defined but never used.
I don't see any syntax error (and neither does netBeans) and if JSHint says the code is valid, then I have no idea what is wrong. Anyone have a clue? Thanks very much for you help!
Cheers,
Rick

Re: Function not defined

Posted: Tue Aug 13, 2013 10:24 pm
by requinix
ShowHide() is only defined inside the outer function, not globally.

I see no reason why it has to be there; if you try to execute it before form1 and #head1 are available then the problem is that you're trying to execute it too early.

Code: Select all

function ShowHide() {
    var head1 = document.getElementById("head1");
    var showform = document.form1.head1.checked;
    head1.style.visibility = (showform) ? "visible" : "hidden";
}

(function($) {
        // This allows the jQuery object to be used w/o interferance

        // Always nice to use strict mode... inside this function only?
        "use strict";

	// I assume you have something that's supposed to go here?
})(jQuery);

Re: Function not defined

Posted: Wed Aug 14, 2013 12:06 pm
by rick.emmet
Hi requinix,
Thanks for the reply. I don't understand your point or the way your rewrote the JS function. Here's my full JS library (it's a very small app):

Code: Select all

<script type="text/javascript" >

    (function($) {
        // This allows the jQuery object to be used w/o interferance

        // Always nice to use strict mode
        "use strict";

        $(document).ready(function() {
            $("#tabs").tabs();
        }
	);

        $(document).ready(function() {
            $("#form1").validate();
            $("#selecttest").validate();
        }
	);


        $(document).ready(function() {
            $("#form").validate();
        }
        );


        $(document).ready(function() {
            $("#head1").validate();
        }
        );


        $(document).ready(function() {
            $("input:text:visible:first").focus();
        }
        );

        function ShowHide() {
            var head1 = document.getElementById("head1");
            var showform = document.form1.head1.checked;
            head1.style.visibility = (showform) ? "visible" : "hidden";
        }

    })(jQuery);

</script>
It is my understanding that the jQuery Object function should be used so that the JS functions inside do not throw meaningless error messages. The XHTML code is on a web page and the JS library ends up in the <head> section of each web page. This is above the <body> and is available before the check box gets clicked. Could you please explain what you mean by saying that I may be calling the function too early? Thanks very much!
Cheers,
Rick

Re: Function not defined

Posted: Wed Aug 14, 2013 12:42 pm
by requinix
You probably aren't calling it too early, don't mind that.

ShowHide() doesn't need $ so move it to outside the function. If you change it so it does, or want to keep it inside,

Code: Select all

        window.ShowHide = function() {
            var head1 = document.getElementById("head1");
            var showform = document.form1.head1.checked;
            head1.style.visibility = (showform) ? "visible" : "hidden";
        };
will define it at the "global" scope.

Re: Function not defined

Posted: Wed Aug 14, 2013 2:41 pm
by rick.emmet
Hi requinix,
Thank you very much. Yeah, I should have realized that this is straight JS and not jQuery and doesn't need to be in the jQuery object function. It didn't even occur to me! That fixed it - but now I'm wondering, how did it work before ????? Thanks again for your help!
Cheers,
Rick

Re: Function not defined

Posted: Wed Aug 14, 2013 2:42 pm
by requinix
Don't know. What changed?

Re: Function not defined

Posted: Wed Aug 14, 2013 2:43 pm
by rick.emmet
I don't think anything did, but I can't guarantee that.