AJAX refresh, setInterval timing and localhost crash

Question

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).

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.

1. When I use refresh() on only the table div, somehow my whole wrapper div gets recursively embedded inside my table div, and everything (both map and table) refreshes.

2. I wrote an updateMarker() function to update my markers, but it doesn't seem to work.

3. 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.

4. 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.

5. EDIT: Adding to #4, every time I start runserver now (with map related code), the terminal output gets stuck at [14/Aug/2013 03:42:01] "GET /static/js/jquery-1.10.2.min.map HTTP/1.1" 404 1744 and localhost just goes Aw, Snap. :(

   MORE EDIT: IT JUST FIXED ITSELF??! I didn't do anything...

The EDITED refresh AJAX 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);

EDITED updateMarkers inside my .js file,

// 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<=LatLngArray.length;i++) {
                myIcon = L.icon({iconUrl: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+i+'|666699|FFFFFF'});
                layArray.push(L.marker([LatLngArray[i].lat, LatLngArray[i].lng], {icon: myIcon}).bindPopup('<center><br>[LatLngArray[i].lat, LatLngArray[i].lng}}]</center>'));
            }
            myLayer = L.layerGroup(layArray);
            map.addLayer(myLayer);
        }
    });
}

Another somewhat relevant question, I followed OSM's Leaflet Guide 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 initmap() function it looks like this:

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);
}

Sorry for the long post...I can't really do much at the moment as my chrome is still showing the Aw, Snap!

Answer 1

So long post O.o

Lets start with When I use refresh() on only the table div...

Are you sure with your ajax function? I would rather do something like this:

function refresh() {
    $.ajax({
        url: '/ #table', // this should grab only #table element...
        success: function(data) {
            // ...and it will insert it inside #result element
            $('#result').html(data); 
            setTimeout(refresh, 5000);
        }
    });
}

setTimeout(refresh, 5000);

html structure update:

<div id="result">
    <div id="table">
        ...