Jquery - Display data using radio buttons
Posted: Fri Mar 25, 2011 3:33 pm
I'm new to javascript, jquery and AJAX. The following code will access a PHP program which in turn gets its data from MySQL.
The idea is to pick one of three choices and have the data for that choice displayed.
This code works fine on the first pick. On subsequent picks in the same session the data is being captured by the php & mysql scripts (verified by firebug) but will not be displayed.
I've tried various things like .hide(), .show() and .toggle() with no results.
Any help to solve this is greatly appreciated.
RP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#patient {
font-size: 1.5em;
font-weight: bold;
}
#patientname {
color: red;
}
</style>
<script type="text/javascript" src="/jquery/jquery-1.5.1.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
});
function trip() {
alert("in trip");
// $("#content").hide();
//$('#content').remove();
var patient =$('input[name=pick]:checked').val()
$("#content").append('<p id="patient" > Patient '+ "<span id='patientname'>" + patient + '</span></p>');
$("#content").show();
var url="JSON-test.php";
$.getJSON(url, {'patient': patient}, function(myResponse){
// loop through the posts here
$.each(myResponse.drugs,function(i,cb){
$("#content").append (
'<div class="post">'+
'<p>Drug Id:'+cb.Id+'</p>'+
'<p>Doctor Id: '+cb.DoctorId+'</p>'+
'<p>Pharmacy Id: <em>'+cb.PharmacyId+'</em></p>'+
'<p>Drug: <strong>'+cb.Name+'</strong></p>'+
'<p>Prescription No: <em>'+cb.RX+'</em></p>'+
'<p>Order Date: <em>'+cb.Orderdate+'</em></p><br><br>'+
' </div>'
);
}); // end each
}); // end myResponse
} // end trip
//}); // end doc ready
</script>
</head>
<body>
<div id="pickname">
<form action="" name="form0" id="form0">
<p>Rick: <input type="radio" name="pick" value="Rick" onclick="trip()"></input></p>
<p>Polly: <input type="radio" name="pick" value="Polly" onclick="trip()"></input></p>
<p>Rick & Polly: <input type="radio" name="pick" value="Rick & Polly" onclick="trip()"></input></p>
</form>
</div>
<div id="content">
</div>
</body>
</html>
The idea is to pick one of three choices and have the data for that choice displayed.
This code works fine on the first pick. On subsequent picks in the same session the data is being captured by the php & mysql scripts (verified by firebug) but will not be displayed.
I've tried various things like .hide(), .show() and .toggle() with no results.
Any help to solve this is greatly appreciated.
RP
Code: Select all
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#patient {
font-size: 1.5em;
font-weight: bold;
}
#patientname {
color: red;
}
</style>
<script type="text/javascript" src="/jquery/jquery-1.5.1.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
});
function trip() {
alert("in trip");
// $("#content").hide();
//$('#content').remove();
var patient =$('input[name=pick]:checked').val()
$("#content").append('<p id="patient" > Patient '+ "<span id='patientname'>" + patient + '</span></p>');
$("#content").show();
var url="JSON-test.php";
$.getJSON(url, {'patient': patient}, function(myResponse){
// loop through the posts here
$.each(myResponse.drugs,function(i,cb){
$("#content").append (
'<div class="post">'+
'<p>Drug Id:'+cb.Id+'</p>'+
'<p>Doctor Id: '+cb.DoctorId+'</p>'+
'<p>Pharmacy Id: <em>'+cb.PharmacyId+'</em></p>'+
'<p>Drug: <strong>'+cb.Name+'</strong></p>'+
'<p>Prescription No: <em>'+cb.RX+'</em></p>'+
'<p>Order Date: <em>'+cb.Orderdate+'</em></p><br><br>'+
' </div>'
);
}); // end each
}); // end myResponse
} // end trip
//}); // end doc ready
</script>
</head>
<body>
<div id="pickname">
<form action="" name="form0" id="form0">
<p>Rick: <input type="radio" name="pick" value="Rick" onclick="trip()"></input></p>
<p>Polly: <input type="radio" name="pick" value="Polly" onclick="trip()"></input></p>
<p>Rick & Polly: <input type="radio" name="pick" value="Rick & Polly" onclick="trip()"></input></p>
</form>
</div>
<div id="content">
</div>
</body>
</html>