Multiple AJAX Requests for sets of form elements

Question

I'm a pretty novice programmer who is trying to make a heartbeat script that grabs an id from the current page and sends it to heartbeat.php where the following happens:

1) I look up in the schedule table the currentlocation field that corresponds with the id I just sent over.

2) I then encode the value I found in the currentlocation field in JSON

Here's the code for heartbeat.php:

<?php
/*** mysql hostname ***/
$hostname = 'localhost';

/*** mysql username ***/
$username = '********';

/*** mysql password ***/
$password = '*********';

$db = new PDO("mysql:host=$hostname;dbname=sv", $username, $password);
$statement = $db->prepare("SELECT currentlocation FROM schedule WHERE apptid = :apptid");
$statement->execute(array(':apptid' => $apptid));
$row = $statement->fetch();
echo json_encode($row['currentlocation']);

?>

On the html side, I am using php for a while loop pulling patient info from the database, so the ID-NUMBER-1 and ID-NUMBER-2 would be the corresponding id's in the database.

Here's the html:

<!--  FIRST SET: the id is ID-NUMBER-1  -->

<div class='jcontainer'>
      <div style='display:none; class='jcontainerid'>ID-NUMBER-1</div>
      <button class='checkIn' data-param='button_ID-NUMBER-1'>Check In</button>
      <form method='post' class='myForm' action=''>
           <select name='locationSelect' class='locationSelect' data-param='location_ID-NUMBER-1'>
                <option value='1'>Exam Room</option>
                <option value='2'>Exam Room 2</option>
                <option value='3'>X-Ray Room</option>
                <option value='1000'>Check Out</option>
           </select>
      </form>
      <div class='finished' style='color:#ff0000;'>Checked Out</div>
</div>

<!--  SECOND SET: the id is ID-NUMBER-2  -->

<div class='jcontainer'>
      <div style='display:none; class='jcontainerid'>ID-NUMBER-2</div>
      <button class='checkIn' data-param='button_ID-NUMBER-2'>Check In</button>
      <form method='post' class='myForm' action=''>
           <select name='locationSelect' class='locationSelect' data-param='location_ID-NUMBER-2'>
                <option value='1'>Exam Room</option>
                <option value='2'>Exam Room 2</option>
                <option value='3'>X-Ray Room</option>
                <option value='1000'>Check Out</option>
           </select>
      </form>
      <div class='finished' style='color:#ff0000;'>Checked Out</div>
</div>

So, the problem is, how can I do the following in JQuery:

1) For each jcontainer (or each set of form elements that I marked in my html), grab the id which is the text inside the div with the class of jcontainerid

2) then using a jquery heartbeat, for every 5 seconds the id of each jcontainer sent to the php page and the value of currentlocation sent back in JSON format.

Super thanks for any and all help. If you need any more details cleared up, please just ask and I'll be happy to help!

Answer 1

You can use .each() to iterate over each jcontainer, see more here:

http://api.jquery.com/each/

Here is an axample of what you can do:

function dataToHeartbeat(){
  $(".jcontainer").each(function(){
    // grab the id
    var apptid = $(this + " > .jcontainerid").text();
    // Submit to heartbeat.php with JSON expected in return
    $.getJSON('heartbeat.php?apptid='+apptid, function(data){
      // Do something with resulting data
    });
  });
}

You can then use setTimeout() to call the function. Depending on your needs you can add setTimeout within the function to cause a continuous loop.