Pass jquery value to php to get Weather code from YQL

Question

i have a jquery function that gets a code WOEID from request string and returns the current weather for this town with YQL. The Jquery gets the code fine I also use the $.ajax POST to self page submit, in order to print the code in plain text to client.

The problem is that in client page there is nothing displayed BUT in Firebug i can see the value into console.... please help me i spend so many hours! My experience in php is beginner..

KAIROSMOU.js file

                function getParameterByName(name) {
                    var match = RegExp('[?&]' + name + '=([^&]*)')
                                    .exec(window.location.search);
                    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
                }
                // set the location's WOEID
                var woeid = getParameterByName('woeid');//9848; // where on earth IDs: http://woeid.rosselliot.co.nz/
                // use YQL to get restful JSON
                var yql = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%3D' + woeid + '&format=json&diagnostics=true&callback=?';
                $.getJSON(yql, function(cbfunc) {
                    var condition = cbfunc.query.results.channel.item.condition.text;
                    var code = cbfunc.query.results.channel.item.condition.code;
                   // the above list is not comprehensive
                condition = condition.toUpperCase();
                  //    $('body').append( condition ) ; 
                  //    $('body').append( "$" ); 
                  //    $('body').append( code ); 


                     $.ajax({
                        type: "POST",
                        url: "kairos.php",
                        dataType : 'HTML',
                        data: { WEATHER_CODE: code }
                      }).done(function( msg ) {

                     }); 

                 //dont work...either
                   // $.ajax({
                          // url: "kairos.php",
                          // dataType: 'json',
                          // type: 'GET',
                          // data: {
                          //  WEATHER_CODE: code }
                          // }); 
                });

KAIROS.PHP I CALL THIS PAGE LIKE THIS. mywebsite/kairos.php?woeid=9848

            <html>
            <head> 
            <script type='text/javascript'  src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script type='text/javascript'  src="/KAIROSMOU.js"> </script>

            </head>
            <body >
            <form >
              <?php
               $var_value = $_POST['WEATHER_CODE'];


               printf("#");            // THIS WORKS APPEARS IN CLIENT
               printf( $var_value );   //DONT WORK

             ?>
            </form> </body>
            </html>

THIS IS WHAT IS SEE IN FIREBUG CONSOLE You can see the #30 this is what i whant for client page to be shown but in vain...

            <html>
            <head> 
            <script type='text/javascript'  src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script type='text/javascript'  src="/KAIROSMOU.js"> </script>

            </head>
            <body >
            <form >
              #30</form> </body>
            </html>

AND THIS IS MY CLIENTS PAGE

                <html>
                <head> 
                <script type='text/javascript'  src="http://code.jquery.com/jquery-1.9.1.js"></script>
                <script type='text/javascript'  src="/KAIROSMOU.js"> </script>

                </head>
                <body >
                <form >
                  #</form> </body>
                </html>

score 0 · Accepted Answer · edited May 23 '17 at 12:11

As far as I can see, you're not updating your HTML content anywhere in your JavaScript. You're fetching some HTML content with $.ajax(...), that's what you see in the Firebug console, but you're not doing anything with the content you get from your ajax call.

You might want to have a look there: Replace HTML page with contents retrieved via AJAX.

But I'd rather not fetch the whole HTML content with ajax. You could just return the number you want in kairos.php:

echo "#".$var_value;

and then do something like this in the $.ajax.done function:

$("body form").html(msg);

EDIT: Sorry, I didn't quite catch your drift. It seems you're mixing up a few things, so let's have a look at what happens here step by step:

You type in mywebsite/kairos.php?woeid=9848 in your browser.
The server parses your script and echoes it back to the browser - and, of course, initially with only "#" in the form tag since $_POST['WEATHER_CODE'] evaluates to an empty string since you didn't make a POST, but a GET request by calling the given URL.
The client fetches /KAIROSMOU.js from the server and starts executing it.
The Javascript fetches some data by calling $.getJSON.
The Javascript determines the value for "code".
The Javascript sends an $.ajax POST request to the server, again to kairos.php.
kairos.php gets parsed again, this time with data in WEATHER_CODE, so it echoes the "#30".
This reply, with the "#30", is what you see in the Firebug console, but this is only the result of the ajax call. There's nothing in /KAIROSMOU.js that reacts to this reply, you get the reply in the parameter "msg" of the "done" function, but there's nothing happening, so the Javascript ends and that's it.

So, I suggest the following. You could split up the PHP script, so that you have kairos.php (or simply kairos.html):

<html>
 <head> 
  <script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type='text/javascript' src="/KAIROSMOU.js"></script>
 </head>
 <body>
  <form id="my_result_form">
   #
  </form>
 </body>
</html>

and a second php script fetch_values.php:

<?php
 $var_value = $_POST['WEATHER_CODE'];
 echo "#";
 echo $var_value; // might want to sanitize this, since the POSTed data may contain all kinds of evil stuff
?>

and in KAIROSMOU.js:

$.ajax({
 type: "POST",
 url: "fetch_values.php",
 dataType : 'HTML',
 data: { WEATHER_CODE: code }
}).done(function(weather_value) {
 $("form#my_result_form").html(weather_value);
});

BUT if you only use it in this way, there's no sense in the ajax call at all, since you're just echoing what you already have in your Javascript (see step 5) - you could use your variable "code" directly.

Thanks Stef77 but , i can do that already with the comment out code // $('body').append( code ); The problem is that i need this value to be returned through the server and not by the clients script , — user2304067, Jul 15 '13 at 06:04
@user2304067 Oups, you're right, I didn't understand your question correctly the first time. Please have a look at my edited answer, I hope this makes more sense now... — stef77, Jul 15 '13 at 10:20
Stef77 i found that , i was looking for a solution the hard way, i found a way to achive returning YQL data from PHP directly, — user2304067, Jul 15 '13 at 12:28
Yes of course, you can simply call the http://query.yahooapis.com URL from PHP and parse the reply in PHP. Wasn't exactly clear to me from your question that it had to be in PHP. Nevertheless, I hope I could explain to you the various steps involved and especially their order. — stef77, Jul 15 '13 at 13:05

Pass jquery value to php to get Weather code from YQL

1 Answers1