[SOLVED] Why does JQuery no longer work after not using it for 2 weeks

Why does JQuery no longer work after not using it for 2 weeks

I have a very small web application that I have been playing around with. Two weeks ago I had JQuery functionality with it client side that was able to register new profiles with the server. I booted it up again today after not looking at it for 3 weeks and found that none of the JQuery functionality I had used before no-longer works. So the server starts, the main page goes up but when you click the buttons they don't do anything. I did upgrade to Windows 10 over this time so I'm not sure if that had anything to do with it (I don't know why it would but this is the only thing that I can remember that has happened in the mean time). Anyways for now I am just trying to get an "alert" to pop up when one of the 2 buttons before I try to implement their functionality again. Here is the file structure/ my code.

[![enter image description here][1]][1]

I included 2 copies of the .js files in attempt to debug, it works with neither Here is my index.jsp file:

<html>
    <head>
    <title>Messenger</title>
        <link rel="stylesheet" href="stylesheets/c.css" />
        </head>
<body>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="javascripts/main.js"></script>
    <div class="header">
        <label> Welcome!</label>
    </div>


    <div class="leftArea">

        <label>Username:</label>
        <input type="text" id="username" name="username"/>
        
        <label>Password:</label>
        <input type="text" id="password" name="password" required>
        
        <button id="btnRegister">Register</button>
        <button id="btnSignIn">Sign In</button>
    </div>

    <div class="mainArea">


        <h2>Stupid  Website!</h2>
    </div>
</body>
</html>

I have tried to use both the path "javascripts/index.js" and just "index.js"

Here is my main.js file:

var rootURL = "http://localhost:8080/messenger/webapi";

$(function() {
    
    
    $('#btnRegister').click(function() {
        //var username = $('#username').val();
        alert("Register Press");
        //registerProfile();
    });
    
    $('#btnSignIn')click(function() {
        //getMessage();
        alert('SigIn Press');
        //logIn();
    });
    //Works as a tester
    function getMessage() {
        $.ajax({
            type: 'GET',
            url: rootURL +"/messages/1",
            dataType: "json", // data type of response
            success: (function(data) {
                alert('ID: ' +  data.id);
            })
        });
    }
    
    function logIn() {
        var profileJSON = formToJSON();
        $.ajax({
            type: 'POST',
            contentType: 'application/json',
            url: rootURL + "/profiles/logIn",
            dataType: "json",
            data: profileJSON
        });
    }
    
    function registerProfile() {
        alert("Here");
        var profileJSON = formToJSON();
        $.ajax({
            type : 'POST',
            contentType: 'application/json',
            url: rootURL + "/profiles",
            dataType: "json",
            data: profileJSON,
            success: (function() {
                alert("Success!");
            })
        }); 
    }   
    function signIn(){
        
    }
    //This works
    function formToJSON() {
        return JSON.stringify({
            "profileName": $('#username').val(), 
            "password" : $('#password').val(),
            });
    }
    

});

As you can see I have commented out the functionality that was previously working and am now trying to just get it to have alerts that notify the user that buttons have been pressed. I have no idea what could have happened or maybe I did something that I don't remember? I doubt it though.

Running on an Apache Tomcat v7.0 server. Uses Jersey APIs

Solution

upgrading for windows 10 has nothing to do with jQuery not working

you can load your website from chrome or something and press f12 which will take u to the console.

you can see what's wrong in the console.

furthermore to confirm that ur jQuery library is properly loaded go to page source and copy paste the jQuery script link on your address bar and see if the jQuery file loads.

if it does load, then sometimes its an issue of jQuery being loaded after some other jQuery based scripts. make sure to include the JQuery script first and then put the rest of the scripts and imports below it hope this helps