Why it doesnt work ? JSON, AJAX, PHP
Im total beginner at PHP, jQuery and AJAX. I try to make a simple website that sets and displays temperature limit using AJAX. I want to read from JSON file and overwrite it with new data after clicking button.
Here is my index.php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="xxx">
<title>Temperature Limit</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron-narrow.css" rel="stylesheet">
<script src="assets/js/ie-emulation-modes-warning.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h4><b>Type temperature limit</b></h4>
<form class="form-horizontal">
<div class="form-group" >
<label class="control-label col-sm-4" for="minTemp">Minimal:</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="minTemp" min="10" max="25" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="maxTemp">Maximal:</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="maxTemp" min="25" max="40">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-5">
<button id="saveTermBut" type="submit" class="btn btn-sm btn-default">Save</button>
</div>
</div>
</form>
</div>
</div>
<div class="container">
<h2>Current Conditions </h2>
<div class="jumbotron">
<div class="container col-lg-6">
<div class="form-group">
<label class="control-label " for="currTemp">Minimal Temp:</label>
<output id="currTemp">
</div>
</div>
<div class="container">
<div class="form-group">
<label class="control-label " for="currTemp1">Maximal Temp:</label>
<output id="currTemp1">
</div>
</div>
</div>
</div>
<footer class="footer">
<p>© 2016 Company, Inc.</p>
</footer>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="jquery.js">
<script src="SaveTempLimit.js"></script>
</body>
</html>
Here is my SaveTempLimit.js :
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'tempLimit.json',
dataType: 'json',
success: function (tempLimit) {
$('#currTemp.form-group').append(tempLimit.minTemp);
$('#currTemp1.form-group').append(tempLimit.maxTemp);
}
});
$('#saveTermBut').on('click', function () {
var limitTemps = {
minTemp: $('#minTemp.form-control').val(),
maxTemp: $('#maxTemp.form-control').val()
};
$.ajax({
type: 'POST',
url: 'tempLimit.json',
dataType: 'json',
data: limitTemps,
success: function () {
console.log(limitTemps);
},
error: function (err) {
alert(err);
}
});
});
});
And here is my json file:
{
"minTemp": "20",
"maxTemp":"22"
}
I'm just wondering what are my mistakes. Any help appreciated.
This work:
$('#currTemp').append(tempLimit.minTemp);
$('#currTemp1').append(tempLimit.maxTemp);
The selector # is for ID, and . for class.
Don't forget put </script> after <script src="jquery.js">
If I understand correctly, you're trying to save limitTemps to your tempLimit.json. This will not work. You can't write to files directly via ajax.
You will need to create an API endpoint in your php that receives limitTemps , and then modifies your tempLimit.json from the php.
Here's some good tips on building a REST API with PHP. How to build a RESTful API?
Well, first of all, you didn't specify what exactly isn't working.
One reason it is not working because the selector #currTemp.form-group is wrong. Please refer to the jQuery's documentation regarding selectors.
#currTemp.form-group selects an element with id="currTemp , and class having form-group , which clearly doesn't exist in your HTML.
You can try removing .form-group from the selector to get it work.