Ok, so I've built a member search using ajax to change the results each time a filter is changed. It works great, except one minor issue that I'm struggling with...
Each result has a link under their image to add that person as a friend, when you click it I use colorbox to pop up a modal window with that user's information and a submit button to fire the add as friend function.
I can get the modal window to fire and be populated with the proper information for each individual result. The problem is I have to load the script in the parent file and the way this works is you specify a div id for the link class to load when you load the script. So as an example in your script you specify link class "linkclass" opens "linkclasscontent".
The way I'm setting this up in the ajax file to get this to populate the proper data is matching the linkclasscontent to the member id by doing id="linkclasscontent$id" which seems to do the trick fine, I just can't specify dynamically in the parent file that linkclass$id opens linkclasscontent$id as I don't know of any way to pass that $id variable back over to the parent.
Here's the actual code I'm using: Parent File Script:
Code:
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/colorbox/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
var $jq = jQuery.noConflict();
$jq('.cbasaddfriendlb').live('click', function(){
$jq(this).colorbox({width:"50%", inline:true, href:"#cbasaddfriendlbcontent264"});
return false;
});
</script>
AJAX File Code:
Code:
<style type="text/css">
#cbasaddfriendlbcontent<?php echo $id; ?> {
padding-bottom:5px;
margin: 40px;
background-color: rgb(255,255,255); /* Needed for IEs */
border:#6b83b6 solid 2px;
-mox-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
}
</style>
$aflb = "<div style=\"display:none\">
<div id=\"cbasaddfriendlbcontent".$id."\">
<div class=\"cbasaddfriendlbtop\">Send ".$displayname." a friend request</div>
<div class=\"cbasaddfriendlbimage\">".$photo."</div>
<div class=\"cbasaddfriendlbinfo\">
<span class=\"cbasaddfriendlbmemberdate\">MyRecovery member since: ".$membersincedate."</span><br /><img class=\"addfriendlbline\" src=\"images/addfriendlbline.png\" alt=\"line\" />
<span class=\"cbasaddfriendlbinfoleft\"><b>Country:</b> ".$country."<br /><b>City:</b> ".$city."<br /><b>State/Province:</b> ".$state." ".$province."</span>
<span class=\"cbasaddfriendlbinforight\"><b>Sober Date:</b> ".$recdate."<br /><b>Birthday:</b> ".$dob."</span>
<div style=\"clear:both;\"></div>
</div>
<div style=\"clear:both;\"></div>
<div class=\"cbasaddfriendlbmessage\">
<form action=\"index.php?option=com_comprofiler&Itemid=2&act=connections&task=addConnection&connectionid=".$id."\" method=\"post\" id=\"connOverForm\" name=\"connOverForm\">Message:<p></p><textarea cols=\"85\" rows=\" 8\" name=\"message\"></textarea><br />
<div class=\"cbasaddfriendlbbuttonsadd\"><input type=\"image\" class=\"cbasaddfriendlbsubmitbutton\" src=\"js/connections/afsend.png\" value=\"submit\" onclick=\"document.connOverForm.submit();\"></div></form><div class=\"addfriendlbbuttonscancel\"><input type=\"image\" src=\"js/connections/afcancel.png\" value=\"Close\" onclick=\"$jq.colorbox.close();\"> </div>
<div style=\"clear:both;\"></div>
</div>
</div>
</div>";
echo '<tr><td class="resultcell">';
$display_string .= "<div class='memberresults' style='$spanstyle;'><center>$photo<br /> <span class='memsearchusername'>$username</span><br /><span class='memsearchaddf'><!-- <a href='index.php?option=com_comprofiler&user=$id'>Add as Friend</a><br /> -->$afcolorbox<br />$aflb</span></center></div>";
echo '</tr></td>';
Any ideas?