Passing a Javascript Variable into a JSON request

Question

Learner Driver Alert!

I'm trying to transfer the search field content from the form below named variable "name" & input it into the flickr API JSON Request tags field (line 40 below). I've tried all sorts of ways of declaring the variable & can't seem to find what I'm looking for on the web. I'm guessing that its me not knowing exactly what I'm searching for.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <style>
  img {
    height: 100px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<form id="search">

  <p><input id="search-name" type="text" placeholder="Type Region Here"></p>
  <p><input id="search-submit" type="submit" value="Search For Region"></p>

</form>

<div id="images"></div>

<script>

  var name;

  $("#search").submit(function(event){
    event.preventDefault();
    var name = $("#search-name").val();
    console.log("Search Term Was: "+name);
    return false;
  });

   $("#search").submit(function(event) {
    (function() {
      var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
      $.getJSON( flickerAPI, {
        tags: name,
        tagmode: "any",
        format: "json"
      })
        .done(function( data ) {
          $.each( data.items, function( i, item ) {
            $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
            if ( i === 0 ) {
              return false;
            }
          });
        });
    })();
   });
</script>

</body>
</html>

Would anyone be so kind to help / put me in the right direction?

Don't redeclare `var name` again in your `$("#search").submit` function. This makes the scope of the var `name` local to that. Which means it is null or has no value when passed to your JSON function. What you want is this: `/*var*/ name = $("#search-name").val();` — user3065931, Oct 15 '15 at 08:35
why you have added `$("#search").submit()` twice? One is sufficient. — vijayP, Oct 15 '15 at 08:37

score 1 · Answer 1 · answered Oct 15 '15 at 08:37

You do not need 2 event listeners for this. var name = $("#search-name").val(); will create local scope for name hence you won't find value in global name.

Try it this way:

$("#search").submit(function(event) {
  event.preventDefault();
  var name = $("#search-name").val();
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON(flickerAPI, {
      tags: name,
      tagmode: "any",
      format: "json"
    })
    .done(function(data) {
      $.each(data.items, function(i, item) {
        $("<img>").attr("src", item.media.m).appendTo("#images");
        if (i === 0) {
          return false;
        }
      });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <style>
    img {
      height: 100px;
      float: left;
    }
  </style>
</head>

<body>

  <form id="search">

    <p>
      <input id="search-name" type="text" placeholder="Type Region Here">
    </p>

    <p>
      <input id="search-submit" type="submit" value="Search For Region">
    </p>

  </form>

  <div id="images"></div>



</body>

</html>

score 1 · Answer 2 · answered Oct 15 '15 at 08:50

Running the jQuery as so seems to work for me. You could test it out but also note that i changed the reference to flicker to be loaded as secure script:

var name;

$("#search").submit(function(event){
    event.preventDefault();
    name = $("#search-name").val();
    alert("Search Term Was: "+name);

    var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    $.getJSON( flickerAPI, {
        tags: name,
        tagmode: "any",
        format: "json"
    })
    .done(function( data ) {
        alert('done');
        $.each( data.items, function( i, item ) {
            $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
            if ( i === 0 ) {
                return false;
            }
        });
    })
    .fail(function() {alert('fail')});
});

JS Fiddle: https://jsfiddle.net/vsw3r31k/

Passing a Javascript Variable into a JSON request

2 Answers2