jQuery

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
impulse()
Forum Regular
Posts: 748
Joined: Wed Aug 09, 2006 8:36 am
Location: Staffordshire, UK
Contact:

jQuery

Post by impulse() »

I've have been strongly recommended to try jQuery which I am now in the process of doing. But it all seems a little strange to me and I can't quite graps the layout for it. I've looked through the tutorials but none give an overall code example and other tutorials seem to randomly put examples within examples which makes it hard to understand which is the example I want to be looking at. It may be best if I just paste a code example I have and see if you can correct my mistake:
This was modified from the jQuery.com website:

Code: Select all

<html>
  <head>
    <script type='text/javascript' src='jq.js'></script>
    <script type='text/javascript'>
      $("p").focus();
    </script>
  </head>

  <body>
    <a href='http://jquery.com/'> jQuery </a>
    <p> Hello, test here </p>
  </body>
</html>
I expect that to create a popup box saying "Hello, test here" because on jQuerys website it says the equvilent Javascript code for what I posted above would be "alert('Hello, test here');

Regards,
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

if you want to create and alert() use alert()... if you want one alert per p element, and the alert to alert the inside of the p element, use:

Code: Select all

$('p').each(function(){
   alert($(this).html());
})
If you want to run it as soon as the page has loaded:

Code: Select all

$(function(){
   $('p').each(function(){
      alert($(this).html());
   });
});
I've found http://www.visualjquery.com/new.html to be very useful
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

jQuery's selectors are very useful, but different than what you'd expect...

As i'm sure you know, it uses css selectors to determine which element(s) are being selected to be manipulated. As a result, a single call can result in many, many elements being selected and available to be poked and prodded...

I'll try to outline a few different examples:

Code: Select all

$('p').hide(); // hide EVERY SINGLE paragraph found on a page

$('#nav a').hide(); //hide all anchors (links) within the element with an id of 'nav'

$('#nav ul ul').hide(); //hide all nested UL's within the element with an id of 'nav' (useful for drop down menus)

// a favourite of mine, this will add a class name of 'active' to each anchor (link) element found within the element with the id of 'menu', but only the one(s) that have the current page name (this page would be 'posting.php') at the end it's href element. (used to highlight the current page)
$('#menu a[@href$=' + location.pathname.substring(1) + ']').addClass('active'); 

$('#menu a').click(function(){this.blur();}); //this is a workaround for a small firefox annoyance, where the outline around the link you just clicked stays there until you click elsewhere.
jQuery can be a real pain in the arse, but stick with it, read their docs and mailing list, post here, and most importantly, PLAY! It's much easier to learn how it works when you take a normal page, with lots of different elements, and just take your time determining how to select the element or elements you want to work with.

Hope this helped a little :)
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

nickvd wrote:

Code: Select all

$('#menu a[@href$=' + location.pathname.substring(1) + ']').addClass('active');
Nice one! I'll have to remember that... :-)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I'm going to download this right now. I've been meaning to start with it, so I guess now is as good a time as any.
impulse()
Forum Regular
Posts: 748
Joined: Wed Aug 09, 2006 8:36 am
Location: Staffordshire, UK
Contact:

Post by impulse() »

Sorry to have to be a pain.

I've consulted jQuerys documentation but I don't see it as being clear enough to explain what a typical HTML/PHP file should look like that's using jQuery functions. At the moment, as a test, I've wrote a PHP file that has 2 paragraphs and then jQuery should come along and hide those paragraphs. But it's as if jQuery isn't doing anything. This is what my PHP file looks like:

Code: Select all

<html>
  <head>
    <title> Hello </title>
  </head>

  <body>

    <p> Hello, Stephen here </p>
    <p> How do you do? </p>

    <script type='text/javascript' src'jquery.js'>
      if($.browser.msie) { $( function() { alert("this is IE!"); } ); }
      $("p").hide()
    </script>

  </body>
</html>
I know there's no PHP in that file but PHP files are what I'll be using if I can get jQuery to work correctly. jquery.js is located in the same directory as the file above. Any ideas on where I'm going wrong?

Regards,
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Kieran Huggins wrote:
nickvd wrote:

Code: Select all

$('#menu a[@href$=' + location.pathname.substring(1) + ']').addClass('active');
Nice one! I'll have to remember that... :-)
It's so damn handy :)

You'd be wise to add some checks and balances in there, a default filename, etc...

Code: Select all

var path = location.pathname.substring(1) ;
path = (path) ? path : 'index.php';
$('#menu a[@href$=' + path + ']').addClass('active');
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

impulse() wrote:Sorry to have to be a pain.

I've consulted jQuerys documentation but I don't see it as being clear enough to explain what a typical HTML/PHP file should look like that's using jQuery functions. At the moment, as a test, I've wrote a PHP file that has 2 paragraphs and then jQuery should come along and hide those paragraphs. But it's as if jQuery isn't doing anything. This is what my PHP file looks like:

Code: Select all

<html>
  <head>
    <title> Hello </title>
  </head>

  <body>

    <p> Hello, Stephen here </p>
    <p> How do you do? </p>

    <script type='text/javascript' src'jquery.js'>
      if($.browser.msie) { $( function() { alert("this is IE!"); } ); }
      $("p").hide()
    </script>

  </body>
</html>
I know there's no PHP in that file but PHP files are what I'll be using if I can get jQuery to work correctly. jquery.js is located in the same directory as the file above. Any ideas on where I'm going wrong?

Regards,
Give this a try. I havent tested it, but it should work.

Code: Select all

<html>
  <head>
    <title> Hello </title>
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript'>
       $(document).ready(function(){
         if($.browser.msie) { 
            alert("this is IE!"); 
         }
         $("p").hide();
       });
    </script>
 
 </head>

  <body>

    <p> Hello, Stephen here </p>
    <p> How do you do? </p>

  </body>
</html>
impulse()
Forum Regular
Posts: 748
Joined: Wed Aug 09, 2006 8:36 am
Location: Staffordshire, UK
Contact:

Post by impulse() »

I just see:

" Hello, Stephen here

How do you do? "

I had this a couple of weeks ago where jQuery didn't work and I gave up on jQuery but I have to use its functionality now so I can't give up. I tried specifying the full directory in the src = 'x' but that doesn't make any different. Do you have any ideas what might be causing this?
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

What does

Code: Select all

alert(jQuery.fn.jquery);
show you?

I just tested the code I posted, and it works fine for me...
impulse()
Forum Regular
Posts: 748
Joined: Wed Aug 09, 2006 8:36 am
Location: Staffordshire, UK
Contact:

Post by impulse() »

It shows the same as before.

I think it's best I speak to the jQuery team regarding this. Strange thing is though, I couldn't get jQuery working at work earlier which runs on freeBSD and it wont work at home using Linux.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

no no no, what i mean is, add alert(jQuery.fn.jquery); to your code, and refresh the page, it should pop up an alert box with the version of jquery you're running... (or download the current version [1.1.1]).

I'd bet that you don't have the path to jquery right..
impulse()
Forum Regular
Posts: 748
Joined: Wed Aug 09, 2006 8:36 am
Location: Staffordshire, UK
Contact:

Post by impulse() »

Now that was strange. I renamed the file to a .HTML file and changed single quotes to double quotes and it started working.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

You can't embed code in script tags that have a src... instead use:

Code: Select all

<script type='text/javascript' src='jquery.js'></script> 
<script type='text/javascript'>
$(function(){
	if($.browser.msie) { 
	   alert("this is IE!"); 
	}
	$("p").hide();
}
</script>
Post Reply