How to build ajax function?

[BaseballGraphs]

Hello,

I am trying to update data on my webpage using AJAX. The idea is when a user clicks a checkbox the data will be updated.

This is the code that I have so far:

<script type="text/javascript">
var refreshData = function() {
asdf
};
$('input[type=checkbox]').live( 'click', refreshData );
</script>
  <input type="checkbox" id="checkbox_<?= $statistic_id; ?>" <?= $i==0 ? 'checked="checked"' : null; ?> onclick="refreshData()" />

I am having trouble building the refreshData function because I am very unfamiliar with AJAX. The AJAX function would primarily consist of building the ajax query and then executing the ajax query and then taking the returned data and displaying it

For your reference, I am pulling data from this source: http://tyrone.pae.me/pulldata.php?p= 1&s=40 where p is a player id number and s is a statistic associated with the player. You'll notice that I reference a statistic_id in the id of the checkbox. Not sure if that is helpful or not.

If you have any ideas on how this can be achieved or need more information, please reply to this thread. Thanks!

[gits]

so basically your question is: how to use the jQuery ajax methods in your case?

[BaseballGraphs]

Yes, I'm just unsure as to which ones are most pertinent in my situation. Could you advise further on which methods you would recommend for my situation?

[gits]

??? ... what is your situation? basically to retrieve the data seems quite simple with jQuery ... and then you would just need to have your response-handling-callback to update the corresponding nodes.

if you use such a json structure as you did in your example-link then you would need to eval it and just process the JavaScript structure. you could even prepare that more by creating html-fragments serverside that would replace some current nodes in your document ... which could avoid expensive DOM manipulation with JavaScript etc. ...

@the moment i think that i just don't get the real point of your question?

[BaseballGraphs]

Okay, to update you on where I am currently, I have written the following code:

<script>
         var drawLineOnGraph = function ( array ) {

            line = new RGraph.Line('myLine', array );
            line.Draw();

}

   function refreshData() {
   var url = "/pulldata.php?p=" + pid + "&s=" + statistic_id + "";
   $.getJSON( url,
   function(data){
     for ( pid in data ) {
       for ( statistic_id in data[ pid ] ) {
         console.log( data[ pid ][ statistic_id ] );
         drawLineOnGraph( data[pid][statistic_id] );
      }
    }
   } );
</script>

This is the part of my code where I am trying to pull data using AJAX and then I write the values on a graph that I am building. A secondary component of the process is that the redrawing of the line is initiated by selecting a check box. Here is the code I have for the checkbox:

<script type="text/javascript">
$('input[type=checkbox]').live( 'click', refreshData );
</script>
<div id="playerstats">
<table width="265px" border="0" >
<? $i = 0; foreach ($combine as $statistic_id => $stat_values): ?>
<tr>
<td NOWRAP style="vertical-align:middle; font-size : 11px;">
  <input type="checkbox"  id="checkbox_<?= $statistic_id; ?>" <?= $i==0 ? 'checked="checked"' : null; ?> />
  <label for="checkbox_<?= $statistic_id; ?>"><?= getStatisticFromId ( $statistic_id ); ?></label>
</td>
</tr>
<? $i++; endforeach; ?>
</table>
</div>

The idea is to redraw the line on my graph (I am using RGraphs) when a checkbox is selected. I hope that clarifies a little better.