2010-07-13 5 views
0

아래 코드를 찾으십시오. 제 문제는 내부 jQuery.get()이 실행되지 않는다는 것입니다. 어떤 사람이 나를 도와 줄 수 있습니까? 정말 어떤 포인터를 감사하겠습니다 중첩 된 jquery 함수에 대한 도움이 필요합니다.

<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> 

처럼

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 양식을 보인다.

감사합니다.

+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'); 
+0

나는 여분의 paranthesis도없이 그것을 시도했다, 그것은 작동하지 않았다. 따라서 필자는 paranthesis를 포함하여 함수를 execute라고 부릅니다. 어느 쪽이든, 그것은 작동하지 않았다. –

0

임은 사지에 나가서 가서 당신이에 AJAX 요청을 수행하려고합니다 (URL 'http://www.worldweatheronline.com/feed/weather.ashx?q=' 기준) 추측 :

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')(); 

그것은해야한다 : 당신은이 외부 사이트. 이는 Same Domain Policy을 위반하며 자동으로 실패합니다.

+0

그게 아니라면 그는 jsonp –

+0

을 사용하고 있습니다. – HurnsMobile

2

Fiddler 또는 Firebug를 켜고 HTTP 통화가 끊어지는 것을보십시오. HTTP 오류 메시지가 표시됩니다. 또한 Chrome 또는 Firefox에서 콘솔을 켜서 잠재적 인 JavaScript 오류를 확인하십시오.

+0

예, 저도 해봤지만 오류 메시지가 표시되지 않았습니다. –

+0

귀하의 요청이 나갔다가 성공적인 응답 코드와 함께 되돌아 왔음을 보여줍니까? – a7drew

+0

요청을 제출 한 후에 새로운 정보가 body 태그에 추가되지 않는다는 사실 때문에 요청이 만족스럽지 않은 것으로 나타났습니다. 비록 논리적 오류가 무엇인지 지적 할 수는 없습니다. –

관련 문제