content_for와 and ajax/Jquery를 사용하여 부분적으로 웹 페이지를 업데이트합니다.

저는이 사이트의 도움을 받아 천천히 Mojolicious와 Perl을 배우고 있습니다. 나는 Jquery의 호출 결과를 기반으로 내 페이지의 일부분을 동적으로 업데이트하는 가장 좋은 방법을 결정하려고 노력 해왔다. 순간 content_for와 and ajax/Jquery를 사용하여 부분적으로 웹 페이지를 업데이트합니다.

는이 같은 템플릿 (모조 한 덕분에 조엘 기여자)

<!DOCTYPE html> 
<html> 
<head> 
    <title><%= title %></title> 
</head> 
<body> 
    %= content 
    %= include 'common_js' 
    %= content_for 'js_imports' 
</body> 
</html>

은 그럼 아래처럼,이 레이아웃을 사용하는 페이지가 있습니다.

%title 'Script Test'; 
% content_for 'js_imports' => begin 
%= javascript begin 
    $(document).ready(function(){ 
    $("input#testbutton").click(function(){ 
     $.get('<%= url_for('testbutton') %>', 
     function (data) { 
      $("div#content").html(data); 
     }); 
     }) 
    }); 
% end 
% end 

<p>Main Page</p> 
<input type="button" id="testbutton" class="btn btn-danger" value="test"> 
<div class="span9" id="content"></div><!--/span9-->

그래서 'testbutton'을 클릭하면 get 콘텐츠 요청을 통해 ID 콘텐츠의 응답을 작성하고 있습니다.

'데이터'는 다시 나타납니다.

% content_for 'js_imports' => begin 
    %= javascript begin 
    $(document).ready(function(){ 
     $("input#testbutton2").click(function(){ 
     alert('testbutton2 clicked'); 
    }); 
    }); 
    % end 
% end  

<p>Test Button Clicked</p> 
<input type="button" id="testbutton2" class="btn btn-danger" value="test2">

위의 자바 스크립트는 내 페이지에 포함되어 있지 않습니다. 나는 content_for js_imports가 더 이상 DOM에 존재하지 않기 때문에 그것을 생각한다. 내 테스트 페이지에 'content_for'태그를 추가 할 수 있지만 ID 내용이 포함 된 내 DIV 내에 스크립트가 추가됩니다. 내가 어떻게 든 애써하려고하는 이유는 내 스크립트가 내 기존 스크립트 아래에 페이지 끝에 추가되기 때문입니다. 내가 추가하고 스크립트를 제거하는 자바 스크립트를 사용할 수 있지만 태그 도우미와 함께 할 수있는 방법이 있는지 궁금 해서요?

출처

2013-03-30 user1768233

content_for 블록으로 돌아 오는 데이터를 포함 할 필요가 없습니다.

%= javascript begin 
    $(document).ready(function(){ 
    $("input#testbutton2").click(function(){ 
     alert('testbutton2 clicked'); 
    }); 
    }); 
% end 

<p>Test Button Clicked</p> 
<input type="button" id="testbutton2" class="btn btn-danger" value="test2">

을 그리고 당신이 원하지 않는 경우는 기존의 내용을 대체하지만, 단지에 추가 한 후 html 대신 append를 사용하여 : : 그냥 직접 포함에 (

$("div#content").append(data);

조엘 버거 의견)은 당신이 원하는 것을 보여주는 멋진 pastie을 만들었습니다.

출처

2013-03-30 00:29:18

감사합니다. Ben, 감사합니다. 나는 내 질문에 분명하지 않을 수도 있습니다. 내가 원하는 것은 div # content에 반환 된 HTML을 추가하는 것이지만 페이지 끝의 기존 자바 스크립트 뒤에 javascript 섹션을 반환하는 것입니다. 전체 페이지를 다시 그려서 레이아웃을 다시 참조 할 수 있지만 페이지의 일부만 업데이트하고 싶습니다. – user1768233

초기 자바 스크립트가 파일의 끝 부분에 나타나는 이유는 나머지 페이지가 다운로드 될 때까지 구문 분석을 지연시키기 위해서입니다. 이는 본질적으로 미적이어서 나중에 자바 스크립트가 실행되는 동안에도 사용자가 페이지를 볼 수 있습니다. 페이지가 렌더링되고 나면 아약스를 통해로드 된 새로운 컨텐츠는 마지막에있을 필요가 없으며 사실 jQuery가 어쨌든 그렇게 할 것이라고 생각합니다. 벤이 맞습니다. 그냥 여기에 포함 시키십시오. 여기서는 content_for가 도움이되지 않습니다. –

당신은 응답을 렌더링하기 전에 렌더링해야합니다. 브라우저는 템플릿 지시어로 무엇을해야하는지 알지 못합니다. –

content_for와 and ajax/Jquery를 사용하여 부분적으로 웹 페이지를 업데이트합니다.

답변

관련 문제