Exchanging Data between jQuery and PHP in a Loop?

[phaedrusGhost]

Hi All,

I am using a loop to display professionals and their data on a webpage. I have a "Recommend" button that is included in this loop and when clicked, displays a jquery POPUP form that will email the chosen professionals data.

My trouble is, when I click the "Recommend" button it's not pulling the proper professionals information.

It pulls from the very last professional in my loop.

Here is what is included in my loop:

$display .= "
          
          <div class=\"agentLocated\">
            <div class=\"agentLocatedTop\">
              <div class=\"agentLocatedName\"><a href=\"profileView.php?profileView=" . $agentId . "\">".  $agentName . "</a></div>
              <div class=\"agentLocatedProStatus\">,&nbsp;Agent</div>
              <div class=\"agentLocatedLevel\"><img width=\"15\" height=\"15\" src=\"images/icons/medal_gold_2.png\" /></div>
              <div class=\"agentLocatedProfile\"><a href=\"profileView.php?profileView=" . $agentId . "\">Profile</a></div>
              <br/>
              <br/>
              <div class=\"agentLocatedImageWrapper\">
                <div class=\"agentLocatedImage\"><a href=\"profileView.php?profileView=" . $agentId . "\"><img class=\"\" width=\"54\" height=\"64\" style=\"border: none;\" src=\"" . $agentPhoto . "\"></a></div>
              </div>
              <div class=\"agentLocatedTagline\">". $agentHeadline . "</div>
              <br/>
              <div class=\"agentLocatedInfo\">" . $agentCompany . " | | " . $agentLocation . "</div>
              <br/>
              <br/>
              <div class=\"agentlocatedStats\">" . $count . " Blog posts</div>
              <div class=\"agentlocatedStats\">" . $countComments . " Comments</div>
              <div class=\"agentLocatorRec\">
                <div class=\"agentLocatedRecs\">
                  <div class=\"agentLocatorRecsCount\">0</div>
                  <div class=\"agentLocatorRecsText\">RECS</div>
                </div>
                <div class=\"agentLocatedRevs\">
                  <div class=\"agentLocatorRevsCount\">1</div>
                  <div class=\"agentLocatorRevsText\">REVIEWS</div>
                </div>
                <!--BEGIN RECOMMEND BUTTON HERE --> 
                <div class=\"agentLocatorRecommend\"><a class=\"recommendAgent\"  href=\"#\"></a>
                </div>
                <!-- END RECOMMEND BUTTON HERE --> 
              </div>
            </div>
          </div>
          <!--BEGIN RECOMMEND POPUP HERE -->
          <div class=\"popupContact\">
          	<a class=\"popupContactClose\">x</a>
          	<h2>Recommend " . $agentName .   " to a friend!</h2>
          	<p class=\"contactArea\">
          		Form Field Goes Here!
          		<br/><br/>
          		Form Field Goes Here!
          		<br/><br/>
          		Send Button Will Go Here!
          		<br/><br/>
          	</p>
          </div>
          <div class=\"backgroundPopup\"></div>
          <!--END RECOMMEND POPUP HERE --> \n";

Really appreciate any help on this one...also please let me know if I need to post further information.

[phaedrusGhost]

Ammendment:

here is the JS to this:

/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: [e-mail]
//@license: Feel free to use it, but keep this credits please!					
/***************************/

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$(".backgroundPopup").css({
			"opacity": "0.7"
		});
		$(".backgroundPopup").fadeIn("slow");
		$(".popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$(".backgroundPopup").fadeOut("slow");
		$(".popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $(".popupContact").height();
	var popupWidth = $(".popupContact").width();
	//centering
	$(".popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6
	
	$(".backgroundPopup").css({
		"height": windowHeight
	});
	
}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
	
	//LOADING POPUP
	//Click the button event!
	$(".recommendAgent").click(function(){
	    agentname = $(this).attr('data'); 
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});
				
	//CLOSING POPUP
	//Click the x event!
	$(".popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$(".backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

[ddymacek]

I don't have any code written for you but when you 'recommend agent' you should call some sort of js function that you can pass their id or name into so you can load the 'right' person. you could send a post or get variable to your pop up and it can look up the correct agent off of id or name passed in.