I have a list of records being displayed as partials down one side of the screen which can be filtered. And on the other side I have a hand drawn map which is a div with a background image. How can I have an icon for each record on the map which is only displayed when the records partial is shown?
Index page looks like this:
<div class="map_container">
</div>
<开发者_Python百科div class="filter_options_container">
filter form stuff is here
</div>
<div class="venue_partials_container">
<%= render :partial => 'venue', :collection => @venues %>
<div class="clearall"></div>
<%= will_paginate @venues %>
<div class="venue_partial_button">
<%= link_to 'add a new venue', new_venue_path %>
</div>
</div>
<div class="clearall"></div>
Thanks for any help.
You need to add some method to venue object or change render method, in some way... well, just output some javascript data with each venue like next:
<script type="text/javascript"><!--
data.push({
x: <%= this.x %>,
y: <%= this.y %>,
someOtherStuff: <%= this.stuff %>
});
--></script>
and after that add a function, which will iterate through that data array:
function insertIconOnMap(mapItem){
var img = $("<img>", {
'class': "mapIcon",
'src': mapItem.someOtherStuff
}).css({
'left': mapItem.x,
'top': mapItem.y
});
$("#map").append(img);
}
data.each(insertIconOnMap);
and some css like
#map { position: relative; }
#map .mapIcon { position: absolute; }
If you want it in more elegant way... I forget everything I knew about Ruby :-D And it was you, who put javascript
tag for your question ;-)
精彩评论