Search jQuery

jQuery Forum

Radio buttion - display data on click

in Using jQuery • 11 years ago

I am trying to use radio buttons to display data received from PHP via a MySQL database.

The following code works in that it will indeed display the data upon clicking a choice.

Subsequent clicks on the other two choices in the same session, however, do not result in a display of anything but from the original click.

The new data is recovered (as verified by firebug) on subsequent clicks but is not displayed.

I've tried variations of .hide(), .show() and .toggle() but I'm obviously on the wrong track.

Any help would be greatly apperciated.

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>

Replies(7)

cfreed

Re: Radio buttion - display data on click

11 years ago

In the current state of your code (taking in account that you commented some lines), and since you said new data is recovered, you should get previous AND actual data displayed.
May I have a link to directly look at it?

Anyway, nor hide() nor remove() are relevant for #content initialization: you should use empty().

pizzipie

Re: Radio buttion - display data on click

11 years ago

Hi cfreed,

Thanks for your reply.

I'm not sure what you mean by a link but I'm attaching three screen shots of the results of three 'picks' in one session. As you can see at the bottom of the files there are firebug results, GET's showing parameters passed and data received. Only the first Rick 'pick' displays properly.

Attachments

polly.png
Size : 106.73 KB Downloads : 1934 Download
rick-polly.png
Size : 108.4 KB Downloads : 1926 Download
rick.png
Size : 110.16 KB Downloads : 1936 Download

pizzipie

Re: Radio buttion - display data on click

11 years ago

UPDATE

Hi cfreed,

I got looking at your comment about empty(). I tried that and it works now. I also took out some of my debug comments. I note that I don't need the '$(document).ready(function() { ... to make this work. If it's not too much trouble could you comment on this. Any critique of the attached code would also be welcomed. I am very new to Javscript and Jquery.

Thanks again,

Rick P

Sorry File wouldn't upload

<!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" >

    function trip() {
    $("#content").empty();
    var patient =$('input[name=pick]:checked').val()

    $("#content").append('<p id="patient" > Patient '+ "<span id='patientname'>" + patient + '</span></p>');

    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

</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>

cfreed

Re: Radio buttion - display data on click

11 years ago

What I meant by "a link" was an url where to go, in order to inspect your page in my browser. Anyway, not needed any longer now.

Sure that '$(document).ready(function() {... was not useful in your first version, since it contained nothing :-)

At this point, it is worth mention that:
- you are currently using onclick="trip()" to bind handler to each of your <input>'s
- a more actual manner is to bind them through JS, using:

$(document).ready(function() {
$('input[name=pick]').click(trip());
});

No more critique to your code: looks pretty...

pizzipie

Re: Radio buttion - display data on click

11 years ago

I incorporated your last improvement but now on loading it displays Patient Undefined until I pick a button and then I have to press the reload button on the browser(firefox).

The way I had it the display started with a blank screen except for the unpicked radio buttons. As soon as you picked a choice the information was displayed.

Did I do something wrong. See attached code.

Attachments

index.txt
Size : 2.08 KB Downloads : 1943 Download

cfreed

Re: Radio buttion - display data on click

11 years ago

It's mine, sorry.

When I proposed you to bind handler through click() method, I erroneously keeped parenthesis attached to the involved function name: the right code is simply $('input[name=pick]'.click(trip); (only the function name is required)

BTW, you din't exactly reported what I proposed: you included the trip() function inside of the $(document).ready(...
It works too, but is not needed, and even incongruous, since enclosing something in $(document).ready(... means "wait for complete document load, then immediately execute enclosed code": you see that, for a function, it is senseless.

pizzipie

Re: Radio buttion - display data on click

11 years ago

I think this is what you mean . I put trip() in a separate <script>
and used the "$('input[name=pick]'.click(trip);" in the document.ready function. Everything now seems to work fine.

Once again thanks for your help.

Attachments

index.txt
Size : 1.91 KB Downloads : 1953 Download

Top Reply

Response title

Attachments

jQuery Forum

Radio buttion - display data on click

Replies(7)

Re: Radio buttion - display data on click

Re: Radio buttion - display data on click

Attachments

Re: Radio buttion - display data on click

Re: Radio buttion - display data on click

Re: Radio buttion - display data on click

Attachments

Re: Radio buttion - display data on click

Re: Radio buttion - display data on click

Attachments

Statistics

Tags

Actions

Related Posts