title: Why I'm not able to run the jQuery code in one of my pages from the project in following scenario?
body: <p>I'm using PHP, jQuery, Smarty, etc. for my website.</p>
  
  <p>I've one form on which there are three input text fields viz. <strong>zip_code, city and state</strong>. I've written jQuery code to auto-populate the city and state input text fields when user enters valid US zip code into input text field <strong>zip_code</strong>.</p>
  
  <p>Other jQuery functionality on the form is working fine and perfect but I'm having issue only with this functionality. I created one demo page for this functionality there this zip_code functionality worked properly. But it's not working in my project.</p>
  
  <p>I'm putting below the whole HTML of the page which contains the form :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Project Name&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content="Example of Fixed Layout with Twitter Bootstrap version 2.0 from w3resource.com"&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;link href="http://localhost/project_folder/user_ui_files/css/bootstrap.css" rel="stylesheet"&gt;       
      &lt;link href="http://localhost/project_folder/user_ui_files/css/example-fixed-layout.css" rel="stylesheet"&gt;    
      &lt;link href="http://localhost/project_folder/user_ui_files/css/bootstrap-responsive.css" rel="stylesheet"&gt;
      &lt;link href="http://localhost/project_folder/user_ui_files/css/bootstrap-modal.css" rel="stylesheet"&gt;
      &lt;link href="http://localhost/project_folder/user_ui_files/css/slippry.css" rel="stylesheet"&gt;
      &lt;link href="http://localhost/project_folder/user_ui_files/css/signin.css" rel="stylesheet" type="text/css"&gt;
      &lt;link href="http://localhost/project_folder/user_ui_files/css/jquery.dateLists.css" rel="stylesheet" type="text/css"&gt;
  
      &lt;style type="text/css"&gt;
  
      .hideme {
        opacity:0;
      }
      @media (max-width: 979px) {
        .navbar-fixed-top.navbar-absolute {
          position: absolute;
          margin: 0;
        }
      }
      .navbar-absolute + div {
        margin-top: 58px;
      }
      #footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        /* Set the fixed height of the footer here */
        background-color: #f5f5f5;
      }   
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="navbar navbar-fixed-top navbar-absolute"&gt;
        &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
            &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class="brand" href="http://localhost/project_folder/index.php"&gt;&lt;img src="http://localhost/project_folder/user_ui_files/img/logo.png"/&gt;&lt;/a&gt;
            &lt;div class="nav-collapse"&gt;
              &lt;ul class="nav  pull-right navbar-fixed-bottom"&gt;
                &lt;li&gt;&lt;a href="http://localhost/project_folder/login.php"&gt;&lt;i class="icon-user icon-black"&gt;&lt;/i&gt; LOGIN&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://localhost/project_folder/register.php"&gt;&lt;i class="icon-pencil icon-black"&gt;&lt;/i&gt; REGISTER&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="http://localhost/project_folder/chk_rebate_status.php"&gt;&lt;i class="icon-edit icon-black"&gt;&lt;/i&gt; REBATE STATUS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://localhost/project_folder/contact_us.php"&gt;&lt;i class="icon-envelope icon-black"&gt;&lt;/i&gt; CONTACT&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="storelocations.php"&gt;&lt;i class="icon-map-marker icon-black"&gt;&lt;/i&gt; STORE LOCATOR&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;
                  &lt;form action="index.php" class="navbar-form pull-right" id="formzip" method="post"&gt;
                    &lt;input type="hidden" class="form-control" name="op" id="op" value="zip_code"&gt;
                    &lt;input type="hidden" class="form-control" name="form_submitted" id="form_submitted" value="yes"&gt;
                    &lt;input style="width: 115px;" type="text" placeholder="Enter the zip code" name="zip_code" id="zip_code"  value="" &gt; &lt;i class="icon-zip" style="margin-top:3px;" onclick='$("#formzip").submit();'&gt;&lt;/i&gt;
                  &lt;/form&gt;
                &lt;/li&gt;                
              &lt;/ul&gt;
            &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;   
      &lt;style type="text/css"&gt;
      .list {
        width:60px;
      }
  
      .dateLists_container {
      }
  
      .dateLists_container .list {
        float:left;
      }
  
      .dateLists_container .day_container {
      }
  
      .dateLists_container .day_container .list {
        margin-right:10px;
      }
  
      .dateLists_container .month_container {
      }
  
      .dateLists_container .month_container .list {
        margin-right:10px;    
      }
  
      .dateLists_container .year_container {
      }
  
      .dateLists_container .year_container .list {
      }
      &lt;/style&gt;
      &lt;div class="container" style="padding-top: 140px; margin-bottom: 90px;"&gt;
        &lt;div class="row"&gt;
          &lt;div class="span12 account-container12"&gt;        
            &lt;legend&gt;New User? Register&lt;/legend&gt;
            &lt;form action="register.php" class="form-horizontal" method="post"&gt;
              &lt;div class="row"&gt;
                &lt;input type="hidden" class="form-control" name="op" id="op" value="preview"&gt;
                &lt;input type="hidden" class="form-control" name="form_submitted" id="form_submitted" value="yes"&gt;
                &lt;input type="hidden" class="form-control" name="main_op" id="main_op" value=""&gt;
                &lt;div class="col-xs-1"&gt;&lt;/div&gt;                     
              &lt;/div&gt;
              &lt;div class="span6"&gt;
                &lt;div style="float: clear;"&gt;&lt;/div&gt;
                &lt;fieldset&gt;
                  &lt;!-- Form Name --&gt;
                  &lt;!-- Text input--&gt;
                  &lt;div class="control-group"&gt;
                    &lt;label class="control-label" for="First Name"&gt;First Name&lt;span style="color:#FF0000"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;input name="first_name" id="first_name" value="" type="text" placeholder="Enter your first name"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Text input--&gt;
                  &lt;div class="control-group"&gt;
                    &lt;label class="control-label" for="Last Name"&gt;Last Name&lt;span style="color:#FF0000"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;input name="last_name" id="last_name" value="" type="text" placeholder="Enter your last name"&gt;    
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Text input--&gt;
                  &lt;div class="control-group"&gt;
                    &lt;label class="control-label" for="Street 1"&gt;Address 1&lt;span style="color:#FF0000"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;input name="street1" id="street1" value="" type="text" placeholder="Enter the address"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Text input--&gt;
                  &lt;div class="control-group"&gt;
                    &lt;label class="control-label" for="Street 2"&gt;Address 2&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;input name="street2" id="street2" value="" type="text" placeholder="Enter your address"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Text input--&gt;
                  &lt;div class="control-group"&gt;
                    &lt;label class="control-label" for="Zip"&gt;Zip&lt;span style="color:#FF0000"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;input name="zip_code" id="zip_code" value="" type="text" placeholder="Enter your zip code" class="input-medium"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Text input--&gt;
                  &lt;div class="control-group"&gt;
                    &lt;label class="control-label" for="City"&gt;City&lt;span style="color:#FF0000"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;input name="city" id="city" value="" readonly="readonly" type="text" placeholder="Select your city" class="input-medium"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Text input--&gt;
                  &lt;div class="control-group"&gt;
                    &lt;label class="control-label" for="State Code"&gt;State&lt;span style="color:#FF0000"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;input name="state_code" id="state_code" value="" readonly="readonly" type="text" placeholder="Enter state code" class="input-medium"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/fieldset&gt;      
              &lt;/div&gt;
              &lt;div class="span5"&gt;
                &lt;fieldset&gt;
                  &lt;!-- Text input--&gt;            
                  &lt;div class="control-group"&gt;
                    &lt;label class="control-label" for="DOB"&gt;Date Of Birth&lt;span style="color:#FF0000"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;input class="form-control date_control" type="text" name="dob" id="dob" value=""&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;              
                  &lt;!-- Text input--&gt;
                  &lt;div class="control-group"&gt;
                    &lt;label class="control-label" for="Email Id"&gt;Email Id&lt;span style="color:#FF0000"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;input name="email" id="email" value="" type="text" placeholder="Enter your mail ID"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Text input--&gt;
                  &lt;div class="control-group"&gt;
                    &lt;label class="control-label" for="num"&gt;Phone No.&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;input name="phone_no" id="phone_no" value="" type="text" placeholder="Enter phone no." class="input-medium"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Text input--&gt;
                  &lt;div class="control-group"&gt;
                    &lt;label class="control-label" for="Password"&gt;Password&lt;span style="color:#FF0000"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;input name="password" id="password" value="" type="password" placeholder="Enter the Password" class="input-medium"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Text input--&gt;
                  &lt;div class="control-group"&gt;
                    &lt;label class="control-label" for="Password"&gt;Confirm Password&lt;span style="color:#FF0000"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;input name="password_confirmation" id="password_confirmation" value="" type="password" placeholder="Re-enter the password" class="input-medium"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Multiple Radios --&gt;
                  &lt;div class="control-group"&gt;
                    &lt;label class="control-label" for="radios"&gt;Mode of Payment&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;label class="radio" for="radios-0"&gt;
                      &lt;input type="radio"   name="mode_of_payment" value="paypal"&gt;
                      PayPal
                      &lt;/label&gt;
                      &lt;label class="radio" for="radios-1"&gt;
                      &lt;input type="radio"  name="mode_of_payment" value="check"&gt;
                      Check
                      &lt;/label&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Text input--&gt;
                  &lt;div id="paypal_op"  style="display:none;"  class="control-group"&gt;
                    &lt;label class="control-label" for="email"&gt;PayPal Email Account&lt;/label&gt;
                    &lt;div class="controls"&gt;
                      &lt;input type="text" name="pay_pal_email" id="pay_pal_email"  value=""  placeholder="Enter email id" class="input-large"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/fieldset&gt;        
              &lt;/div&gt;
              &lt;div class="container"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="span2"&gt;&lt;/div&gt;
                  &lt;div class="span5"&gt;
                    &lt;button type="submit" class="btn btn-success"&gt;&lt;i class="icon-white icon-ok"&gt;&lt;/i&gt; Preview&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/form&gt;        
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt; &lt;!-- /container --&gt;    
      &lt;footer style="background-color:#000" id="footer"&gt;
          &lt;div class="container"&gt;
            &lt;div class="row"&gt;
              &lt;div class="span3 top-buffer-footer"&gt;
              &lt;p&gt; &amp;copy; 2014 PROJECT NAME&lt;/p&gt;
              &lt;/div&gt;
              &lt;div align="center" class="span7 top-buffer-footer"&gt;
              &lt;a  href="#"&gt;About Us&lt;/a&gt; |
                &lt;a href="#"&gt;Privacy Policy&lt;/a&gt; |
                &lt;a href="#"&gt;Terms &amp; Conditions&lt;/a&gt;
            &lt;/div&gt;
              &lt;div class="span2 top-buffer-footer"&gt;
              &lt;a style="float:right"  href="#"&gt;Powered By COMPANY NAME&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;      
      &lt;/footer&gt;    
  
      &lt;!-- Le javascript
      ================================================== --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster and more quicker--&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/slippry.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/bootstrap-tooltip.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/bootstrap-alert.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/bootstrap-button.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/bootstrap-carousel.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/bootstrap-collapse.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/bootstrap-dropdown.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/bootstrap-modal.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/bootstrap-popover.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/bootstrap-scrollspy.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/bootstrap-tab.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/bootstrap-transition.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/bootstrap-typeahead.js"&gt;&lt;/script&gt; 
      &lt;script src="http://localhost/project_folder/user_ui_files/js/bootstrap-modalmanager.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/jquery.dateLists.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost/project_folder/user_ui_files/js/custom/common.js"&gt;&lt;/script&gt;    
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The jQuery code to run this zip code functionality is written into file <strong>common.js</strong> which is included at last of this page.</p>
  
  <p>Following is the code from the file <strong>common.js</strong>:</p>
  
  <pre><code>$(document).ready(function() { 
  /* Every time the window is scrolled ... */
    $(window).scroll( function(){
      /* Check the location of each desired element */
      $('.hideme').each( function(i) {
  
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
  
        /* If the object is completely visible in the window, fade it it */
        if( bottom_of_window &gt; (bottom_of_object - (bottom_of_object * 0.2)) ) {
  
          $(this).animate({'opacity':'1'},300);
  
        }
  
      }); 
    });
    /*jQuery code for autopo-populate city and state when customer enters valid zip code*/
    $("#zip_code").keyup(function() {
      var el = $(this);
  
      if (el.val().length === 5) {
        $.ajax({
          url: "http://zip.elevenbasetwo.com",
          cache: false,
          dataType: "json",
          type: "GET",
          data: "zip=" + el.val(),
          success: function(result, success) {
            $("#city").val(result.city);
            $("#state_code").val(result.state);
          }
        });
      }
    });
  
    $('#dob').dateDropDowns({dateFormat:'mm-dd-yy'});    
    $("input[type='radio']").change(function() {
      if($(this).val()=="paypal") {
        $("#paypal_op").show();
      } else {
        $("#paypal_op").hide(); 
      }    
    });  
  });
  
  $(function() {
    var demo1 = $("#demo1").slippry({
      transition: 'fade',
      useCSS: true,
      speed: 1000,
      pause: $('#brand_slider_time').val() * 1000,
      auto: true,
      preload: 'visible'
    });
    $('.stop').click(function () {
      demo1.stopAuto();
    });
    $('.start').click(function () {
      demo1.startAuto();
    });
    $('.prev').click(function () {
      demo1.goToPrevSlide();
      return false;
    });
    $('.next').click(function () {
      demo1.goToNextSlide();
      return false;
    });
    $('.reset').click(function () {
      demo1.destroySlider();
      return false;
    });
    $('.reload').click(function () {
      demo1.reloadSlider();
      return false;
    });
    $('.init').click(function () {
      demo1 = $("#demo1").slippry();
      return false;
    });
  });
  </code></pre>
  
  <p>I'm using jQuery v1.7.1 in my project.</p>
  
  <p>I've also created a jsFiddle with only these necessary fields it's working fine. You can see the fiddle <a href="http://jsfiddle.net/b2sLp0zL/" rel="nofollow">here</a>.</p>
  
  <p>In my project I tried to debug the code, tried to put alert inside the function I wrote for zip_code. Neither the Firebug console shown me any error nor the alert got printed. </p>
  
  <p>Then I tried to print the alert outside the zip_code function (i.e. on page load) it printed. The alert is not getting printed inside the function. Also I tried various other events like focus, blur, etc. instead of key up then also the alert didn't print. The Firebug console never shown me any error or warning.</p>