Tech Junkie Blog - Real World Tutorials, Happy Coding!: JQuery: Search Context Parameter (Select Within A Container)

Friday, April 17, 2015

JQuery: Search Context Parameter (Select Within A Container)

There's actually two selector parameters in JQuery.  The second parameter is the context parameter.  The context parameter specify the context that the selector should operate within that context.  Let's use the bootstrap form field markup below as an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <title></title>
  <style>
   .form-label-spacing{
    margin-top: 15px;
   }
   
   .form-group-spacing
   {
    margin-left: 20px;
   }
  </style>
    </head>
    <body>
         <form>
   <div class="row">
   <div class="form-group form-group-spacing col-lg-4 col-md-4" id="registration-form">
    <label for="firstName" class="form-label-spacing">First Name:</label>
     <input class="form-control" type="text" id="firstName" placeholder="First Name">
    <label for="firstName" class="form-label-spacing">Last Name:</label>
     <input class="form-control" type="text" id="lastName" placeholder="Last Name">
    <label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
     <input class="form-control" type="email" id="E-Mail" placeholder="Email">
    <label class="form-label-spacing" for="password">Password:</label>
     <input name="Password"  class="form-control"  type="password" placeholder="Password">
    <div class="form-group">
     <label class="form-label-spacing" for="gender">Gender:</label>
      <div class="radio">      
       <label><input type="radio" name="gender" id="gender">Male</label><br/>
       <label><input type="radio" name="gender" id="gender">Female</label>
      </div>
    </div>

         <button type="button"  class="btn btn-default">Sign Up</button>

    </div>
    <div class="col-lg-8 col-md-8"/>
   </div>
      <div class="row">
   <div class="form-group form-group-spacing col-lg-4 col-md-4" id="another-registration-form">
    <label for="firstName" class="form-label-spacing">First Name:</label>
     <input class="form-control" type="text" id="firstName" placeholder="First Name">
    <label for="firstName" class="form-label-spacing">Last Name:</label>
     <input class="form-control" type="text" id="lastName" placeholder="Last Name">
    <label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
     <input class="form-control" type="email" id="E-Mail" placeholder="Email">
    <label class="form-label-spacing" for="password">Password:</label>
     <input name="Password"  class="form-control"  type="password" placeholder="Password">
    <div class="form-group">
     <label class="form-label-spacing" for="gender">Gender:</label>
      <div class="radio">      
       <label><input type="radio" name="gender" id="gender">Male</label><br/>
       <label><input type="radio" name="gender" id="gender">Female</label>
      </div>
    </div>

         <button type="button"  class="btn btn-default">Sign Up</button>

    </div>
    <div class="col-lg-8 col-md-8"/>
   </div>
  </form> 
    </body>
</html>


Basically, we've created two duplicate forms with different ids. The form looks like this in the browser:


For this demo will get rid of the placeholders on the first form and leave the second form's placeholder values in place.  We can accomplish this by specifying the search context for the selector using the form id attribute.

To get rid of the placeholders, type the following code inside the <script> tag

  <script>
   $(document).ready(function(){
    $('input.form-control','#registration-form').removeAttr('placeholder');
   });
  </script>

The code above selects the input form fields with he class "form-control" and then remove the attribute "placeholder" on the form fields. But because we passed in the id '#registration-form' in the second parameter the "placeholder" attribute is only removed from the first form leaving the second form as is because it is not within the context of the selection.
As you can see from the screen shot below the first firm's placeholder values are gone, however the second form field selector is still intact.




3 comments:

  1. Thank you for the post. I will definitely comeback. Let make your life even better with game sims 4 cheats

    ReplyDelete
  2. Thank you for the post. I will definitely comeback. Let make your life even better with game sims 4 cheats

    ReplyDelete
  3. Great code, the author is handsome! It seemed to me that you have it too detailed and from this large in size, I think you can reduce it at least twice if you use pseudo-classes and identifiers, for example, I generally recommend watching a video on YouTube on how to shorten any code by almost five times and not cut it its functionality, unfortunately I don't remember the name of this video, but I do remember that it had about 17 thousand views! I am sure that the author of this video used services https://soclikes.com/ to buy views.

    ReplyDelete

Search This Blog