Question

I’m making a travelguide. I’m displaying data(activity) from a database(mysql). Each activity has his own button. When you push this button you add that specific activity to your travelguide. This all works, but i must refresh the page to display the activities that are added to the guide. Now i have made a working javascript script, but it’s not dynamic.

function MakeRequest()
{
    var test = 1;
    var xmlHttp = getXMLHttp();

    xmlHttp.onreadystatechange = function()
    {
        if(xmlHttp.readyState == 4)
        {
            HandleResponse(xmlHttp.responseText);
        }
    }
    xmlHttp.open("GET", "get_test.php?q="+test, true); 

    xmlHttp.send(null);
}

You see de variable: “var test = 1;”
The number 1 stands for the ActivityID 1. So now if you push the button it shows the activity with the ActivityID = 1. If i change the number to 2, is shows the activity with the ActivityID = 2.

I want to change the variable: “var test = 1;” The number must automaticly be inserted, it must be the same number as the ActivityID of the activity where is push the button.

<?php
$sql = "SELECT * FROM activity";
$stm = $db->prepare($sql);
$result = $stm->execute(array());

while($row = $stm->fetch(PDO::FETCH_ASSOC))
{
    echo '<div id="activity'.$row['ActivityID'].'">';
    echo '<img src="data:image/jpeg;base64,' . base64_encode( $row['ActivityIMG'] ) . '" >', '<br>';
    //echo $row['Activityname'], '<br>';
    //echo $row['Activitydescription'];
    echo '<input type="button" class="addActivity" onclick="MakeRequest();" value="Activiteit toevoegen" data-activity="' . $row['ActivityID'] . '">';
    echo '</div>';
}
?>

This is the php file:”get_activity”. This is the code that displays the data en display the button. This button gets automaticly the ActivityID from the specific activity. This way i only need one script for all the activities. I want to do the same with the javascript, but i don’t know how?

Answer 1

If I understand you want to give var test the correct id depending on the button you press.
Why don’t you just pass a parameter to your js function?

  function MakeRequest(test){
       ...............
 }


   $test = $row['id'];//your id field 
   <input type="button" class="addActivity" onclick="MakeRequest(<?=$test?>);" value="Activiteit toevoegen" data-activity="' . $row['ActivityID'] . '">