Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    205
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question jQuery selector help

    Can some tell me why the following code doesn't work:
    Code:
    $("#logout").click( function(){ logoutCheck(); });
    When I use the traditional js syntax within the html (see below) it works just fine.
    Code:
    <a id="logout" onclick="logoutCheck()">Logout</a>
    The html code is:
    Code:
    <div id="banner">
    <a id="logout">Logout</a>
    </div>

  • #2
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts

    Thumbs up

    you have to make sure you're calling it after the element is on the page (and in the DOM). if it's just stitting in the head by itself, it will run before anything exists on the page. it needs to be inside jQuery's $.ready function (similar to regular onLoad). try this in the <head>:
    Code:
    <script type="text/javascript">
      $(function(){
         $("#logout").click( function(){ logoutCheck(); });
      });
    </script>
    Leon
    Last edited by Leeoniya; 12-12-2008 at 05:58 AM.

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    The reason is that id should not appear multiple times within a page.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #4
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts
    even if it appears more than once, jQuery will still bind properly. and css will also apply to all all the duplicate ids. you just lose the ability to pinpoint an exact one (if you need to)

  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Well, yes you're right. Elements with the id that is being referenced to is indeed assigned an event as scripted.

    I made a sample page to test your thought, and yes, you're right:
    Code:
    <script type="text/javascript">
    $(document).ready(function()
    	{
    	$("#logout").click( function(){ logoutCheck(); });
    	});
    	
    function logoutCheck()
    {
    alert('tut');
    }
    </script>
    <div id="banner">
    <a id="logout">Logout</a>
    </div>
    
    <a id="logout" onclick="logoutCheck()">Logout</a>
    ...so the problem might be somewhere along the code which the OP haven't shown to us (yet).
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #6
    Regular Coder
    Join Date
    Sep 2008
    Posts
    205
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you both for you help. I discovered what was causing the problem, the cause was firebug, a mozilla web development tool add-on. I have a javascript file that using ajax, monitors whether a person is logged in and performs a logout when a user chooses. This js file sends multiple POST information, which caused some error with firebug. A part of the aforementioned js file follows:
    Code:
    $(document).ready(function(){ 
    	$(this).ready(function(){ loginStatus(); }),					   
    	$("#logout").click(function(){ logoutCheck(); }); 
    });
    I do have one follow-up question. Currently, the function loginStatus() is performed after the document is ready/loaded; however, I want the function loginStatus() to run BEFORE the document is loaded. How can I do that?
    Last edited by Dan06; 12-12-2008 at 07:26 PM.

  • #7
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts
    First, use Firebug 1.4.0a9. (that may solve any firebug conflicts). I use Minefield Nightly builds with Firebug 1.4 alphas, works well.

    Code:
    $(document).ready(function(){ 
    	$(this).ready(function(){ loginStatus(); }),					   
    	$("#logout").click(function(){ logoutCheck(); }); 
    });
    This is incorrect. why are you binding to a ready event from within a ready event? use this:

    Code:
    $(function(){ 
       loginStatus();
       $("#logout").click(function(){ logoutCheck(); }); 
    });
    Currently, the function loginStatus() is performed after the document is ready/loaded; however, I want the function loginStatus() to run BEFORE the document is loaded. How can I do that?
    Whatever you're trying to do before load should be done server side. A periodic timed interval ajax function for session expiration is appropriate for auto-logout, though.
    Last edited by Leeoniya; 12-13-2008 at 05:45 AM.

  • #8
    Regular Coder
    Join Date
    Sep 2008
    Posts
    205
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the help. I appreciate the suggestion about firebug. As for the nested binding to a ready event, that was a mistake. Before I found out that the problem was with firebug I was trying different code structures/moving my code around and after I got the code to work I didn't check the syntactic correctness.

    The function loginStatus() is js code that via ajax checks if the user is authenticated/logged-in. I have a similar code in php. The reason I am using the js function is certain web-pages of mine do not use any php, thus there is no php authentication status check. That's why I was trying to have loginStatus() run before the entire DOM loads - similar to having it in the header - so the authentication status could be checked on pages where no php is used.

    Maybe there is a better way of accomplishing what I want, but I don't know of any other way yet. So, if anyone does please let me know. Thanks.
    Last edited by Dan06; 12-16-2008 at 12:06 AM.

  • #9
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts
    i guess my question is: wouldnt your javascript need to query a php script or something else that is capable of retaining a login state for your user anyhow? why not just "include" it on the backend and use the same code?

    i think your only option is to run inline script before anything else in the <head>, and i dont think there is an easy way to prevent the rest from loading. you can load a blank page and then based on your ajax login check, populate the body of the blank page with another ajax call.

  • #10
    Regular Coder
    Join Date
    Sep 2008
    Posts
    205
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm not sure what you mean by,
    why not just "include" it on the backend and use the same code?
    Currently, in my code when a page is created/display via ajax it does query a php script. When the php script is run/queried I have a php object that checks the user's login status. If the user is not logged-in, the object returns false, ending all functions and echos "User Not Logged-in" error message.

    However, I do have webpages that do not use ajax and thus no php script is queried, which results in the php object not running either. Consequently, there is no login status check. That's why I was using the separate js/ajax code on document load to see if the user was logged-in.


  •  

    Posting Permissions

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