i'm trying to make an ajax call with jquery, it seems to be working, but i cant get it to populate the result div.
Heres the JS code:
<script>
$(document).ready(function(){
$(document).on('change', '#flip-1', function(){
var datastring = $("#some-form").serialize();
$.ajax
({
type: "POST",
url: "test.php",
data: datastring,
dataType: 'html',
complete: function(data) {
$('#results').html (data);
}
});
});
});
</script>
<form id="some-form">
<label for="flip-1">Flip toggle switch:</label>
<select id="flip-1" name="flip-1" data-role="flipswitch">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
<div id="results">Loading users...</div>
and here is the PHP code:
<?php
if ($_POST['flip-1'] == 'on') {
echo 'oh is on!';
} elseif ($_POST['flip-1'] == 'off') {
echo 'no, its not on';
}
?>
this is what the chrome "inspect element" debugger say about headers:
Request URL:http://localhost/smart_home/test.php
Request Method:POST
Status Code:200 OK
Request Headers
POST /smart_home/test.php HTTP/1.1
Host: localhost
Connection: keep-alive
Content-Length: 9
Accept: text/html, */*; q=0.01
Origin: http://localhost
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://localhost/smart_home/index.php
Accept-Encoding: gzip,deflate,sdch
Accept-Language: sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4
Form Data
flip-1=on
Response Headers
HTTP/1.1 200 OK
Date: Thu, 27 Feb 2014 20:58:08 GMT
Server: Apache/2.4.7 (Win32) OpenSSL/1.0.1e PHP/5.5.6
X-Powered-By: PHP/5.5.6
Content-Length: 20
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: text/html
And this is what the response tab says: when the button changes to the on position:
oh is on!
when changed to "off"
no, its not on
does anyone have any ideas?
thanks!
The
complete
callback doesn't receive the response data directly (The first parameter is ajqXHR
object). It's generally simpler to use thesuccess
or.done()
callbacks instead:Or
See http://api.jquery.com/jQuery.ajax/