PHP AJAX HTML: changing unique table data in foreach loop

I’m new to PHP and Ajax. I am trying to create a table of object data where I can select the displayed data based on a <select><option>... form.

I have a PHTML template which looks like the following:

<?php
$content = "";
// creates data selector
$content .= "
            <form id = select_data>
                <select id = data_selection>
                    <option value = data1>Data 1</option>
                    <option value = data2>Data 2</option>
                    <option value = data3>Data 3</option>
                    <option value = data4>Data 4</option>
                </select>
            <input id = selected_data type=submit />
            </form>";
// creates table header
$content .= "
            <tr>
                <th>Data</th>
            </tr>";

$array_ids = array(1, 2, 3); // etc, array of object id's
foreach ($array_ids as $array_id) {
    $object = // instantiate object by array_id, pseudocode
    $object_data = $object->getData('default-data'); // get default data to display
    // create table item for each object
    $content .= "
                <tr>
                    <td><p>$object_data</p></td>
                </tr>";
}
print $content;
?>

This prints out the table content, loads objects by their id, then gets and displays default data within the  tag. And then I have some Javascript which looks like the following:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
    $('#select_data').on('submit', function(e){ // get selected data type
        e.preventDefault();
        var data_selected = $("#data_selection :selected").val(); // create var to pass to ajax
        $.ajax({
            type: "POST",
            url: 'post.php',
            data: {data_selected: data_selected},
            success: function(data){
                $("p").html(data); // replace all <p> tag content with data
            }
        });
    });
});
</script>

This Javascript gets the selected data type, creates a variable out of it to pass on to the ajax which then calls post.php, which looks like the following:

<?php
$attribute = false;
if (isset($_POST['data_selected'])){
    $data = $_POST['data_selected']; // assigns variable out of ajax data
    $object = //instantiate object, again pseudocode
    $object_data = $object->getData($data); // get new data to replace into the ```<p>``` tag
    echo $object_data;
}
?>

The problem is that the Javascript that I have changes every single  tag to the last data iterated by the foreach loop because each  tag is not uniquely identified and the Ajax does not update the data based on a unique identifier, such as maybe the $array_id. Which brings me to my attempted solution.

I tried to identify each  tag with the following:

<td><p id = $array_id>$object_data</p></td>

And then creating a new Javascript variable out of the array ID:

var p_tag_id = <?php echo $array_id; ?>;

And finally making the Ajax success function target element ID’s based on var p_tag_id:

$("#" + p_tag_id).html(data);

While this does not change all the  tags like previously, it only changes the final  tag and leaves all instances before it unchanged because the Javascript is not iterating over each  tag, or because the foreach loop does not call the Javascript as a function for each $array_id.

How can I rewrite this code so that the Ajax updates the data of each table item uniquely instead of updating them all with the same data? Is there a better way to approach this problem?

Answer

I figured out a solution. I assigned the $array_id to each  tag after all in order to identify them uniquely:

<td><p id = $array_id>$object_data</p></td>

Then I looped over all the  tags and assigned the $array_id of this  tag to a variable like so:

$("p").each(function() {
    var array_id = $(this).attr("id");

And finally I made the Ajax success target elements based on their ID:

$("#" + array_id ).html(data);

Here is the full Javascript code for anybody who is interested. Hopefully this helps someone else out!

<script>
$(document).ready(function(){
    $('#select_data').on('submit', function(e){
        e.preventDefault();
        var data_selected = $("#data_selection :selected").val();
        $("p").each(function() {
            var array_id = $(this).attr("id");
            $.ajax({
                type: "POST",
                url: 'post.php',
                data: {data_selected: data_selected, array_id: array_id},
                success: function(data){
                    $("#" + array_id).html(data);
                }
            });
        });
    });
});
</script>

Advertisement

Answer