jQuery $.ajax() find method

62
April 16, 2018, at 07:19 AM

I'm having difficulty passing the data returned from the server to the correct element in my code, although I can see the response in the developer tools and find seems to return the correct selector. The example is from the book found here. My JavaScript file:

$('nav a').on('click',function(e){
e.preventDefault()
var url = this.href
var $content = $('#content')
$('nav a.current').removeClass('current')
$(this).addClass('current')
$('#container').remove()
$.ajax({
    type: "GET",
    url: url,
    timeout: 2000,
    beforeSend: function(){
        $content.append('<div id="load">Loading</div>')
    },
    complete: function(){
        $('#load').remove()
    },
    success: function(data){
        $content.html($(data).find('#container')).hide().fadeIn(500)
        console.log($(data).find('#container')) // Object returned
    },
    error: function(){
        $content.html('<div id="container">Please try again</div>')
    }
  })
})

The main HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery &amp; Ajax $.ajax() Method</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/c08.css">
</head>
<body>
    <header>
        <h1>DEMO</h1>
        <nav>
            <a href="0038.html" class="current">HOME</a>
            <a href="0038A.html">ROUTE</a>
            <a href="0038B.html">TOYS</a>
        </nav>
    </header>
    <section id="content" style="display: block;">
      <div id="container">
        <h2>Fifteen tons of fun!</h2>
        <div class="third">
          <img src="img/home1.jpg" alt="Quadcopter" />
          <p>Roll up! Roll up! All aboard, for the magical maker bus ride. Next August, we're heading from the west coast to east coast, sharing the maker fun as we travel in our vintage Leyland bus.</p>
        </div>
        <div class="third">
          <img src="img/home2.jpg" alt="Circuit boards" />
          <p>Fly our JavaScript controlled quadcopters, filming the location from above as you soar with the birds. Or, if you prefer to stay on the ground, enter the maker jam.</p>
        </div>
        <div class="third">
          <img src="img/home3.jpg" alt="Wheely thing" />
          <p>The theme of this year's maker-jams is the future of travel. We'll be piling our bus high with arduinos, breadboards, controllers, diodes, engravers, files... Enter today.</p>
        </div>
      </div>
    </section>
    <script type="text/javascript" src="js/0038.js"></script>
  </body>
</html>

The fragment for 0038A.html:

  <div id="container" class="location">
    <h2>The bus stops here.</h2>
    <div class="event">
      <img src="img/map-ca.png" alt="Map of San Francisco" />
      <p><b>SAN FRANCISCO, CA</b><br />May 1</p>
    </div>
    <div class="event">
      <img src="img/map-tx.png" alt="Map of Texas" />
      <p><b>AUSTIN, TX</b><br />May 15</p>
    </div>
    <div class="event">
      <img src="img/map-ny.png" alt="Map of New York" />
      <p><b>NEW YORK, NY</b><br />May 30</p>
    </div>
  </div>

And the fragment for 0038B.html

  <div id="container">
    <h2>Tinker, maker, solder, fly.</h2>
    <div class="third intro">
      <p>We can't wait to load up Barney, our faithful bus, with the widest range of toys we've ever taken on the road... </p><p>This year sees some impressive stats as we will be bringing 15 team members, 50km of cable, 50 arduino compatible boards, 25 laptops, 20 tablets, 10 mobile phones, 5 quadcopter kits, and a giant laser strapped to the roof. </p><p>We're also bringing a big top, which will provide shelter throughout the night as well as hosting talks and demonstrations from an impressive range of guest speakers.</p><p>And yes, we did say that we have a giant laser strapped to the roof of the bus. Let's see how often we get stopped for speeding this time!</p>
    </div>
    <div class="third">
      <img src="img/toys1.jpg" alt="Circuit boards" />
      <p>Our new generator is so hefty we have to tow it on a dedicated trailer, but that's worth it because we're powering bigger projects than ever and we expect you to be tinkering throughout the night with our 24-hour maker-jams.</p>
    </div>
    <div class="third">
      <img src="img/toys2.jpg" alt="Circuit boards" />
      <p>Our state of the art 3D printer is ready to help you take your own souvenirs home! The only catch is that you have to design them. We'll add each one to our open-source 3D designs library, and the designer of the best one gets to keep the printer.</p>
    </div>
  </div>

I wouldn't ask, but this has me stumped, and I know it's something simple. Thanks.

J.

Answer 1

The .find() method searches descendant elements for matches, in your case, what you're searching for is at the top of the hierarchy so you get no matches. If your element is at the top level you don't need to do anything to get to it, unless of course, there is other top-level data you don't want. In which case you can use .filter()

$content.html(data).hide().fadeIn(500)
READ ALSO
I&#39;m having a double click issue activating jQuery function

I'm having a double click issue activating jQuery function

I've found similar answers that solve the double click issue when first calling a jQuery function, usually from having a click() function inside another click() or missing the $(document)ready

50
Reset CKEditor5 form

Reset CKEditor5 form

Sorry if this has been discussed before, but I have searched exhaustively and only found solutions to the older version, not 5I want to have two buttons for my forms, SEND and RESET

83
One button works, the other one doesn&#39;t

One button works, the other one doesn't

I have two input buttonsOne to set the MySQL database value to 0 the other to set it to 1

40
Same JavaScript file for multiple JSON files, but selecting which JSON data is shown in a specific part of the site

Same JavaScript file for multiple JSON files, but selecting which JSON data is shown in a specific part of the site

I am trying to set-up a website which would contain multiple quizzes - all on a different topic but all in the same multiple-choice formatWhat I would like to do is have each topic placed in different parts of the website (something I am doing with HTML/CSS)

56