Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Nick Davies
Nick Davies
7,972 Points

jQuery: $ is not defined

I am trying to check if the messageArea of the form contains 50 characters but it keeps telling me $ is not defined. I cannot figure out why this is happening apart from if PHP has something to do with it as I am using PHP files or because I am using a <textarea>.

Here is my function:

var $message = $("#messageArea");

function messageLength() {
  return $message.val().length > 50;
}

$message.focus(messageLength).keyup(messageLength);

Here is my form from my PHP file:

  <form action="<?php echo BASE_URL; ?>contact/" method ="post">
        <fieldset>
            <?php 
              if(isset($error_message)) {
                echo '<legend class="errormessage">' . $error_message;
              } else {
                  echo '<legend>' . "Contact Me" ;
              } ?>
          </legend>
          <label for="name">Name:</label>
          <input type="text" id="name" name="user_name" value = "<?php if(isset($user_name)){echo htmlspecialchars($user_name);} ?>" placeholder="Enter your name here" class="clear-right"  required>

          <label for="email">Email:</label>
          <input type="email" id="email" name="user_email" value = "<?php if(isset($user_email)){echo htmlspecialchars($user_email);} ?>" placeholder="Enter your email address here!" class="clear-right" required>

          <label for="job">Reason for contact:</label>
          <select id="job" name="user_job" class="clear-right">
            <optgroup label="Work">
            <option value="Application Development">Application Development/Design</option>
            <option value="Website Design">Website Development/Design</option>
            <option value="Computer Diagnostics">Computer Diagnostics</option>
            </optgroup>

            <optgroup label="Business">
            <option value="looking for a job">Looking for a Job</option>
            </optgroup>

            <optgroup label="Alternative">
            <option value="Other Reason">Other Reason</option>
            <option value="Ask a question" selected>Ask a Question</option>
            </optgroup>

          </select>

          <label for="messageArea">Message:</label>
          <textarea id="messageArea" name="user_text" rows="10" cols= "50" placeholder="Write your message here..." required><?php if(isset($user_text)){echo htmlspecialchars($user_text);} ?></textarea>
          <input type="address" id="address" name="user_address" placeholder="Leave blank" style = "display: none;">

        <button type="submit" class="secondary">Send Message</button>
        </fieldset>
       </form>

Thanks

Wietse Wierda
Wietse Wierda
1,403 Points

$ is not a native part of javascript.

there are libraries that use the $ as a variable.

In this case you are probably expecting to have the JQuery libary available to you under the $ variable.

http://www.w3schools.com/jquery/jquery_get_started.asp

3 Answers

Tim Knight
Tim Knight
28,888 Points

Nick,

Are you wanting to use jQuery in your project? That's typically the most common library that aliases something to $ and then doing var $message = $("#messageArea"); would get the div with the ID of messageArea. If that's the case, make sure you have jQuery loading on your page and that it's happening before this script.

Nick Davies
Nick Davies
7,972 Points

Forgot to add the jQuery library!

although now when I try and change the css property nothing happens.

here is my function again:

var $message = $("#messageArea");

function messageLength() {
  return $message.val().length > 50;
}

function isValid(){
  if(messageLength()) {
    $(this).css("border:solid 2px #18E109");
  } else {
    $(this).css("border:solid 2px #F5192F");
  }
}

$message.focus(isValid).keyup(isValid);

For this I would expect the border of the textarea with the id of "messageArea" to have a red border until 50 or more characters are typed into it? In the console isVaild(); comes back as undefined?

Wietse Wierda
Wietse Wierda
1,403 Points
Wietse Wierda
Wietse Wierda
1,403 Points

It looks like you didn't use the proper syntax for setting multiple css properties. http://api.jquery.com/css/#css2

try using this. 

function isValid(){
  if(messageLength()) {
    $(this).css({border:"solid 2px #18E109"});
  } else {
    $(this).css({border:"solid 2px #F5192F"} );
  }
}

Check this fiddle out.

Nick Davies
Nick Davies
7,972 Points

Ah thank you, been trying to figure it out for the last hour!

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Nick,

Since you're only really passing one variable here you really just need to pass them as separate attributes to the .css() method.

You could:

$(this).css('border', '2px solid #18E109');

Or as Wietse points out you can pass in an object using {}, but it's important to remember that should quote both the key and the value within the object (and you separate multiple key/values with commas):

$(this).css({
  "border": "2px solid #18E109"
});