Alright. I'm working in Ruby on Rails and what I have is a table the is being pulled from a database like so.
<% @businesses.each do |business|if !business.approved %>
<tr>
<td><div class="button<%=h business.name %>"><a href="#"><%=h business.name %></a></div></td>
<td><%=h business.address %></td>
<td><%=h business.business_category.name %></td>
<td><%=h business.description %></td>
<td><%= link_to(image_tag('/images/accept.png', :alt => 'Approve'), :id => business.id, :action => 'approve') %>
<%= link_to(image_tag('/images/eye.png', :alt => 'Show'), business )%>
<%= link_to(image_tag('/images/pencil.png', :alt => 'Edit'), edit_business_path(business)) %>
<%= link_to(image_tag('/images/bin.png', :alt => 'Remove'), business, :confirm => 'Are you sure?', :method => :delete) %></td>
</tr>
<% end %>
<% end %>
</table>
And I want the user to be able to click on the name of the business and have a pop up come up that displays the rest of the business's info. So I have:
<% @businesses.each do |business|
if !business.approved %>
<div class="popupContact<%=h business.name %>">
<a id="popupContactClose">x</a>
<h1><%=h business.name %></h1>
<p id="contactArea">
<%=h business.address %><br/>
<%=h business.description %><br/>
<%=h business.business_category.name %><br/>
<%=h business.contact_name %><br/>
<%=h business.city %><br/>
<%=h business.state %><br/>
<%=h business.zip %><br/>
<%=h business.phone %><br/>
<%=h business.fax %><br/>
<%=h business.e_mail %><br/>
<%=h business.website %><br/>
<%=h business.business_category.name %><br/>
Click the X or Click Out from the popup to close the popup!<br/>
</p>
</div>
<% end %>
<% end %>
<div id="backgroundPopup"></div>
This pop up contains the rest of the information on the business. I'm using this javascript code have the background be grey'd out and a pop up in the center of my page with the information.
//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
});
}
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$('div[class^=button]').click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
});
Now for the most part it works. The pop up comes up just fine for the first business and the pop up comes up for the rest of the business links, but it is displaying the business information of the first business for every link. I'm sure I just need to throw in a this. or a (this). something in there, but I don't know where. Any help would be great.