MOVE - jquery widget not attaching to correct element


#1

I've got everything working for the autocomplete jQuery UI widget except where it gets appended to. Right now the best I can do is this:

This is my JS:

var main = function() {
    var cities = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#CitySearch" ).autocomplete({
      source: cities,
      appendTo: ".form-inline"
    });
};
 
$(document).ready(main);

this is the html:

<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  <script src='app.js'></script>
  </head>
  <body>
    <div class="main">
      <div class="container">
        <h1>Move</h1>
        <p>Form healthy habits to take your fitness to the next level.</p>
        <form class="form-inline">
          <div class="form-group ui-widget">
    <label class="sr-only" for="CitySearch">Find your city</label>
    <input type="text" class="form-control" id="CitySearch" placeholder="Find your city">
  </div>
  <button type="submit" class="btn btn-default sr-only">Send invitation</button>
        </form>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <div class="col">
          <h2>Move</h2>
          <p>Become more active by tracking your runs, rides, and walks.</p>
        </div>
        <div class="col">
          <h2>Sync</h2>
          <p>Access your activity on your phone, tablet, or computer.</p>
        </div>
        <div class="col">
          <h2>Compete</h2>
          <p>Set personal challenges and see how you rank against your friends.</p>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>

    <div class="feature">
      <div class="container">
        <h2>Move. Rest. Recover. Move.</h2>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <h2>Go Premium</h2>
        <p>Receive recommendations based on your activity to level up.</p>
        <a class="btn" href="#">Learn More</a>
      </div>
    </div>

    <div class="footer">
      <div class="container">
        <h2>Stop scrolling. Start moving</h2>
        <a class="btn" href="#">Start Now</a>
      </div>
    </div>
  </body>
</html>

Can anyone see why it's not attaching properly?


#2

Please post a link to this exercise. Thanks.


#3

https://www.codecademy.com/courses/jquery-ext/projects/jquery-prj_move?user_id=55df0bb6e39efe3eb3000356


#4

Unfortunately, once we complete this project our code is wiped so we have nothing to which we may refer afterward. And since we cannot access the code editor, we cannot test your code, either. I'm afraid you will have to engage an advisor on this and possibly any subsequent Pro problems.


#5

I encountered similar problems with this project. I was able to get it working by changing the way I imported the jQuery library. Rather than using the src link suggested by the lesson, I used the src link that the Here's what it looks like example uses. I also formatted the jQuery UI src link correctly. The instructions provide a link missing https:. Compare your <script> tags above with what I've included below:

<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src='app.js'></script>

I also found that appendTo was unnecessary. Your #CitySearch selector should be sufficient. Hope this helps.


#6

thank you! it works with these tags.


#7