Question

Here is the coffee script code I have in my controller js.coffee file. I am just trying to open a simple map centered on a specific location etc. My map works and the moveend_event callback is triggered because if I uncomment the alert("hello") call it works fine.

$(document).ready ->

  map = undefined
  options =
    projection: new OpenLayers.Projection('EPSG:900913')
    displayProjection: new OpenLayers.Projection("EPSG:4326")
    center: new OpenLayers.LonLat(-115.540123, 54.073189)
    controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.LayerSwitcher()]
    eventListeners:
      'moveend': moveend_event
  map = new OpenLayers.Map("map_element", options)
  osm = new OpenLayers.Layer.OSM('OpenStreetMap Layer')
  map.addLayer osm
  map_center = new OpenLayers.LonLat(-115.540123, 54.073189).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject())
  map.setCenter(map_center, 11)

moveend_event = ->
  #alert "Hello!"
  #$(".map_location").innerHTML "Hello!"

I am close but can’t I think I may have a Openlayers / jQuery conflict. If I try setting my map_location div with $(".map_location").innerHTML "Hello!" the page creators and the error console shows:

TypeError: ‘undefined’ is not a function (evaluating
‘$(“.map_location”).innerHTML(“Hello!”)’)

I have jquery loading before open layers if that helps. I did some Googling and and it might be jQuery noConflict mode (http://api.jquery.com/jQuery.noConflict/) but I am a javascript newbie and I don’t know enough to recognize the issue here or how to fix it. I am sure it’s an easy fix but I currently do not have a clue.

Answer 1

innerHtml is not a jQuery function, use $('selector').html(new html here); instead.

html is jQuery counterpart of javascript’s innerHtml