Reset text using jQuery, with AJAX call present

Question

I am currently practicing making Ajax calls using jQuery. The user enters in a country, presses the Search button, and the AJAX call is made to the API. The user then sees random facts displayed about the country they searched for. My problem is that I want to allow the user to reset the form, and the facts automatically disappear. I got up to this point, but when I enter in a second country, the facts don't want to pop up anymore. I should also mention that I'm using css.animate to animate a few elements on the page. I wonder if that might be messing things up. Can anyone help me out here? I would really like to put the finishing touches on this simple website.

Here's my HTML:

<h1 class = "animated infinte bounce"> World Facts </h1>
    <div class = "info">
        <p> Enter in a country to get some information about it! </p>
            <form class = "zipform">
                <input type ="text" class = "pure-input-rounded">
                <button type = "submit" class = "pure_button"> Search </button>
                <input type="reset" value="Reset">
            </form>
            <div class = "world_facts">
                <p id = "region"> </p>
                <p id = "capital"> </p>
                <p id = "people"> </p>
                <p id = "nat_name"> </p>
                <p id = "domain"> </p>
            </div>
    </div>

And my JS/jQuery:

`$('.pure_button').click(function(e) { 
e.preventDefault()
    console.log("click noticed")

$.ajax({


    url: //API URL HERE,
    type: "GET",
    success: function(data) {
        var country = $('.pure-input-rounded').val();
        console.log("This works too")
        debugger
        console.log(data)
        var capital = data[0].capital
        var people = data[0].demonym
        var region = data[0].region
        var nat_name = data[0].nativeName
        var domain = data[0].topLevelDomain
        $('.world_facts').addClass("animated fadeInDown")
        $('#region').text(country + " is located in " + region + ".")
        $('#capital').text("Its capital is " + capital + ".")
        $('#people').text("People from " + country + " are called " + people + ".")
        $('#nat_name').text(people + " people call their country " + nat_name + ".")
        $('#domain').text("Websites registered in " + country + " have the top level domain name of " + domain + ".")
    }
    });
});

$(":reset").click(function(e) {
    e.preventDefault()
        $(".zipform")[0].reset()
        console.log("Form reset")
        $(".world_facts").text("")

    });`

score 2 · Answer 1 · answered May 09 '16 at 17:34

2

Because when you call

$(".world_facts").text("")

You are removing all the children elements so they no longer exist. You need to remove the text from the children.

$(".world_facts p").text("")

answered May 09 '16 at 17:34

epascarello

204,599
20
195
236

score 1 · Answer 2 · answered May 09 '16 at 17:36

1

Don't use .text("") upon the div, since you lose all the elements within. Besides, you can use .empty().

So, change the line to: $(".world_facts p").empty();

Here's an example:

http://jsbin.com/didumiyexi/1/edit

answered May 09 '16 at 17:36

uglycode

3,022
6
29
55

Thanks a lot, I'll use .empty() from now on. – Leia_Organa May 09 '16 at 18:17
No problem! You can read more about .empty() vs. text("") here: http://stackoverflow.com/questions/15810728/jquery-empty-vs-text – uglycode May 09 '16 at 18:19

score 1 · Answer 3 · answered May 09 '16 at 17:48

By doing $(".world_facts").text("") you aren't removing text from all individual nodes inside that element but (as intended) you basically remove the entire content of what's inside that particular div

You can reset it in the following way instead:

$('.world_facts > p').text("");

This selector targets every immediate <p> inside the world_facts container and sets its text to blank

example:

$('.pure_button').click(function(e) {
  e.preventDefault()
  console.log("click noticed")

  var data = [{
    capital: 'London',
    demonym: 'British',
    region: 'Europe',
    nativeName: 'UK',
    topLevelDomain: 'co.uk'
  }];


  var country = $('.pure-input-rounded').val();
  var capital = data[0].capital
  var people = data[0].demonym
  var region = data[0].region
  var nat_name = data[0].nativeName
  var domain = data[0].topLevelDomain
  $('.world_facts').addClass("animated fadeInDown")
  $('#region').text(country + " is located in " + region + ".")
  $('#capital').text("Its capital is " + capital + ".")
  $('#people').text("People from " + country + " are called " + people + ".")
  $('#nat_name').text(people + " people call their country " + nat_name + ".")
  $('#domain').text("Websites registered in " + country + " have the top level domain name of " + domain + ".")

});

$(":reset").click(function(e) {
  e.preventDefault();
  $(".zipform")[0].reset();

  // instead, clear each form separately
  $('.world_facts > p').text("");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<h1 class="animated infinte bounce"> World Facts </h1>
<div class="info">
  <p>Enter in a country to get some information about it!</p>
  <form class="zipform">
    <input type="text" class="pure-input-rounded">
    <button type="submit" class="pure_button">Search</button>
    <input type="reset" value="Reset">
  </form>
  <div class="world_facts">
    <p id="region"></p>
    <p id="capital"></p>
    <p id="people"></p>
    <p id="nat_name"></p>
    <p id="domain"></p>
  </div>
</div>

Hey, thank you so much. That really opened my eyes as to what was wrong with the code. — Leia_Organa, May 09 '16 at 18:17

Reset text using jQuery, with AJAX call present

3 Answers3