ansaurus

Question

Answer 1

+1 A:

Part of the problem could be the extra set of parentheses after your .get() function call. You have:

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

It should be:

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

EAMann 2010-07-13 20:20:01

I tried it without the extra set of paranthesis too, it did not work. Hence, I included the paranthesis so that it would call the function execute. Either way, it did not work.

rookie 2010-07-14 15:45:46

Answer 2

A:

Im going to go out on a limb and guess that (based on the url 'http://www.worldweatheronline.com/feed/weather.ashx?q=' ) that you are attempting to perform an AJAX request to an external site. This violates Same Domain Policy and will fail silently.

HurnsMobile 2010-07-13 20:21:02

thats not the case, he is using jsonp

wowo_999 2010-07-13 20:27:55

Whoops, I missed that!

HurnsMobile 2010-07-13 20:30:53

Answer 3

+2 A:

Turn on Fiddler or Firebug and watch the HTTP call go out. You'll see the HTTP error message there. Also, turn on your console in Chrome or Firefox to see a potential JavaScript error.

AndrewDotHay 2010-07-13 20:21:05

Yeh, I tried that, but it did not show me any error messages.

rookie 2010-07-14 15:44:47

Does it show that your request went out and came back with a successful response code?

AndrewDotHay 2010-07-14 18:19:28

From the fact that the new information doesn't get appended to the body tag after submitting the request, I've noticed that the request doesn't seem to be satisfied. Although, I can't seem to point out what the logical error is.

rookie 2010-07-14 18:26:52

This is what I get when I observe the request using firebug ---> jsonp1279132111667({ "data": { "request": [ {"query": "undefined", "type": "Unknown" } ] }})

rookie 2010-07-14 18:31:04

Answer 4

+4 A:

The problem you are experiencing is that you dont do anything to stop your form from being submitted, thus it submits the form before it gets a chance to get the data from the worldweatheronline.com.

Change your click handler to be like this:

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

Here is my completed sample code that works the way you want it to:

<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'&gt;&lt;/script&gt;
<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>

wowo_999 2010-07-13 20:26:12

This worked in terms of executing the second function partially. What I mean is that the second alert now pops up as well. However, the data from the web service still doesn't show up. Does this have to do with appending the information to the body tag? I can't seem to figure that out. Thank you for your help!

rookie 2010-07-14 18:21:41

When I run the script as shown above, I see a series of date paragraphs appended below the form?

wowo_999 2010-07-15 14:22:21

ansaurus

tags:

views:

answers:

need help with nested jquery function

related questions