Develop Reference

get value from $(document).ready

I am pulling temperature reading from my temp.php and displaying it on my index.php with the code below.
My problem is I cannot use the information for anything else
I would appreciate any suggestions.
<div id = "temperature"></div> // displays as expected
$(document).ready(function(){
setInterval(function(){
$("#temperature").load('temp.php')
}, 1000);
});
temp1 = document.getElementById('temperature').value; // this doesn't work
if (temp1 == 72) {do something}; //cannot get the value of "temperature"

You should get the response in the callback like the following
<script>
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
}
});
</script>

How to properly try and Catch in jQuery

I have the following function, that get a response from a web service. The response should be displayed on one section of the website.
That's working fine, but the thing is, in case of error, I've trying to get the error message and display it in the same way as the succesful response does, but I can't get that.
$(document).ready(function(){
$('.button').click(function(){
try {
var $resp = $.get("service url here", function(resp){
$('.response').append(resp.response.greeting + ", " + resp.response.Welcome);
});
}
catch (err){
$('.response').append(err.name + ", "+ err.message);
}
});
});

Try using .always()
$(document).ready(function(){
$(".button").click(function() {
$.get("service url here")
.always(function(resp, textStatus, jqxhr) {
$(".response")
.append(textStatus === "success"
? resp.response.greeting + ", " + resp.response.Welcome
: textStatus + ", "+ jqxhr
);
});
});

Ajax unable to parse JSON data

I know there are many questions out there on the same topic and I've read all of them but they don't help my case.
I am trying to parse some JSON data returned from my serverside PHP script. I've used JSONLint to verify that the PHP output is a valid JSON string.
I have the following ajax code:
$(document).ready(function(){
$('#update-stats-submit').on("click", function(){
if (requestRunning) { // don't do anything if an AJAX request is pending
return;
}
$.ajax({
type: "GET",
url: "calculate.php",
data: "q="+$("#table-info").val(),
dataType: "json",
success: function(data){
$("#update-result").animate({ opacity: 100 });
$("#update-result").html(data.output_msg);
$("#update-result").delay(3000).animate({ opacity: 0 });
setTimeout(function() {
$("#update-result").empty();
}, 4000);
alert(data.avg + "\n" + data.var + "\n" + data.count + "\n" + data.est + "\n" + data.min + "\n" + data.max);
},
error: function(xhr, ajaxOptions, thrownError){
$("#update-result").html(xhr.responseText + "\n" + xhr.status + "\n" + thrownError);
}
})
return false;
});
});
I've not gotten this piece of code to execute successfully. Each time the following error is returned.
200 SyntaxError: Unexpected end of input
Sample JSON output returned from calculate.php:
{
"output_msg":"Success!",
"avg":5.79916666667,
"var":4.63505345486,
"n":40,
"est":"1",
"min":"3",
"max":"4"
}
Any tips would be greatly appreciated.

Basically there's nothing wrong with the above ajax script. It appears the bug lied with the serverside PHP code that allowed the script to exit() under certain GET request conditions.

Creating error handling in jQuery

I am trying to create an error message from jquery for my document.
I have populated a <select> menu with JSON data, they link to external HTML files to display weather for their Location, what I need is for an error message to appear if there is no HTML file for the option.
For example the locations are London, New York, Paris and Rome, all except Rome have an HTML file that has weather data in it and displays fine but when Rome is selected...Nothing happens! and when Rome is selected after another location has been selected it stays on the current data!
I am using jQuery to pull the data etc. its my gut feeling that it needs an if() statement but I'm not sure of the conditions of the statement!
My jQuery code is here...
$(document).ready(function () {
// The below function pulls in the data from the external JSON file
$.getJSON('json/destinations.json', function (data) {
// attaches it to a variable
var destinations = data.Destinations;
$(destinations).each(function (id, destination) {
$('#destinations').append('<option value="' + destination.destinationID + '">' + destination.destinationName + '</option>');
});
$("#destinations").change(function () {
$('#weatherForecasts').load('raw_html/' + $(this).val() + '_weather.html .ngtable', function () {
$('#weatherForecasts').show("slow");
});
});
});
// Hide statements for our extra fields and also the weather forecast DIV
$('#weatherForecasts').hide();
$('#extraFields').hide();
$('.errorMessage').hide();
// Function that allows us to see the extraFields when a radio button is checked!
$("input[name='survey1']").change(function () {
$("#extraFields").show("slow");
});
$("input[name='survey1']:checked").change(); //trigger correct state onload
});

http://api.jquery.com/load/
at the bottom of the page there is an example for handling errors:
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
}
});
So in your case
$("#destinations").change(function () {
$('#weatherForecasts').load('raw_html/' + $(this).val() + '_weather.html .ngtable', function (response, status, xhr) {
if (status == 'error'){
// do error things
}else{
$('#weatherForecasts').show("slow");
}
});
});

Load special page if page doesn't exist (404)

I have a small function (below) that takes a parameter to determine what to load. Is there a way I can make it so that the .load() kind of has an "else" or a fallback if it ecounters a 404?
function start(page,last){
$("#area").load("pages/"+page+".inc.php");
loading();
}
Thanks in advance :)

You can specify a function to be executed when the load completes.
Taken from the documentation:
$("#success").load("/not-here.php", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
Using your code it would look similar to this:
function start(page,last){
$("#area").load("pages/"+page+".inc.php", function(response, status, xhr) {
if (status == "error") {
// don't load as an error occured,...do something else...
}
else{
loading();
};
});
}
You can check the linked documentation for more details on possible return values and errors. In fact the demo on the bottom of the documentation shows dealing with a 404.
xhr.status in the sample contains the error number 404 and the xhr.statusText is Not Found.
This would mean you can check for the specific number:
function start(page,last){
$("#area").load("pages/"+page+".inc.php", function(response, status, xhr) {
if (status == "error" && xhr.status == ""404) {
// a 404 occurred...
}
else{
loading();
};
});
}
See DEMO

.load() has responseText and textStatus parameters that tell you when it succeeds so you can use that to check if it fails. A successful response will generate "success" or "notmodified" while an error generates "error".
$("#success").load("/not-here.php", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});

in the ajaxSetup you can define the status code like
$.ajaxSetup({
statusCode: {
404: function() {
alert("page not found");
//load the 404 page here
}
}
});