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
– user3065931, Commented Oct 15, 2015 at 8:35
why you have added $("#search").submit() twice? One is sufficient. — vijayP
– vijayP, Commented Oct 15, 2015 at 8:37

Rayon · Accepted Answer · 2015-10-15 08:37:27Z

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>

Philip Bevan · Accepted Answer · 2015-10-15 08:50:44Z

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/

Collectives™ on Stack Overflow

Passing a Javascript Variable into a JSON request

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related