AJAX refresh, setInterval timing 및 localhost crash

Question

Django, Leaflet, OSM 및 jQuery를 사용하는 앱에서 작업하고 있습니다. 앱은 마커가있는지도와 모든 마커 데이터 (시간, 위도, 경도)가있는 표를 표시합니다.

전체 페이지를 다시로드하지 않고 테이블과 맵 마커를 자동으로 업데이트하려고합니다. (기본적으로 맵 타일 레이어의 플리커를 없애기 위해 데이터베이스가 끊임없이 model.py에서 임의로 생성 된 데이터로 업데이트되고 있습니다.),하지만 다음과 같은 문제가 발생했습니다. 어떻게 든 내 모든 래퍼 사업부가 반복적으로 내 테이블 사업부 내부에 포함됩니다

1. 난 단지 테이블 DIV에 refresh()를 사용

   , 모든 것이 (매핑 테이블 모두) 새로 고칩니다.

2. 마커를 업데이트하기 위해 updateMarker() 함수를 작성했지만 작동하지 않는 것 같습니다.

3. 내 setInterval 시간 간격은 5 초이지만 div는 실제로 5 초마다 새로 고침을하지 않습니다. 매 1/2 초 또는 너무 빠른 방법과 비슷합니다.

4. 내 앱이지도 타일을 OSM에 연결하기 때문에 모든 "GET"검색어가 내 대역폭을 먹을 수 있습니까? 프로그램을 잠시 실행하면 더 이상 Google에로드 할 수없고 Wi-Fi는 여전히 유용하다는 것을 알게되었습니다. 좀 더 길어진 후, localhost는 미친 듯이 부서지기 시작했습니다. 내 컴퓨터를 두 번 다시 시작하고 인터넷 설정을 5 번 확인했는데지도 관련 스크립트를 사용하도록 설정하면 localhost가 여전히 충돌합니다. 그러나 코드의 맵 부분을 주석 처리 할 때, 내 로컬 호스트는 대부분 잘 돌아 간다. 조금 고르지 않고 문제 # 3이 여전히 유효하다.

5. 편집 : # 4에 추가 (지도 관련 코드와) 지금은 확인 runserver 시작할 때마다이 단자 출력은 [14/Aug/2013 03:42:01] "GET /static/js/jquery-1.10.2.min.map HTTP/1.1" 404 1744 에 붙어 및 로컬 호스트 단지 앗, 이런 간다됩니다. :(

   더 편집 :! 그냥 편집은 AJAX 코드를 새로

... 난 아무 짓도 안 했어? 자신을 고정 :

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

내 내부 updateMarkers을 편집했다. JS 파일은

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

또 다른 다소 관련 질문은, 나는 그 자체로 시도 OSM's Leaflet Guide을 따라 사용자가 패닝하는 동안 표시되는 "마커"기능은 작동하지만 작동하지 않습니다. 내가 미국을 출발점으로 삼고 미국을 다시 볼 때까지 동쪽으로 이동한다고하면, 다른 쪽에서 미국에 있던 모든 마커를 더 이상 볼 수 없습니다. 문자 그대로 방금 코드를 복사했습니다. initmap() 기능 내부는 다음과 같습니다

긴 게시물에 대한

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

죄송합니다 ... 내 크롬은 여전히 ​​앗, 이런 보여주는대로 정말 순간에 많은 것을 할 수 없어!

O.o

Answer 1

너무 오래 포스트는 당신이 당신의 AJAX 기능을 확실 When I use refresh() on only the table div...

시작하자?

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 구조 업데이트 :

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