SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with jQuery not being recognized on PHP page

    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?
    Personal Portfolio - Zeeb44
    IT Manager for - Family Dental Health

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code HTML4Strict:
    <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:
    Code javascript:
    $('.flipLink').click(function(e){

    Use jQuery 1.7s new .on() to delegate like so:
    Code javascript:
    $("#form-wrapper").on("click", ".flipLink", function(e) {

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

    Code javascript:
    formContainer.find('form').submit(function(e){
      e.preventDefault();
    });
     
    //Becomes:
     
    $("#form-wrapper").on("submit", "form", function(e){
      e.preventDefault();
        });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried doing what you said and it seems to not work still.
    Personal Portfolio - Zeeb44
    IT Manager for - Family Dental Health

  4. #4
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would you be able to look at the edits I made like you said and let me know what you think?
    Personal Portfolio - Zeeb44
    IT Manager for - Family Dental Health

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code javascript:
    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.

    Code javascript:
     
    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");
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much. That works.
    Personal Portfolio - Zeeb44
    IT Manager for - Family Dental Health


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •