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.