2010-07-13 3 views
0

Пожалуйста, найдите мой код ниже. Моя проблема в том, что внутренняя jQuery.get() не выполняется. Может ли кто-нибудь помочь мне в этом?нужна помощь с вложенной функцией jquery

jQuery(document).ready(function() { 
    $('.error').hide(); 
    $(".button").click(function() { 
    // validate and process form here 
     $('.error').hide(); 
     var zipCode = $("input#name").val(); 
     if (zipCode == "") { 
     $("label#name_error").show(); 
     $("input#name").focus(); 
     return false; 
     } 
    var key = 'ac9c073a8e025308101307'; 
    var noOfDays = 5; 
    var url = 'http://www.worldweatheronline.com/feed/weather.ashx?q=' + zipCode + '&format=json&num_of_days=' + noOfDays + '&key=' + key; 
    alert(url); 
    jQuery.get(url, function(test) { 
    alert(url); 
     $.each(test.data.weather, function(i, item){ 
     $("body").append("<p>Date: "+item.date+"</p>"); 
     if (i == 3) return false; 
    }); }, 'jsonp')(); 
}); 
}); 

Мой HTML форма выглядит

<div id="contact_form"> 
<form name="contact" action=""> 
    <fieldset> 
    <label for="name" id="name_label">Name</label> 
    <input type="text" name="name" id="name" size="30" value="" class="text-input" /> 
    <label class="error" for="name" id="name_error">This field is required.</label> 

    <br /> 
    <input type="submit" name="submit" class="button" id="submit_btn" value="Send" /> 
    </fieldset> 
</form> 
</div> 

Я бы очень признателен за любые указатели.

Спасибо!

+1

Вы имеете в виду, что не получает выполняется в все? Можете ли вы добавить обратный вызов 'error()'? Я бы предположил, что служба возвращает ошибку, которая не вызывает обратный вызов 'success'. –

+1

Выполняются ли оповещения? – spinon

+0

jQuery.get не запускается вообще. Я знаю это, потому что предупреждение внутри функции не работает. Внешнее оповещение действует, но не внутреннее. –

ответ

4

Проблема, с которой вы столкнулись, заключается в том, что вы ничего не делаете, чтобы остановить отправку своей формы, поэтому она представляет форму до того, как она получит возможность получить данные с worldweatheronline.com.

Измените обработчик щелчка, чтобы быть похожим на это:

$(".button").click(function(event) { 
     event.preventDefault(); 

Вот мой завершен образец кода, который работает так, как вы хотите его:

<html> 
<head> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 
<script type='text/javascript'> 
    jQuery(document).ready(function() { 
     $('.error').hide(); 
     $(".button").click(function(event) { 
      event.preventDefault(); 
      // validate and process form here 
      $('.error').hide(); 
      var zipCode = $("input#name").val(); 
      if (zipCode == "") { 
       $("label#name_error").show(); 
       $("input#name").focus(); 
       return false; 
      } 
      var key = 'ac9c073a8e025308101307'; 
      var noOfDays = 5; 
      var url = 'http://www.worldweatheronline.com/feed/weather.ashx?q=' + zipCode + '&format=json&num_of_days=' + noOfDays + '&key=' + key; 

      alert('first'+url); 

      jQuery.get(url, function(test) { 
       alert(url); 
       $.each(test.data.weather, function(i, item){ 
        $("body").append("<p>Date: "+item.date+"</p>"); 
        if (i == 3){ 
         return false; 
        } 
       }); 
      }, 'jsonp'); 
     }); 
    }); 
</script> 
</head> 
<body> 
<div id="contact_form"> 
<form name="contact" action=""> 
    <fieldset> 
    <label for="name" id="name_label">Name</label> 
    <input type="text" name="name" id="name" size="30" value="" class="text-input" /> 
    <label class="error" for="name" id="name_error">This field is required.</label> 

    <br /> 
    <input type="submit" name="submit" class="button" id="submit_btn" value="Send" /> 
    </fieldset> 
</form> 
</div> 
</body> 
</html> 
+0

Это работало с точки зрения выполнения второй функции частично. Я имею в виду, что теперь появляется второе предупреждение. Однако данные из веб-службы все еще не отображаются. Связано ли это с добавлением информации в тег body? Кажется, я не понимаю этого. Спасибо за помощь! –

+0

Когда я запускаю скрипт, как показано выше, я вижу серию абзацев даты, приведенных ниже формы? –

1

Часть проблемы может быть дополнительным набором круглых скобок после вызова функции .get(). У вас есть:

jQuery.get(url, function(test) { 
    alert(url); 
    $.each(test.data.weather, function(i, item){ 
    $("body").append("<p>Date: "+item.date+"</p>"); 
    if (i == 3) return false; 
}); }, 'jsonp')(); 

Оно должно быть:

jQuery.get(url, function(test) { 
    alert(url); 
    $.each(test.data.weather, function(i, item){ 
     $("body").append("<p>Date: "+item.date+"</p>"); 
     if (i == 3) return false; 
    }); 
}, 'jsonp'); 
+0

Я пробовал это без дополнительного набора paranthesis тоже, это не сработало. Следовательно, я включил paranthesis так, чтобы он вызывал функцию execute. Так или иначе, это не сработало. –

0

Я собираюсь выйти на конечности и предположить, что (на основе URL 'http://www.worldweatheronline.com/feed/weather.ashx?q='), которую вы пытаетесь выполнить запрос AJAX для внешний сайт. Это нарушает Same Domain Policy и не будет работать тихо.

+0

Это не тот случай, он использует jsonp –

+0

Упс, я пропустил это! – HurnsMobile

2

Включите Fiddler или Firebug и посмотрите, как вызывается HTTP-вызов. Появится сообщение об ошибке HTTP. Кроме того, включите консоль в Chrome или Firefox, чтобы увидеть потенциальную ошибку JavaScript.

+0

Yeh, я пробовал это, но он не показывал мне никаких сообщений об ошибках. –

+0

Показывает, что ваш запрос вышел и вернулся с успешным кодом ответа? – a7drew

+0

Из-за того, что новая информация не добавляется к тегу body после отправки запроса, я заметил, что запрос, похоже, не выполняется. Хотя, я не могу показать, что такое логическая ошибка. –

Смежные вопросы