Javascript file placed in external file not executing

Question

I made a webpage that inputs user's feedback using a form. On successful submit I display a thank you message on the same page, for which I'm using javascript.

The code executes well when I put the javascript on the same page. However, when I tried to separate the script onto a file (in a test webserver), it stopped executing.

Can you please help?

Relevant codes are mentioned below: Head Element

<head>
        <meta charset="utf-8" />
        <!-- For proper rendering and touch zooming in mobile devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="shortcut icon" type="image/x-icon" href="images/logo.ico" />

        <title><?= htmlspecialchars($title) ?></title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <link rel="stylesheet" type="text/css" href="css/style.css" />      
        <script type="text/javascript" src="../javascript/submit-logic.js"></script>

    </head>

First 2-3 lines of the javascript function:

$(function () 
{
    $('form').submit(function (e) 
    {                   
        e.preventDefault();

Detailed code (HTML, CSS, Javascript) can be found in my codepen (this is working as expected) : http://codepen.io/abbor123/pen/YGwVXg

Javascript folder is placed outside the Public folder and has 755 permission.

Edit 1:

File Tree Screenshot:

Console Error Screenshot: (submit-logic.js is the name of my javascript file. The URL mentioned on hovering over this link is: /javascript/submit-logic.js:1 )

The javascript code page is available at the following URL: https://gist.github.com/abor123/3193eb399c3f973be453ae9a8fcc0ce5

Right now we can only assume that you above your root (where index.html is) you have a folder named 'javascript' in which your js file resides. It would be helpful if you could provide a file-tree of your files. — qwelyt
– qwelyt, Commented Sep 13, 2016 at 14:47
As @Chewtoy said, its not really clear what's the problem. Can you check your browser console for any errors. Its possible it can't load the file, or is getting a 500 error on the server, either of which would help debug. — Ava
– Ava, Commented Sep 13, 2016 at 15:09
"Javascript folder is placed outside the Public folder" — I'd be surprised if your server was configured to serve static files that weren't in the Public folder given that such a folder exists. — Quentin
– Quentin, Commented Sep 13, 2016 at 15:34
Hello @Aeolingamenfel, I've updated the question above with details of file tree and console log error. Can you please suggest me on the reason of such an error? .... — ABor
– ABor, Commented Sep 13, 2016 at 16:32
Hello @Chewtoy, the question has been updated with necessary details. Please look into it. — ABor
– ABor, Commented Sep 13, 2016 at 16:32

Steven Leimberg · Accepted Answer · 2016-09-13 16:52:58Z

2

Move your javascript folder into public_html. As Quentin commented, your server likely isn't set up to serve any files outside public_html.

answered Sep 13, 2016 at 16:52

Steven Leimberg

7851 gold badge4 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ABor Over a year ago

Moving the javascript folder to public_html worked. But I cannot understand why the php files outside public_html works and not the javascript. Can you please make me understand this? @Quentin

Quentin Over a year ago

The non-public PHP files are never requested by the browser. They are only used by PHP itself.

Ava Over a year ago

To elaborate on @Quentin's point, PHP runs server-side, meaning it theoretically has access to the entire server (that you have given it permission to), meaning it can access things outside of the public root. Apache/Nginx/etc. restricts client access to the folders and files under your document root, for security reasons, so anything that has to be loaded by the browser has to be accessible there.

Steven Leimberg Over a year ago

Quentin and Aeolingamenfel are correct. The publicly facing PHP scripts are including or requiring files on a server level. The HTML being rendered by your browser however can only access publicly facing files and URL's.

Collectives™ on Stack Overflow

Javascript file placed in external file not executing

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related