레일이있는 초보자 용 자바 스크립트 : submit form (3.1/jquery)

Question

레일즈 3.1/jquery에서 텍스트가 포함 된 div와 해당 텍스트를 업데이트하는 양식이있는 기본 페이지가 있습니다. 나는 jquery 나 js를 잘 모르기 때문에 컨트롤러에 대한 coffeescript를 파고들뿐입니다.

내가 찾은 자습서 중 아무 것도 적합하지 않은 것으로 보이며, 내가 발견 한 몇 안되는 것이 고대입니다. 내가 무슨 일이 일어나고 있는지 알 수 있습니다. 일종의 : 나는 아약스 성공에 대한 js 경고를 얻을 수 있습니다. 원격 양식 (컨트롤러와 서버에 넣는 작업이 작동합니다. 기본 텍스트는 변경되지만 변경 사항을 보려면 페이지를 새로 고침해야합니다.)

그래서 내가 통해 일하고 있어요 2 개 기본적인 질문이 있습니다

• 내가 JS의 파셜와 바이올린이 필요하거나 그냥 페이지에 대한 JS/커피 스크립트에이 넣을 수 있습니까? 이 부분은 지저분한 부분이없이 처리 할 수 ​​있습니다.

• 정확하게 js/jquery : .html, .load 및 다른 여러 함수로 정보를 바꾸는 것을 제어하는 ​​방법이 관련되어있는 것으로 보이지만 올바른 조합을 찾지 못했습니다. 내가 찾은

모든 자습서가 너무 오래되었거나 레일 내에서 몇 가지 기본적인 JQuery와 물건을의 기본 히트 - 더 - 접지 - 실행 이해 너무 장황 중 하나입니다. 나는 js/json을 사용하여 양식 제출을 가속화하고 속도를 높이려고 노력하고 있습니다. 초보자를위한 새롭고 명확하고 간단한 튜토리얼은 훌륭 할 것이지만 올바른 학습 방향으로 나를 지적하는 것은 훌륭 할 것입니다.

그래, 아직 코드를 게시하지는 않았지만 조금만 작업 할 수 있다면 게시하겠습니다.

Answer 1

이 그런 짓을, 아약스 성공에 alert()이 여기서

$("#myDivId").text(myText); 

myText입니다 귀하가 서버에 제출 한 텍스트 또는 귀하의 상황에 가장 적합한 서버의 응답.

더 일반적으로 말해서, 요소의 텍스트를 바꾸려면 $("#myElementId").text("new text")을 사용하십시오. 요소의 HTML을 바꾸려면 $("#myElementId").html("<b>new HTML</b>")

Answer 2

Ruby를 모르지만 jQuery로 처리하는 것이 쉽습니다.

AJAX 양식 제출을 수행하고 <div> 요소를 업데이트하면 AJAX 호출이 성공을 반환합니다.

//bind some code to the submit event for your form 
$('#form_id').bind('submit', function (event) { 

    //preventDefault(); is the same as return false; except you can run code after preventDefault(); 
    event.preventDefault(); 

    //make a GET request to your server-side script 
    $.get('path/to/form_action.rb', $(this).serialize(), function (response) { 

     //this is the callback for the AJAX call 
     $('#div_id').html('<span>This is my <strong>new</strong> fancy text</span>'); 
    }); 
}); 

일부 노트 : 또한 $.post() (http://api.jquery.com/jquery.post/) 방법보다는 $.get() (http://api.jquery.com/jquery.get/)을 사용하고 POST 방법을 사용하여 데이터를 보낼 수 있습니다

• .
• event.preventDefault(); 양식이 정상적으로 제출되는 것을 중지시켜 자신의 코드로 제출을 처리 할 수 ​​있습니다.
• AJAX 콜백 내의 변수 response은 루비 스크립트가 양식 제출을 처리 한 후 출력하는 응답입니다. $.get() 호출
• $(this).serialize()
는 AJAX 호출에 양식 입력 데이터를 추가 : http://api.jquery.com/serialize/