web2py에서 아약스 응답

Question

나는 내 웹 페이지에 코멘트에 아약스를 추가하는 중입니다. 다음 는 기능과 뷰 파일입니다

def normalajax(): 
    news=db(db.newsfeed.id>0).select(orderby=~db.newsfeed.created_on) 
    return dict(news=news) 

def new_post(): 
    form=SQLFORM(db.newsfeed) 
    if form.accepts(request.vars, formname=None): 
     news=db(db.newsfeed.created_by==auth.user_id).select(orderby=~db.newsfeed.created_on) 
     return DIV(news) 
    elif form.errors: 
     return TABLE(*[TR(k, v) for k, v in form.errors.items()]) 


{{extend 'layout.html'}} 

<form id="myform"> 
    <input name="body" id="body" /> 
    <input type="submit" /> 
</form> 
<script>$('textarea').css('width','600px').css('height','50px');</script> 

<script> 
jQuery('#myform').submit(function() { 
    ajax('{{=URL('new_post')}}', 
     ['body'], 'target'); 
    return false; 
}); 

</script> 

<div id="target"> 
{{for post in news:}} 
<div style="background: #ffffff; margin-bottom: 5px; padding: 8px;"> 
<h3>{{=db.auth_users[post.created_by].first_name}}</h3> On {{=post.created_on}}: 
    {{=MARKMIN(post.body)}} 

</div>  
{{pass}} 

</div> 

문제는 내가 새로운 코멘트를 게시 할 때, 전체 사업부는 내가 for 루프에 주어진 모든 스타일링없이 새로운 콘텐츠로 대체한다는 것입니다

내가 스크린 샷의 링크를 준 : 을이 게시 코멘트 전에이다 : https://skydrive.live.com/redir?resid=AFF5DF0EB4A5BCD5!122&authkey=!AFg6utSsGLyYRG4&v=3&ithint=photo%2c.png

이 인 코멘트를 게시 후 : https://skydrive.live.com/redir?resid=AFF5DF0EB4A5BCD5!123&authkey=!AJyroKLQLp5ssPs&v=3&ithint=photo%2c.png

,536,913,632을 10

의견을 게시 한 후 Ajax 응답이 div 대상의 내용을 대체합니다. 게시하기 전에 표시되는 것과 같이 응답을 표시하고 표시하는 방법은 무엇입니까?

Answer 1

, 당신은 그것을 파이썬 코드를 실행할 수 없습니다. 페이지가 브라우저에 있으면 원래 템플릿의 Python 코드가 존재하지 않습니다.이 코드는 모두 순수 HTML 소스 코드를 생성하기 위해 실행되었습니다. 양식을 제출할 때 new_post 함수는 DIV(news)을 반환하고 HTML로 변환됩니다. 이 HTML은 페이지의 "대상"div의 내용을 대체합니다. Ajax 응답을 생성 할 때 서버에서 최종 HTML을 생성하여 브라우저로 보내야한다. 브라우저는 템플릿 처리를하지 않는다.

어쨌든 더 나은 방법은 아마 Ajax 구성 요소를 사용하는 것입니다. 아니 테스트,하지만 뭔가 같은 : 위의 코드에서

def news(): 
    return dict() 

def news_list(): 
    if request.args(0) == 'user': 
     query = db.newsfeed.created_by == auth.user_id 
    else: 
     query = db.newsfeed.id > 0 
    news = db(query).select(orderby=~db.newsfeed.created_on) 
    return dict(news=news) 

def new_post(): 
    form = SQLFORM(db.newsfeed) 
    if form.process().accepted: 
     url = URL('default', 'news_list.load', args='user') 
     response.js = "$.web2py.component('%s', target='news');" % url 
    return dict(form=form) 

In /views/default/news.html: 

{{extend 'layout.html'}} 
{{=LOAD('default', 'new_post.load', ajax=True)}} 
{{=LOAD('default', 'news_list.load', ajax=True, target='news')}} 

In /views/default/news_list.load: 

{{for post in news:}} 
<div style="background: #ffffff; margin-bottom: 5px; padding: 8px;"> 
<h3>{{=post.created_by.first_name}}</h3> On {{=post.created_on}}: 
    {{=MARKMIN(post.body)}} 
{{pass}} 

In /views/default/new_post.load: 

{{=form}} 

, news.html 메인 페이지이며,이 개 아약스 구성 요소 포함 - 폼에 대한 다른 하나는 뉴스 목록을. 처음에는 뉴스 목록 구성 요소가 모든 뉴스 게시물을로드합니다 (게시물이 많은 경우이를 제한하거나 페이지 매김하는 것이 좋습니다). 양식이 제출되면 response.js을 통해 자바 스크립트를 반환하며 제출이 성공하면 실행됩니다. Javascript는 브라우저에서 $.web2py.component()을 호출하여 news_list() 함수를 호출하여 "news"div의 뉴스 목록 구성 요소를 URL arg로 사용합니다 ("user"arg는 news_list() 함수 만 반환하도록 지정하는 플래그 임). 현재 사용자의 게시물).

Answer 2

동일한보기를 얻으려면 Ajax 응답에 동일한 CSS를 적용하십시오.

이 CSS는 아약스 응답에서 누락되었습니다.

보기이 예제 페이지가 브라우저에 있으면

$.ajax({ 
    url: "test.html", 
    cache: false 
}) 
.done(function(result) { 
$("#results").append(result); // or replace your "result" coming from server 
});