Statement in $(document).ready( function() not functioning

Question

We have an if statement in our $(document).ready( function() that is not being executed. All other components of the function are working properly but this seems to fail every time. Firebug shows no errors pertaining to the file and when a breakpoint is set, Firebug briefly stops and then loads the page to 100%.

The statement is suppose to retrieve the proper HTML form when the Login button is hovered over and display it beneath the button. See screen shots. One shows the exact same script working on a different page, in a different .js file and one shows it not working but instead an undefined message appearing. Both are in massive js files, in the ready function.

The $(document).ready function is 1600+ lines and the problem function is towards the bottom. Here are the statements:

var dropdown = document.getElementsByClassName("login-mega-main");
    if (dropdown[0] != null){    
        $.ajax({
            url: '/public/login/dropdown_login.jsp',
            method: 'GET',
            success: function(response) { 
                dropdown[0].innerHTML=response.responseText;
            },
            failure: function(response){
                dropdown[0].innerHTML="<p>Failed to login. Please click 'Login' link</p>";
            }
        }); 
    }

The fact that an undefined message is appearing instead of the error message tells me that these statements aren't even being reached. And before you say something, yes that class exists in the page. The working screenshot and the not-working screenshot have the same HTML header.

<li><a href="contact/index.jsp">Contact Us</a>
      <li class="login-mega last"><a href="/public/user_profile.jsp"></a>
        <div class="login-mega-main">
            <div class="login-options">
            <form id="login" name="j_security_form" action="/public/j_security_check" method="post" accept-charset="UTF-8">
            <strong>Account Login</strong><br>
            Username:<br>
            <input type="text" name="j_username"><br>
            Password:<br>
            <input type="text" name="j_password"><br>
            <br>
            <input type="submit" value="Login"><br>
            <br>
            New users <a href="../user_registration.jsp">register here</a><br>
            <a href="../forgot_password.jsp">Forgot password?</a>
            <input type="hidden" name="auth_mode" value="basic">        
            <script>
            var newloc = document.location.href;
            newloc =newloc.replace('index.jsp','index.jsp');
            document.write('<input type="hidden" name="orig_url" value="'+newloc+'">');
            </script>
            </form>
            </div>
        </div>          
        </li>

My guess is that the parenthesis are thrown off somewhere but after hours of scouring we couldn't find anything. Since both pages (screenshots) are using identical HTML code, we're really at a loss.

Answer 1

You are getting undefined because response.responseText is not defined . Just use response

var dropdown = document.getElementsByClassName("login-mega-main");
    if (dropdown[0] != null){

        $.ajax({
            url: '/public/login/dropdown_login.jsp',
            method: 'GET',
            success: function(response) { 
                dropdown[0].innerHTML=response;
            },
            failure: function(response){
                dropdown[0].innerHTML="<p>Failed to login. Please click 'Login' link</p>";
            }
        }); 
    }

For better understanding of jQuery $.get() visit here