title: AJAX refresh, setInterval timing and localhost crash
body: <p>I am working on an app using Django, Leaflet, OSM and jQuery. The app displays a map with markers and a table with all the marker data (time, lat, lng). </p>
  
  <p>I want to automatically update the table and the map markers without reloading the whole page (I basically want to eliminate the flickr of the map tile layer, and the database is constantly being updated by some randomly generated data inside model.py), but I ran into the following problems.</p>
  
  <ol>
  <li><p><strike>When I use <code>refresh()</code> on only the table div, somehow my whole
  wrapper div gets recursively embedded inside my table div, and everything (both map and table) refreshes. </strike></p></li>
  <li><p>I wrote an updateMarker() function to update my markers, but it doesn't seem to work. </p></li>
  <li><p><strike>I have my setInterval time interval at 5 seconds, but the div doesn't actually refresh every 5 seconds. More like every 1/2 second or something way too fast.</strike></p></li>
  <li><p>Since my app connects to OSM for the map tiles, is it possible for all these "GET" queries to eat up my bandwidth? After letting the program run for a while, I realized I could no longer load Google and the wifi was still good. After a little longer, localhost started crashing like crazy. I restarted my computer twice and checked the internet setting 5 times, and localhost still crashes when I have the map related scripts enabled. When I comment out the map part of the code, however, my localhost seems fine for the most part, just a bit choppy and problem#3 still stands.</p></li>
  <li><p>EDIT: Adding to #4, every time I start runserver now (with map
  related code), the terminal output gets stuck at <code>[14/Aug/2013
  03:42:01] "GET /static/js/jquery-1.10.2.min.map HTTP/1.1" 404 1744</code>
  and localhost just goes Aw, Snap. :(</p>
  
  <p>MORE EDIT: IT JUST FIXED ITSELF??! I didn't do anything...</p></li>
  </ol>
  
  <p>The EDITED refresh AJAX code:</p>
  
  <pre><code>function refresh() {
      $.ajax({
          url: '/#table',
          success: function(data) {
              $('#result').html(data); //adding an extra #result div to wrap #table
              setInterval(refresh, 5000); //actually setting the refresh rate to 5s...
          }
      });
  }
  
  setInterval(refresh, 5000);
  </code></pre>
  
  <p>EDITED <code>updateMarkers</code> inside my .js file, </p>
  
  <pre><code>// group markers to a layer and add the layer to map
  function updateMarkers(LatLngArray) {
  
      // if (myLayer){
      //  map.removeLayer(myLayer);
      // }
      $.ajax({
          url:'/#map',
          success: function(){
              for (i=1;i&lt;=LatLngArray.length;i++) {
                  myIcon = L.icon({iconUrl: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld='+i+'|666699|FFFFFF'});
                  layArray.push(L.marker([LatLngArray[i].lat, LatLngArray[i].lng], {icon: myIcon}).bindPopup('&lt;center&gt;&lt;br&gt;[LatLngArray[i].lat, LatLngArray[i].lng}}]&lt;/center&gt;'));
              }
              myLayer = L.layerGroup(layArray);
              map.addLayer(myLayer);
          }
      });
  }
  </code></pre>
  
  <p>Another somewhat relevant question, I followed <a href="http://switch2osm.org/using-tiles/getting-started-with-leaflet/" rel="nofollow">OSM's Leaflet Guide</a> to try to set up "marker showing while user panning" feature, but it doesn't work. When I pan around the map, say starting from the US and move east until I see the US again, all of my markers that were on the US from the other side can no longer be seen. I literally just copied the code. Inside the <code>initmap()</code> function it looks like this:</p>
  
  <pre><code>function initmap() {
      // create the tile layer with correct attribution
      var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      var osmAttrib='Map data © OpenStreetMap contributors';
      var osm = new L.TileLayer(osmUrl, {minZoom: 2, maxZoom: 15, attribution: osmAttrib});       
  
      // start the map centering around the mediterrean
      map = new L.Map('map', {
          center: new L.LatLng(37.16, 18.87),
          zoom: 2,
          layers: [osm]
      });
  
      askForPlots();
      map.on('moveend', onMapMove);
  }
  </code></pre>
  
  <p>Sorry for the long post...I can't really do much at the moment as my chrome is still showing the Aw, Snap!</p>