Javascript function not being called from external js file

Question

I have a home page that opens a register form when you click the register button. When you click this register button the function i have to open the form in another js file is not being called.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Naperville Central Assassins</title>
    <link rel="stylesheet" href="Assets/Stylesheets/Global/Global.css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="Assets/Javascript/Init.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // On Register Click Open Modal
            $('#Register-Action').bind('click', function(){
                // Open The Modal
                modalOpen('Form-Register');
            });
        });
    </script>
</head>
<body>
<div id="Wrapper">
    <header id="Header">
        <div class="Container">
            <a href="#" class="Header-Logo Left"></a>
            <a href="#" class="Header-Link Left Selected">Home</a>
            <a href="#" class="Header-Link Left">Rules</a>
            <a href="#" class="Header-Link Left">Leaderboards</a>
            <a href="#" id="Register-Action" class="Btn Btn-Danger Right">Register</a>
        </div>
    </header>

    <main id="Main">
        <div class="Container">
            Welcome to Naperville Central Assassins 2014!
        </div>
    </main>

    <div id="Form-Register" class="Modal">
        <div class="Modal-Container">
            <a href="#" class="Btn-Close Modal-Toggle"></a>
            <div id="Modal-Register-Form">
                <h1>Register!</h1>
                <form id="Register-Form" method="post" action="#">
                    <fieldset>
                        <p>
                            <legend class="Form-Legend">First Name</legend>
                            <input type="text" name="fname" class="Form-Field" placeholder="First Name" />
                        </p>

                        <p>
                            <legend class="Form-Legend">Last Name</legend>
                            <input type="text" name="lname" class="Form-Field" placeholder="Last Name" />
                        </p>

                        <p>
                            <legend class="Form-Legend">E-Mail</legend>
                            <input type="text" name="email" class="Form-Field" placeholder="E-Mail" />
                        </p>

                        <p>
                            <legend class="Form-Legend">Password</legend>
                            <input type="password" name="password" class="Form-Field" placeholder="Password" />
                        </p>

                        <p>
                            <legend class="Form-Legend">Phone Number</legend>
                            <input type="text" name="pn" class="Form-Field" placeholder="Phone Number" />
                        </p>

                        <p>
                            <legend class="Form-Legend">School ID</legend>
                            <input type="text" name="school_id" class="Form-Field" placeholder="School ID" />
                        </p>

                        <p>
                            <input type="submit" name="submit" class="Btn Btn-Success Left" value="Register" />
                            <button class="Btn Left Modal-Toggle">Cancel</button>
                        </p>

                        <div class="Clear"></div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

JS File

$(document).ready(function(){
    // Check if Browser is Up To Date.
    if(!("FormData" in window)){
        // Tell the user to use a better browser, or whatever
        alert('Upgrade Your Browser! Some Objects May Not Work.');
    }

    // Stop All Forms From Submitting
    $('form').bind('submit', function(e){
        // Don't Do Anything on Form Submit
        e.stopPropagation();
        e.preventDefault();
        return false;
    });

    // Find Modal Div And Close On X Click
    $('.Modal-Toggle').bind('click', function(){
        var divId = $(this).closest('.Modal').attr('id');
        modalClose(divId);
    });

    // Function That Opens A Modal
    function modalOpen(divId){
        $('#' + divId).fadeIn();
    }

    // Function That Closes A Modal
    function modalClose(divId){
        $('#' + divId).fadeOut();
    }

    // Function That Sends AJAX Data To Server
    function AJAXSend(Type, Page, Data){
        alert(Type);
    }
});

put it outside of the document ready statement

Dennis Martinez
– Dennis Martinez

2014-01-12 03:24:23 +00:00
Commented Jan 12, 2014 at 3:24 — Dennis Martinez
– Dennis Martinez, Commented Jan 12, 2014 at 3:24

Arun P Johny · Accepted Answer · 2014-01-12 03:26:54Z

Move the functions like modalOpen() to outside the dom ready handler. When you define a function inside another function the defined function will only be accessible inside that outer function

$(document).ready(function () {
    // Check if Browser is Up To Date.
    if (!("FormData" in window)) {
        // Tell the user to use a better browser, or whatever
        alert('Upgrade Your Browser! Some Objects May Not Work.');
    }

    // Stop All Forms From Submitting
    $('form').bind('submit', function (e) {
        // Don't Do Anything on Form Submit
        e.stopPropagation();
        e.preventDefault();
        return false;
    });

    // Find Modal Div And Close On X Click
    $('.Modal-Toggle').bind('click', function () {
        var divId = $(this).closest('.Modal').attr('id');
        modalClose(divId);
    });

});
// Function That Opens A Modal
function modalOpen(divId) {
    $('#' + divId).fadeIn();
}

// Function That Closes A Modal
function modalClose(divId) {
    $('#' + divId).fadeOut();
}

// Function That Sends AJAX Data To Server
function AJAXSend(Type, Page, Data) {
    alert(Type);
}

Collectives™ on Stack Overflow

Javascript function not being called from external js file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related