71237

using HTMLImports.whenReady not working in chrome

I have a web component using HTMLImports.whenReady to make sure that certain things get fired in the correct timing, and the problem is this fixed the bugs I was having in IE and Firefox, but now it is not working in chrome.

so on the page of the site i have this:

<link rel="import" href="/static/template/components/result-map.html"> <link rel="import" href="/static/template/components/result-options.html"> <link rel="import" href="/static/template/components/advanced-modal.html"> <link rel="import" href="/static/template/components/map-modal.html"> <div class="row-fluid"> <div id="component" class="span12"> <div class="well"> <!-- TMPL_IF Listings --> <div class="row-fluid"> <small><em>Press a map marker for more information</em></small><br /> <result-map></result-map> </div> <!-- /TMPL_IF --> </div> </div> </div> <script> /*GENERATE MAP MARKERS*/ HTMLImports.whenReady(function(){ <!-- TMPL_IF Listings --> <!-- TMPL_LOOP Listings --> <!-- TMPL_IF have_geocode --> markers.push({ latLng: [<!-- TMPL_VAR latitude -->, <!-- TMPL_VAR longitude -->], data: '...', options: { icon: "/static/images/mapmarker.png", title: "<!-- TMPL_VAR street_no --> <!-- TMPL_VAR street -->, <!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip -->" } }); <!-- TMPL_ELSE --> markers.push({ address:"<!-- TMPL_VAR street_no --> <!-- TMPL_VAR street -->, <!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip -->", data: '...', options: { icon: "/static/images/mapmarker.png", title: "<!-- TMPL_VAR street_no --> <!-- TMPL_VAR street -->, <!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip -->" } }); <!-- /TMPL_IF --> <!-- /TMPL_LOOP --> <!-- /TMPL_IF --> }); </script>

and then the polymer webcomponent looks like this

<dom-module id="result-map"> <template> <div id="map_canvas"></div> </template> <script> var markers = []; HTMLImports.whenReady(function(){ $('#map_canvas').gmap3({ map:{ options:{ streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, mapTypeControlOptions: { center: true, zoom: 10, }, } }, marker:{ values: markers, options:{ draggable: false }, events:{ click: function(marker, event, context){ $('#map-modal').empty().append(context.data).modal('show'); $(this).gmap3('get').panTo(marker.getPosition()); }, }, }, autofit:{maxZoom: 16}, }) }); Polymer({ is: 'result-map', // Fires when an instance of the element is created created: function() {}, // Fires when the local DOM has been fully prepared ready: function() {}, // Fires when the element was inserted into the document attached: function() {}, // Fires when the element was removed from the document detached: function() {}, // Fires when an attribute was added, removed, or updated attributeChanged: function(name, type) {} }); </script> </dom-module>

The idea behind this is that the map markers have to be made in the loop server side so I then, and at times through out the site the markers are different, and then load them in to a common webcomponent and push the markers into the "marker" object.

When I originally wrote the script I was firing on document.ready and this would cause IE and FF to not load the markers as the VAR was not created until the the component was loaded, so changing to HTMLImports.whenReady this allowed this to happen, but now breaks chrome for some reason.

Re-reading my question, I want to be specific, the object markers is empty in chrome but not in IE an FF with what is above.

Answer1:

At the time you register your callback to HTMLImports.whenReady in Chrome, the event has already fired. Your callback won't get called because it was registered too late. With your solution, you catch Chrome in the first assignment to markers and the polyfilled browsers in the second one. Another way to handle this problem in general is this:

if (HTMLImports.ready) { doStuff(); } else { HTMLImports.whenReady(doStuff); }

This way, you ensure that the doStuff function will be called exactly once.

Answer2:

Probably not correct, but I had to pass the markers in to a different object and then define markers twice like such and this seams to work:

var m = []; <!-- TMPL_IF Listings --> <!-- TMPL_LOOP Listings --> <!-- TMPL_IF have_geocode --> m.push({ latLng: [<!-- TMPL_VAR latitude -->, <!-- TMPL_VAR longitude -->], data: '<div class="modal-body"><p class="lead"><!-- TMPL_VAR street_no --> <!-- TMPL_VAR street --><br /><!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip --></p><div class="row-fluid"><div class="span5"><img style="width: 95%" class="img-polaroid" src="/property/photo/<!-- TMPL_VAR listing_id -->/1" alt="Property Photo Unavailable"/></div><div class="offset1 span5"><strong>$<!-- TMPL_VAR NAME=price --></strong><br /><!-- TMPL_UNLESS lan -->Beds: <!-- TMPL_VAR bdrms --><br />Baths: <!-- TMPL_VAR baths --><br />Sq. Ft. <!-- TMPL_VAR sqft --><br /><!-- /TMPL_UNLESS --><!-- TMPL_IF com -->Business Type: <!-- TMPL_VAR business_type --><br />For Lease: <!-- TMPL_VAR for_lease_yn --><br />For Sale: <!-- TMPL_VAR for_sale_yn --><br /><!-- /TMPL_IF --><!-- TMPL_IF lan -->Parcel Type: <!-- TMPL_VAR parcel_type --><br />Lot Size: <!-- TMPL_VAR lot_size --><br />Acres: <!-- TMPL_VAR acres --><br /><!-- /TMPL_IF --><br /><!-- TMPL_IF is_broker --><img src="/static/images/brokerlogo.gif" alt="broker logo" /><!-- TMPL_ELSE --><img src="/static/images/smallbrlogo.gif" alt="small broker logo" /><!-- /TMPL_IF --></div></div><a href="/property/detail/<!-- TMPL_VAR listing_id -->" class="btn btn-small btn-primary" target="_self">View Details</a></div>', options: { icon: "/static/images/mapmarker.png", title: "<!-- TMPL_VAR street_no --> <!-- TMPL_VAR street -->, <!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip -->" } }); <!-- TMPL_ELSE --> m.push({ address:"<!-- TMPL_VAR street_no --> <!-- TMPL_VAR street -->, <!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip -->", data: '<div class="modal-body"><p class="lead"><!-- TMPL_VAR street_no --> <!-- TMPL_VAR street --><br /><!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip --></p><div class="row-fluid"><div class="span5"><img style="width: 95%" class="img-polaroid" src="/property/photo/<!-- TMPL_VAR listing_id -->/1" alt="Property Photo Unavailable"/></div><div class="offset1 span5"><strong>$<!-- TMPL_VAR NAME=price --></strong><br /><!-- TMPL_UNLESS lan -->Beds: <!-- TMPL_VAR bdrms --><br />Baths: <!-- TMPL_VAR baths --><br />Sq. Ft. <!-- TMPL_VAR sqft --><br /><!-- /TMPL_UNLESS --><!-- TMPL_IF com -->Business Type: <!-- TMPL_VAR business_type --><br />For Lease: <!-- TMPL_VAR for_lease_yn --><br />For Sale: <!-- TMPL_VAR for_sale_yn --><br /><!-- /TMPL_IF --><!-- TMPL_IF lan -->Parcel Type: <!-- TMPL_VAR parcel_type --><br />Lot Size: <!-- TMPL_VAR lot_size --><br />Acres: <!-- TMPL_VAR acres --><br /><!-- /TMPL_IF --><br /><!-- TMPL_IF is_broker --><img src="/static/images/brokerlogo.gif" alt="broker logo" /><!-- TMPL_ELSE --><img src="/static/images/smallbrlogo.gif" alt="small broker logo" /><!-- /TMPL_IF --></div></div><a href="/property/detail/<!-- TMPL_VAR listing_id -->" class="btn btn-small btn-primary" target="_self">View Details</a></div>', options: { icon: "/static/images/mapmarker.png", title: "<!-- TMPL_VAR street_no --> <!-- TMPL_VAR street -->, <!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip -->" } }); <!-- /TMPL_IF --> <!-- /TMPL_LOOP --> <!-- /TMPL_IF --> markers = m; HTMLImports.whenReady(function(){ markers = m; });

Recommend

  • Database Poller : MySQLNonTransientConnectionException: Too many connections
  • How to pass a constant or literal data via an attribute while instantiating dart web component?
  • Jersey not able to map json request to class
  • Google Maps Javascript V3 Uncaught TypeError: Cannot read property 'offsetWidth' of null
  • Convert google maps polyline to html canvas line [closed]
  • count markers displayed on map after zoom in and out
  • Remove commas between google places types
  • How can I dynamically add items into paper-dropdown-menu?
  • trying to get location from address using google api v3
  • org.apache.catalina.LifecycleException when trying to start Glassfish server with Eclipse
  • Passing custom CSS to Polymer element
  • Make jQuery Wait For $.post to complete updating page
  • Should my be inside my ?
  • How to integrate Geodjango with Google Maps API 3?
  • Testing polymer 1.0 components with iron-ajax using wct
  • when does setTimeout start executing in a inline
  • Getting Latitude Longitude from GoogleMaps in TWebBrowser
  • How to add closing tag for canvas in three js rendered Canvas?
  • Get the pasted content on document on paste event
  • Google Maps api v3 get start and end coordinates of a street
  • UIAlertController button function not working
  • Thread 1: EXC_BAD_ACCESS (code =1 address = 0x0)
  • where do I find the xml.dom python package for the python-2.6.0-8.9.28 and I have a suse/x86_64 vers
  • Android Google Maps API v2 start navigation
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Django simple Captcha “No module named fields” error
  • How do I exclude a dependency in provided scope when running in Maven test scope?
  • Is there a perl module to validate passwords stored in “{crypt}hashedpassword” “{ssha}hashedpassword
  • Meteor: Do Something On Email Verification Confirmation
  • Meteor helpers not available in Angular template
  • Cannot resolve symbol 'MyApi'
  • Seeking advice on Jetty HttpClient Hang
  • How to get address from latitude and longitude android google map v2 [duplicate]
  • Jenkins: How To Build multiple projects from a TFS repository?
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Google cloud sdk not working when python points python3
  • How to delete a row from a dynamic generate table using jquery?
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • Android Heatmap on canvas or ImageView