플라스크 : 클라이언트 측 데이터로 템플릿 업데이트

Question

URL을 방문 할 때 사용자가 레스토랑 (rest objs)의 기본 목록을 표시하는 프로젝트를 진행 중입니다. 사용자가 HTML5 geoloc 기능을 사용하여 위치를 제출하도록 선택한 경우 결과 목록을 업데이트하여 사용자 위치 근접성에 따라 정렬되도록합니다.

초기 템플릿이 성공적으로 렌더링되고 데이터를 서버로 다시 가져올 수 있습니다. 템플릿을 다시 렌더링 할 수 없습니다. dev 콘솔에서 내 클라이언트 게시물에 대한 응답을 미리 볼 때 데이터가 업데이트되지만 페이지로 이동해도 아무 것도 변경되지 않았습니다.

나는 어리석은 명백한 실수를하고있는 것을 알고있다. 나는 그것이 무엇인지 모른다. 여기

내이다 :

def home(): 
    if request.method == 'POST': 
     lat = request.form.get('lat','') 
     lng = request.form.get('lng','') 
     query = loc_query(lat,lng,10,0,20) 
     rests = Rest.query.from_statement(query).all() 
     return render_template('main.html',rests = rests) 
    else: 
     rests = getLatest(5)#Get 5 random rest objects 
     return render_template('main.html',rests = rests) 

그리고 여기 내 클라이언트 스크립트입니다

<script type="text/javascript"> 
    function sendloco (loc) { 

     $.post('/latest',{lat:loc.coords.latitude,lng:loc.coords.longitude}, 
      function(data){ 
       $('#restlist').html(data); 
      });     
    }; 

    navigator.geolocation.getCurrentPosition(sendloco); 
</script> 

그리고 여기에 내 템플릿의 관련 부분입니다 다음 FO

<div class="col-lg-12" id="restlist"> 

     {% for rest in rests %} 
      <h2><b><a href="{{ url_for('profile',id=rest.id)}}">{{ rest.name }}</a></b></h2> 
      <h3>Date:{{ rest.latestDt() }}</h3> 
      <h3>{{ rest.street }}</h3> 
     {% endfor %} 
    </div> 

Thansk 도움!

Answer 1

$('.restlist').html(data)이 (가) 전화를 걸었지만 HTML에서 div가 id="restlist"이 아닌 것으로 보입니다. 아마도 $('#restlist').html(data)을 시도해보십시오.