Update PHP Based HTML Content

[jeffrich4]

Heres my situation, I have an array $people, and each person is an array of corresponding values such as name, title, etc. I use a foreach to display a picture for each person, now I need to make it so that when that persons picture is clicked on, their info will display in the body. Any help?

[dagon]

either link to a new page wit the user id that page displays the user info based on the id, or you need to use ajax to request the data and display it if you don't want a page reload.

[jeffrich4]

The thing is I don't need to make a request, all of the data I need is available in the $people array. I really just need to change the person that the variable points to, and then reload that block of content.

[dagon]

but php is server side, once its finished you can't interact with it.

A third option would be to write the html first time in a hidden div block and use js to unhide the div based on the picture click, i would only do this if there was not to much info to hide.

a variation on the above would be store the data in a json array and show with js as required

[jeffrich4]

Then how does a foreach loop work, in my case:

<?php

			foreach($people as $p)
			{
					echo '<img src="'.base_url().'images/photos/'.$p['photo_small'].'" title="'.$p['first_name'].' '.$p['last_name'].'" onClick="show()" />';
			}
			?>

The variable $p is clearly taking more than 1 value in $people.

[dagon]

sorry, don't know what you're asking.

[jeffrich4]

I'm just saying that $p is being assigned to each element in $people in during the foreach loop. So i'm just wondering if its not possible for me to update a different php variable and then reload the content portion of the page that is produced using php with that corresponding variable.

[bradgrafelman]

The problem, I think, is how you want to "reload the content portion of the page that is produced using php".

There is no "part" of the page that PHP outputs. You make a request for the page, PHP does some processing, outputs some data (e.g. the HTML document you're about to view in your browser), and that's it - the connection is severed and the process will start over again when you make another request.

EDIT: This is why dagon was suggesting either linking to a new page that displays the information you're after, or using Javascript (such as AJAX) to make new requests back to the server to retrieve the necessary information and display it.

[RiceBurner]

In your loop write the img, and a <div> with the other information in it.

Set the div to be hidden using CSS, then use a javascript onclick event handler to show that div when the img is clicked upon.
ie:

<?php
echo '<ul id="people">';
foreach($people as $p)
{
  echo '<li id="person_'.$p['id'].'" class="person cool">';
  echo '<img src="'.base_url().'images/photos/'.$p['photo_small'].'" title="'.$p['first_name'].' '.$p['last_name'].'" onclick="warmItem(\'people\',\'person\',\'person_'.$p['id'].'\');" />';
  echo '<div id="" class="hidden">'.$p['extra info'].'</div>';
  echo '</li>';
}
?>

CSS:

li.cool div { display:none;}
li.warm div { display:block; }

JS

function warmItem(id,force) {
  if(!document.getElementById) { return; }
  obj = document.getElementById(id);
  if(obj) {
    if(force) { 
      if(obj.className.match("cool")) { obj.className = obj.className.replace(/cool/, ""); }
      if(obj.className.match("warm")) { obj.className = obj.className.replace(/warm/,""); }
      obj.className = obj.className + " " + force;
    }
    else { 
      if(obj.className.match("cool")) { obj.className = obj.className.replace(/cool/, "warm"); }
      else if (obj.className.match("warm")) { obj.className = obj.className.replace(/warm/,"cool");  }
      else {obj.className = obj.className + " warm"; }
    }
  }
}
function warmItems(parent,cl,warm) {
  if(!document.getElementById) { return; }
  p = document.getElementById(parent);
  nodes = p.childNodes;
  for(i=0;i<nodes.length;i++){
    var node = nodes[i];
    if(node.className && node.className.match(cl)) { warmItem(node.id,'cool'); }
  }
  warmItem(warm,'warm');
}