...

View Full Version : jQuery selector help



Dan06
12-11-2008, 08:44 PM
Can some tell me why the following code doesn't work:


$("#logout").click( function(){ logoutCheck(); });


When I use the traditional js syntax within the html (see below) it works just fine.


<a id="logout" onclick="logoutCheck()">Logout</a>


The html code is:


<div id="banner">
<a id="logout">Logout</a>
</div>

Leeoniya
12-12-2008, 05:51 AM
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>:

<script type="text/javascript">
$(function(){
$("#logout").click( function(){ logoutCheck(); });
});
</script>

Leon

rangana
12-12-2008, 11:39 AM
The reason is that id should not appear multiple times within a page.

Leeoniya
12-12-2008, 02:34 PM
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)

rangana
12-12-2008, 02:44 PM
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:


<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).

Dan06
12-12-2008, 06:41 PM
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:


$(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?

Leeoniya
12-13-2008, 05:31 AM
First, use Firebug 1.4.0a9. (that may solve any firebug conflicts). I use Minefield Nightly builds with Firebug 1.4 alphas, works well.


$(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:


$(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.

Dan06
12-16-2008, 12:04 AM
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.

Leeoniya
12-16-2008, 02:11 AM
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.

Dan06
12-16-2008, 05:25 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum