Custom Field View and javascript #1367

Closed
anaximen opened this Issue Oct 23, 2012 · 5 comments

4 participants

@anaximen

I wote a gem to map coordinates field.
the view of this field is _form_geo.html.erb


<%= javascript_include_tag 'rails_admin_geo_field/leaflet.js' %>
<%= form.send :hidden_field, field.name, :id => field.latitude_dom_name %>
<%= form.send :hidden_field, field.longitude_field, :id => field.longitude_dom_name %>

In rails_admin.rb I wrote

field :latitude, :geo do
label 'Координаты'
longitude_field :longitude
end

If I click on Edit link, view rendering withou javascripts, if I refresh a page after it, script are render.

@anaximen

If i click on edit link the page is

<div class="controls">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css">
<input id="point_latitude" name="point[latitude]" type="hidden" value="59.94280348446257">
<input id="point_longtitude" name="point[longtitude]" type="hidden" value="30.20742416381836">
<div id="map" style="width:600px;height:400px;"></div><p class="help-block">Необязательное. </p></div>

if I refresh page after it, page is

<div class="controls">
  <script type="text/javascript"> 
  document.map_params={};
  document.map_params.longitude_id = 'point_longtitude';
  document.map_params.latitude_id = 'point_latitude';
 </script>
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css">
<script src="/assets/rails_admin_geo_field/leaflet.js?body=1" type="text/javascript"></script>
<input id="point_latitude" name="point[latitude]" type="hidden" value="59.94280348446257">
<input id="point_longtitude" name="point[longtitude]" type="hidden" value="30.20742416381836">
<div id="map" style="width: 600px; height: 400px; position: relative; " class="leaflet-container leaflet-fade-anim" tabindex="0"><div class="leaflet-map-pane" style="-webkit-transform: translate3d(0px, 0px, 0); "><div class="leaflet-tile-pane"><div class="leaflet-layer"><img class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; left: 201px; top: 58px; " src="http://a.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/13/4783/2381.png"><img class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; left: 201px; top: -198px; " src="http://c.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/13/4783/2380.png"><img class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; left: -55px; top: 58px; " src="http://c.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/13/4782/2381.png"><img class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; left: 457px; top: 58px; " src="http://b.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/13/4784/2381.png"><img class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; left: 201px; top: 314px; " src="http://b.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/13/4783/2382.png"><img class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; left: -55px; top: -198px; " src="http://b.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/13/4782/2380.png"><img class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; left: 457px; top: -198px; " src="http://a.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/13/4784/2380.png"><img class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; left: -55px; top: 314px; " src="http://a.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/13/4782/2382.png"><img class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; left: 457px; top: 314px; " src="http://c.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/13/4784/2382.png"></div></div><div class="leaflet-objects-pane"><div class="leaflet-shadow-pane"><img src="http://cdn.leafletjs.com/leaflet-0.4/images/marker-shadow.png" class="leaflet-marker-shadow  leaflet-zoom-animated" style="margin-left: -13px; margin-top: -41px; width: 41px; height: 41px; opacity: 1; -webkit-transform: translate3d(300px, 200px, 0); "></div><div class="leaflet-overlay-pane"></div><div class="leaflet-marker-pane"><img src="http://cdn.leafletjs.com/leaflet-0.4/images/marker-icon.png" class="leaflet-marker-icon  leaflet-clickable leaflet-zoom-animated" style="margin-left: -13px; margin-top: -41px; width: 25px; height: 41px; opacity: 1; -webkit-transform: translate3d(300px, 200px, 0); z-index: 200; "></div><div class="leaflet-popup-pane"></div></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-control"><a class="leaflet-control-zoom-in" href="#" title="Zoom in"></a><a class="leaflet-control-zoom-out" href="#" title="Zoom out"></a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control">Powered by <a href="http://leaflet.cloudmade.com">Leaflet</a></div></div></div></div><p class="help-block">Необязательное. </p></div>

javascripts rendered only after refresh

@bbenezech
Collaborator

You need to hook in the events I pointed you to.

$(document).live 'rails_admin.dom_ready', ->
  # do your stuff

Please use the mailing list for support.

@bbenezech bbenezech closed this Oct 25, 2012
@bayarja

i'm using $(document).live 'rails_admin.dom_ready', -> but that error on console "Uncaught TypeError: Object [object Object] has no method 'live'"

@carlesso

A little late, but @bayarja, you are likely using a newer version of jQuery, use $(document).on 'rails_admin.dom_ready', -> instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment