0

I am making a page that loads a JSON file when a form is submitted. The form calls a javascript function on submit, search(this), which loads the JSON file and does some other stuff. To test things out, I used the example for $.getJSON() from the jQuery documentation. 

$.getJSON( "test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

When I use this code outside a function in my javascript file, it works, but if I put it inside my search function, it doesn't do anything.

What is going on?

MCVE

Enter a string in the text field and push the search button. This will call the search function. A breakpoint in the search function will show that it gets called, but the new elements are not added to the page.

demo.html 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"> 

<title> Demo </title>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script type="text/javascript" src="LoadDemo.js"></script>

</head>
<body>

<h1> Demo </h1>
 <form onsubmit="return search(this);">
  <input type="text" name="query" id="query"> <input type="submit" value="Search">
</form> 
<br>

<div id="results">
</div>

</body>
</html>

LoadDemo.js 

function search(form){
    //Clear any existing elements from results
    //$('#results').empty();

    //Retrieve new results
    queryStr = $("#query").val();

    //If I put a breakpoint after this line, I can see the query string printed on the console
    console.log(queryStr);

    //This doesn't work
    $.getJSON( "test.json", function( data ) {
        console.log("success");
          var items = [];
          $.each( data, function( key, val ) {
            items.push( "<li id='" + key + "'>" + val + "</li>" );
          });

          $( "<ul/>", {
            "class": "my-new-list",
            html: items.join( "" )
          }).appendTo( "body" );
        });
}

//This works 
/*
$.getJSON( "test.json", function( data ) {
      var items = [];
      $.each( data, function( key, val ) {
        items.push( "<li id='" + key + "'>" + val + "</li>" );
      });

      $( "<ul/>", {
        "class": "my-new-list",
        html: items.join( "" )
      }).appendTo( "body" );
    }); /**/

Test.json 

{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}
Cecilia
  • 4,512
  • 3
  • 32
  • 75
  • 3
    Does the page reload, instead? What happens if you cancel the form submission, or return `false` from `search()`, so that the `getJSON` call actually has time to finish? Remember that `getJSON` is asynchronous. It returns immediately, and its "success" function is called later. – Paul Roub Jan 11 '16 at 21:49
  • 2
    @PaulRoub And that was the solution. Thanks! – Cecilia Jan 11 '16 at 21:50
  • 1
    The form is submited, you need to prevent this behaviour by e.g returning false from event handler – A. Wolff Jan 11 '16 at 21:52

0 Answers0