Help with jQuery not being recognized on PHP page

JavaScript
1

http://24-7files.com

That is the page I am working on. Plain and simple is, The top right of the login form says forgot password. If you click the it is supposed to flip and a different form appears for forgetting your password. Well it was working fine When I had everything in the index.html file. I am using a member login script that is php based that I got from somewhere so I moved the login form from the index.html file to the login.php file located a few folders down in the hierarchy. When I did that the flip motion from jquery stopped working. I am pretty positive it has something to do with the paths. But I do not know how to include jquery into php. I can’t simply put <script src=“js/script.js”></script>. So I am at a loss. Can anyone help out?

2

It looks like you’re including the jQuery lib and your script.js in the long form as well as the head.

I think what might be happening is that your load_login script is the one that’s inserting the form on the page. What happens is that the $(document).ready() method has already fired before your script has injected the required DOM, this means that your events won’t be hooked up because “#formContainer” does not yet exist. You could get around that by having a wrapper around your login_load that you can apply the initial handler to.
e.g.


<div id="form-wrapper">
  <script type="text/javascript" src="/login/frontend/load_login.php"></script>
</div>

Then instead of hooking your events directly to elements (that do not yet exist), delegate them to the #form-wrapper

e.g. Instead of:


$('.flipLink').click(function(e){

Use jQuery 1.7s new .on() to delegate like so:


$("#form-wrapper").on("click", ".flipLink", function(e) {

Of course you’ll need to do the same to your forms submit handlers


formContainer.find('form').submit(function(e){
  e.preventDefault();
});

//Becomes:

$("#form-wrapper").on("submit", "form", function(e){
  e.preventDefault();
    });
3

I tried doing what you said and it seems to not work still.

4

Would you be able to look at the edits I made like you said and let me know what you think?

5

At the moment you’re still setting the formContainer variable to cache it, however when you first reference it, it does not yet exist. We can solve this by only referencing it inside your event handler.

e.g.


var formContainer = $('#formContainer'); //get rid of this line
    
    // Listening for clicks on the ribbon links
    $("#form-wrapper").on("click", ".flipLink", function(e) {
  
    // Flipping the forms
    $("#formContainer").toggleClass('flipped'); // just reference the element directly. 
  
    // If there is no CSS3 3D support, simply
    // hide the login form (exposing the recover one)
    if(!$.support.css3d){
        $('#login').toggle();
    }
    
    e.preventDefault();
    
});

In this scenario there isn’t really so much a performance issue that you’d need to cache that in to a variable. Though, strictly speaking, you could still do that if you wanted to by assigning a value into that variable if it’s false or undefined for example, e.g.



var formContainer; //initiate the variable, but keep it empty 

$("#form-wrapper").on("click", ".flipLink", function(e){
    
    //only assign a value into formContainer if it's empty 
    //(or rather if it's a "falsy" value, like undefined, false, 0, empty etc.)
    formContainer = formContainer || $("#formContainer");
    
    // you can now use your cached variable and know that your script will 
    // only attempt to get $("#formContainer") once for the current page instance
    formContainer.toggleClass("alt");
});
6

Thanks so much. That works.