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

Question

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 class="event-panel">';
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 class="event-panel">';
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;
}

Do you get an error in your DEV tools? Could you console.log passedArray and show us what it displayed and to be sure "typeof passedArray" as well. Can you try to use `JSON.parse()` — Uwe, Dec 25 '22 at 21:45
2pha: Yes I was hoping to transport with that custom tag the data for the array element call, maybe you have a better solution? — Balael, Dec 25 '22 at 23:00
Uwe, I receive a "Uncaught SyntaxError: expected expression, got '<'" error which relates to the line with json_encode where the array is passed (same with your line). PHP also sends this: Warning: Array to string conversion where the line of the json_encode is. This seems a problem and maybe then $eventDetail is not defined in the JS section? — Balael, Dec 25 '22 at 23:11
Is `$(document).ready(function (){...` inside of a `.js` file? A `.php` file? A `.html` file? — mickmackusa, Dec 25 '22 at 23:36
Mickmackusa: The script is inside a php file, with tags . I put it at the end of the file to allow first population of the $eventDetail to avoid empty arrays. — Balael, Dec 25 '22 at 23:40
@Balael I never used heredoc and just went through the documentation. I think in your <<< EOT Block you don't need (maybe should not) to use ` — Uwe, Dec 26 '22 at 00:08
That `echo` inside of that `echo` is a fail -- that is not how you concatenate a string in php. — mickmackusa, Dec 26 '22 at 05:12
Thank you for the hint, but how would I do this correctly? As shown above in the edited question I set now the script part outside the php-tags but this is ugly code. So how would I do this within an php-file? — Balael, Dec 26 '22 at 17:48
@Balael to you last question: My comment gave you the answer. If you want to use your Syntax, use the line i pasted instead your original one: `var passedArray = {json_encode($eventInfo)};` — Uwe, Dec 26 '22 at 17:53
For your question on how to access it. Remove one `[ ]` from your an and search with p for the right object. Have a look https://codepen.io/tarun-uwe/pen/VwBvNoj — Uwe, Dec 26 '22 at 18:11
Hello Uwe, thank you very much for your support! When I work with var passedArray = ''; to bring the PHP-array inside the JS function I get a syntax with 2x[[ (as you wrote) - how would I remove one set of '[]' as with this syntax I receive the error 'Uncaught TypeError: passedArray.find is not a function' which does not occur in your code due to the array syntax. SOrry to bother but I think we are pretty close :) — Balael, Dec 26 '22 at 19:35
I assume that `$test_array` is an array. So just leave the array() away. So it would be `json_encode($test_array);` — Uwe, Dec 26 '22 at 19:43
Uhm, that is understandable. shame on me. Is there a type difference between the passed "passedArray" and the "passedVars" created inside the JS from your code, as from the syntax they look equal. Though changing your line to "var result = passedArray.find((obj) => {.... " throws a still the error "Uncaught TypeError: passedArray.find is not a function". — Balael, Dec 26 '22 at 20:00
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/250664/discussion-between-uwe-and-balael). — Uwe, Dec 26 '22 at 20:40

score 0 · Accepted Answer · answered Dec 27 '22 at 13:16

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');

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

1 Answers1