Populate DIV with an PHP arrayelement based on a click on a link-CodePudding

What I want:

A list of links show events - a click on such a link shall show further details in a special DIV on the same page.

Idea: I read from the database all events:

$queryEventString = 'Match (e:Event) WHERE e.eventStatus = "not_processed" 
                RETURN e.UUID as eventUUID,
                e.eventFrom as eventFrom,
                e.eventType as eventType,
                e.eventTime as eventTime,
                e.eventSubject as eventSubject,
                e.eventBody as eventBody';
                        
$resultEvent = $client->run($queryEventString);

This gives me all available events in the DB that are not yet processed. I assgin all found events identified by their UUID into a PHP array for further processing

foreach ($resultEvent as $eventDetail)
{
  $eventInfo[$eventDetail['eventUUID']]['eventBody'] = html_entity_decode($eventDetail['eventBody']); 
  $eventInfo[$eventDetail['eventUUID']]['eventForm'] = $eventDetail['eventFrom']; 
  $eventInfo[$eventDetail['eventUUID']]['eventDate'] = date("d.m.Y H:i", 
  $eventDetail['eventTime']);
  $eventInfo[$eventDetail['eventUUID']]['eventSubject'] = $eventDetail['eventSubject']; 
}

Having that 2-dimensional array "eventInfo" I build the list

echo '<div >';
echo '<ul id="event-column" style="list-style: none;">';
foreach($eventInfo AS $eventKey => $eventDetail)
{
  echo '<a href="#"><eventlink data-id="'.$eventKey.'">'.$eventKey.'</eventlink></a><br>';
}

echo '</ul>';
echo '</div>';

Last but not least I create a DIV to store the desired eventBody-Information:

echo <<<EOT
     <div id="info-div">
     <div id="info"></div>
     </div>
EOT;

To populate now the DIV when a link is clicked I tried this:

    $(document).ready(function (){
       var passedArray = <?php echo json_encode($eventInfo); ?>;
       $('#event-column eventlink').click(function (){
          var p = $(this).attr('data-id');
          $('#info').html().passedArray[p];
       });
    });

I wanted to pass the php-Array with JSON to make it available inside the function. With the click-effect I wanted to load from this php-array the related array-element ['eventBody'] with the UUID given by the link-click.

Somehow I am stuck. I am able to pass the UUDI key to the javascript area and can write it into the DIV but I cannot identify a php-element by the given UUID and put the content into the DIV.

Any hint is appreciated, thank you.

As requested here is the code in total:

<?php   
// Including jQuery
echo '<script src="http://code.jquery.com/jquery-1.11.3.min.js">/script>';

// Querying the Neo4J DB
$queryEventString = 'Match (e:Event) WHERE e.eventStatus = "not_processed" 
                RETURN e.UUID as eventUUID,
                e.eventFrom as eventFrom,
                e.eventType as eventType,
                e.eventTime as eventTime,
                e.eventSubject as eventSubject,
                e.eventBody as eventBody';
                        
$resultEvent = $client->run($queryEventString);

// Parsing result and build the 2-dimensional array $eventInfo
foreach ($resultEvent as $eventDetail)
{
  $eventInfo[$eventDetail['eventUUID']]['eventBody'] = html_entity_decode($eventDetail['eventBody']); 
  $eventInfo[$eventDetail['eventUUID']]['eventForm'] = $eventDetail['eventFrom']; 
  $eventInfo[$eventDetail['eventUUID']]['eventDate'] = date("d.m.Y H:i", $eventDetail['eventTime']);
  $eventInfo[$eventDetail['eventUUID']]['eventSubject'] = $eventDetail['eventSubject']; 
}

// Displaying list of events with UUID as forwarded parameter (-> JS)
echo '<div >';
echo '<ul id="event-column" style="list-style: none;">';

foreach($eventInfo AS $eventKey => $eventDetail)
{
echo '<a href="#"><eventlink data-id="'.$eventKey.'">'.$eventKey.'</eventlink></a><br>';
}

echo '</ul>';
echo '</div>';

// Creating a DIV Container to hold $eventInfo[eventUUID][eventBody]
echo <<<EOT
     <div id="info-div">
       <div id="info"></div>
     </div>
EOT;

// JavaScript Part
echo <<<EOT
<script type="text/javascript">

$(document).ready(function (){
   var passedArray = <?php echo json_encode($eventInfo); ?>;
   console.log(passedArray);
   $('#event-column eventlink').click(function (){
      var p = $(this).attr('data-id');
      $('#info').html().passedArray[p];
   });
});

</script>

EOT;
?>

2nd EDIT:

I have stripped down everything to this functioncode, which is at the end of the php-file and no longer wrapped in the php-tags. So its like standard html. This way I avoid the uncaught syntax error.

<script type='text/javascript'>

$(document).ready(function (){
  var passedArray = '<?php echo json_encode(array($test_array)); ?>';
   console.log(passedArray);
   $('#event-column eventlink').click(function (){
      var p = $(this).attr('data-id');
      console.log(p);
      console.log(passedArray[p]['eventBody']);
      $('#info').text(passedArray[p]);
   });
});

</script>

Outcome: I can console.log the array, which shows as a test:

[[{"UUID":"60762d3eb9949596701a2dfb700cd2c9","eventBody":"Hallo"},{"UUID":"620c16ced5097bf60f718abca7d979f8","eventBody":"Ciao"}]]

I see also that when I click a link that the UUID key is passed to the Javascript-Script:

60762d3eb9949596701a2dfb700cd2c9

But when I want to assign the related eventBody-element I receive this error:

Uncaught TypeError: passedArray[p] is undefined

As I have the array and the key I assume it must be a syntax error in this line:

console.log(passedArray[p]['eventBody']);

So two questions left:

How would I access one element of the given array?
How can I then populate the DIV with the element ['UUID']['eventBody']? Not sure if this is the way to go: $('#info').html().passedArray[p];

Resolution (with Uwe's help):

function findme(p) {

var passedArray = '<?php echo json_encode($test_array); ?>';
passedArray = JSON.parse(passedArray);

// here we search that object in your array which has the key value pair of
// UUID : p
var result = passedArray.find((obj) => {
return obj.UUID === p;
});

document.getElementById("result").innerHTML = result.eventBody;
}

CodePudding user response：

thanks to your support here (Kudos to Uwe) here is the solution:

As we use jQuery we need to include this in the head:

echo '<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>';

The Javascript-Function (written in HTML, not in PHP tags):

function findme(p) {

var passedArray = '<?php echo json_encode($eventInfo); ?>';
passedArray = JSON.parse(passedArray);

// here we search that object in your array which has the key value pair of
// UUID : p
var result = passedArray.find((obj) => {
return obj.UUID === p;
});

document.getElementById("result").innerHTML = result.eventBody;
}

I was not able to find a way to write the whole code within PHP tags, as the double echo (Start and inside the array handover) and the additional PHP?-tags always generates syntax errors - thus the JS function is written as HTML-code outside the PHP code.

In the PHP the UUID of the array is passed onClick to the JS function - looks like

echo '<a href="#" onclick="findme(\''.$UUID.'\')"> Find the element by UUID Brackets -- '.$UUID.'</a>';

Please pay attention to the escaped quotation marks - important to avoid an error in JS that allows no identifiers starting with a number.

The DIV is marked by

echo '<p id="result"></p>';

For testing I made an array like this:

$eventInfo= array();

$eventInfo[] = array('UUID' => '60762d3', 'eventBody' => 'Text 1');
$eventInfo[] = array('UUID' => '620c16c', 'eventBody' => 'Text 2');
$eventInfo[] = array('UUID' => '6076299', 'eventBody' => 'Text 3');
$eventInfo[] = array('UUID' => '620c16c', 'eventBody' => 'Text 4');