Входное значение в вызове ajax не работает

Question

Я работаю над небольшим проектом проб и ошибок, который позволяет вам просто искать фотографии на Instagram. Я нашел this example, и он работает безупречно. К сожалению, вы можете использовать только один статический тег в этом примере. То, что я пытаюсь сделать, позволяет пользователю искать тег. Это входное значение затем используется как тег, который используется в вызове ajax. К сожалению, это не работает. Нет ошибок в консоли или что-то еще. Просто никакого ответа.

JQuery

// Search new tag 
$("form#s-form > button").click(function() { 
    if (!$("form#s-form > input").val()) { 
     // notice no value given 
    } else { 
     var tag = $("form#s-form > input").val(), // Here is the tag 
      maxid = $("#more").data("maxid"); 

     // change the data-tag to the tag that is searched for 
     $("#more").data("tag", tag); // this does NOT work 

     $.ajax({ 
      type: "GET", 
      url: "ajax.php", 
      data: { 
       tag: tag, // Here it is used in ajax 
       max_id: maxid 
      }, 
      dataType: "json", 
      cache: false, 
      success: function (data) { 
       // Clear current data 
       $("div#photos").empty(); 

       // Output data 
       $.each(data.images, function (i, src) { 
        $("div#photos").append('<div class="gallery-item"><a href="#"><img src="' + src + '"></a></div>'); 
       }); 

       // Store new maxid 
       $("#more").data("maxid", data.next_id); 

       // Some extra functions 
      } 
     }); 
    } 
}); 

HTML/PHP

<div id="wrapper"> 
    <div id="photos"> 
     <?php 
      /** 
      * Instagram PHP API 
      */ 

      require_once 'instagram.class.php'; 

      // Initialize class with client_id 
      // Register at http://instagram.com/developer/ and replace client_id with your own 
      $instagram = new Instagram('MYCLIENT_ID'); 
      // Show 'load more' button 
      echo '<button id="more" data-maxid="'.$media->pagination->next_max_id.'" data-tag="'.$tag.'">Meer foto\'s?</button>'; 
     ?> 
    </div> 

    <form id="s-form"> 
     <input type="text" placeholder="Andere zoeken"> 
     <button type="submit">Zoek!</button> 
    </form> 
    <a href="#" id="added">Foto's toegevoegd <br> Scroll naar beneden</a> 
</div> 

ajax.php

<?php 
    /** 
    * Instagram PHP API 
    */ 

    require_once 'instagram.class.php'; 

     // Initialize class for public requests 
     $instagram = new Instagram('MYCLIENT_ID'); 

     // Receive AJAX request and create call object 
     $tag = $_GET['tag']; 
     $maxID = $_GET['max_id']; 
     $clientID = $instagram->getApiKey(); 

     $call = new stdClass; 
     $call->pagination->next_max_id = $maxID; 
     $call->pagination->next_url = "https://api.instagram.com/v1/tags/{$tag}/media/recent?client_id={$clientID}&max_tag_id={$maxID}"; 

     // Receive new data 
     $media = $instagram->getTagMedia($tag,$auth=false,array('max_tag_id'=>$maxID)); 

     // Collect everything for json output 
     $images = array(); 
     foreach ($media->data as $data) { 
     $images[] = $data->images->standard_resolution->url; 
     } 

     echo json_encode(array(
     'next_id' => $media->pagination->next_max_id, 
     'images' => $images 
    )); 
?> 

Да я заполнил мой идентификатор клиента :)

И instagram.class.php, но скорректирован как ответ, упомянутый ранее.

Любая помощь или направление с этим?

Answer 1

Изменить тип вашей кнопки submit в button или отменить представление формы

<form id="s-form"> 
    <input type="text" placeholder="Andere zoeken"> 
    <button type="button">Zoek!</button> 
</form> 

или

$("form").on("submit", function(ev) { 
    ev.preventDefault(); 
});