Jquery - Display data using radio buttons

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
pizzipie
Forum Commoner
Posts: 87
Joined: Wed Feb 10, 2010 10:59 pm
Location: Hayden. ID

Jquery - Display data using radio buttons

Post by pizzipie »

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>
dgreenhouse
Forum Newbie
Posts: 20
Joined: Tue Mar 10, 2009 5:13 am

Re: Jquery - Display data using radio buttons

Post by dgreenhouse »

This should work:

testpatient.html

Code: Select all

<!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="../includes/jquery/jquery-1.5.1.js"></script>
<script type="text/javascript" >
  $(document).ready(function(){
    $('input[name="pick"]').bind('click', function(event) {
      var patient = event.currentTarget.value; // Get patient name from event object

      $('#content').html('');
      $("#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 ...bind('onclick', 
  }); // end $(document.ready

</script>
</head>
<body>
  <div id="pickname">
    <form action="" name="form0" id="form0">
      <p>Rick: <input id="one" type="radio" name="pick" value="Rick"></input></p>
      <p>Polly: <input type="radio" name="pick" value="Polly"></input></p>
      <p>Rick & Polly: <input type="radio" name="pick" value="Rick & Polly"></input></p>
    </form>
  </div>
  <div id="content">
  </div>
</body>
</html>
JSON-test.php

Code: Select all

<?php

$patient = $_GET['patient'];

// Simulate DB lookup
$drugs['drugs'][0] = 
  array(
    'Id'=>2,
    'DoctorId'=>$patient."'s doctor",
    'PharmacyId'=>'Riteway',
    'Name'=>"Aspirin",
    'RX'=>'xyz',
    'Orderdate'=>'20110327'
  );

if (strtolower($patient)=='rick') {
  $drugs['drugs'][1] = 
    array(
      'Id'=>2,
      'DoctorId'=>$patient."'s doctor",
      'PharmacyId'=>'Riteway',
      'Name'=>"Cough Medicine",
      'RX'=>'xyz',
      'Orderdate'=>'20110327'
    );
}
 
echo json_encode($drugs);

?>
Post Reply