0

I have a basic login page with some styling as you'll see in the example. In the end, there's a jQuery script to do an animation for 1500ms whilst loading the next page.

I've encountered a strange bug where approx. 50% of the time, it'll do the animation and load the next page - but the remaining approx 50%, it'll just route to the /static/jquery.min.js file and open it in the browser(with the given URL to the path). I'm no jQuery shark. What gives?

Sample code, a login.html file: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src='static/jquery.min.js'></script>
    <link rel="shortcut icon" type="image/png" href="static/images/favicon.png"/>
    <link rel="shortcut icon" type="image/png" href="static/images/bg.jpg"/>
    <meta charset="UTF-8">
    <title>Title!</title>
    <style>
      // Lots of css for the login form
    </style>


</head>
<body>
<div class="login">
    <header class="login-header"><span class="text"><h4>Title!</h4></span><span class="loader"></span></header>
    <form class="login-form" id="log-inform" action="/loginp" method="post">
        <label><input class="login-input" type="text" name="username"/><h3>user</h3></label>
        <label><input class="login-input" type="password" name="password"/><h3>password</h3></label>
        <button class="login-btn" type="submit">login</button>
    </form>
</div>
<script>
    // jQuery function for animation after successful login
    $('.login-input').on('focus', function() {
        $('.login').addClass('focused');
    });

    function doOnSubmit(e) {
        e.preventDefault();
        $('.login').removeClass('focused').addClass('loading');
        setTimeout(function(){
            $('.login-form').submit();
        },1500); // time in ms to do animation whilst loading the next page
        $('.login').unbind('submit', doOnSubmit);
    }
    $('.login').on('submit', doOnSubmit);
</script>

</body>
</html>

As said - it works completely as intented about half the time. But why would it redirect to the https://localhost:port/static/jquery.min.js half the time? It just opens it up on the browser.

Edit: I think I've narrowed it in a bit. The first time, it'll open the jquery.min.js - the second time, I can login. So it must be related to loading the jquery.min.js?

Second edit: It can be closed. It wasn't related to this code, but rather permissions for loading files from the Java backend. Sorry

cbll
  • 6,499
  • 26
  • 74
  • 117
  • Don't see anything wrong that could do what you describe, but you should attach the submit-event to the form-element not the div, since submit-event [does not bubble](http://stackoverflow.com/questions/5574207/html-dom-which-events-do-not-bubble) – Esko Feb 17 '17 at 07:54
  • I've edited some information after testing. It only does this the first time. It's as if it needs to "open" it to load jquery, then if I try to submit again, the animation works. It's pretty weird. Bubble - can you elaborate? I'm not familiar with the term in this context. – cbll Feb 17 '17 at 07:55
  • When does the problem occur? Page load? Focus? Submit? – Esko Feb 17 '17 at 08:03
  • Maybe you need to wrap your code in $(document).ready(...): https://www.w3schools.com/jquery/event_ready.asp – mvermand Feb 17 '17 at 08:03
  • @mvermand Not needed since the script-tag is at the end of the body. Thought this might not be the case in the real program if this is just an example? – Esko Feb 17 '17 at 08:04

0 Answers0