getJSON только дает результат при втором вызове - PullRequest
Новая
       2

getJSON только дает результат при втором вызове

0 голосов
/ 02 марта 2012

У меня есть форма, которая принимает город в качестве входных данных, затем я использую jQuery для получения идентификатора этого местоположения с помощью API SongKick, затем я использую этот идентификатор для получения будущих событий в этом месте, также используя API SongKick и jQuery.

Проблема, с которой я столкнулся, заключается в том, что когда я вхожу в город и нажимаю «Отправить», первый вызов API SongKick никогда не возвращает результат, но если я снова нажимаю «Отправить» без изменения текста города, он работает просто отлично и работает каждый раз после этого с одним и тем же текстом города).

Любая помощь очень ценится.

HTML код: 

<form action="#" onsubmit="doSearch(this.locationtext.value);"> 
    <input onfocus="this.value=''" type="text" size="60" name="locationtext" value="Enter a City" /> 
    <input type="submit" value="Make it rain" />
  </form>

Код JavaScript: 

function doSearch(locations) {

jQuery.getJSON("http://api.songkick.com/api/3.0/search/locations.json?query=" + locations + "&apikey=eRACBJEh2i3NOewK&jsoncallback=?", function(locdata){
    // THIS CODE NEVER RUNS THE FIRST TIME
    // get metro area ID from SongKick result
    var getID = locdata.resultsPage.results.location[0].metroArea.id;

    // pass ID to another SongKick API call to get events at location
    jQuery.getJSON("http://api.songkick.com/api/3.0/metro_areas/" + getID + "/calendar.json?apikey=eRACBJEh2i3NOewK&jsoncallback=?", function(data){
       // do whatever with result
    });
});

}

Ответы [ 2 ]

1 голос
/ 02 марта 2012

Я думаю, это может быть связано с тем, как вы обрабатываете отправку формы. Вместо использования атрибута onsubmit вы должны попытаться использовать ненавязчивые методы для присоединения обработчиков событий. JQuery делает это очень просто. 

<form action="#"> 
    <input type="text" size="60" name="locationtext" placeholder="Enter a City" /> 
    <input type="submit" value="Make it rain" />
</form>

$("form").submit(function() {
    var loc = $("input[name='locationtext']", this).val();
    $.getJSON("http://api.songkick.com/api/3.0/search/locations.json?jsoncallback=?", {
        query: loc,
        apikey: "eRACBJEh2i3NOewK"
    }, function(data) {
        var getID = data.resultsPage.results.location[0].metroArea.id;
        alert(getID);
    });
    return false;
});​

Обратите внимание, как обработчик события также возвращает false. Это предотвращает выполнение действия по умолчанию (отправка формы)

Демонстрация JSFiddle здесь - http://jsfiddle.net/VSt3R/2/

1 голос
/ 02 марта 2012

Вы должны проверить входное значение после предотвращения события отправки формы: 

<form action="#" id="doSearch"> 
<input onfocus="this.value=''" type="text" size="60" name="locationtext" value="Enter a City" /> 
<input type="submit" value="Make it rain" />


jQuery(function($){


   $("#doSearch").submit(function(e){

    e.preventDefault();//prevent the form to be submitted

     var location = $(e.target).find('[name="location"]').val();

     //do what you need with location

   });

})
...