ruby ​​on rails coffeescript 입력 양식

Question

난 레일 애플 리케이션에서 fullcalender를 사용하고 있습니다.

select: (start, end, allDay) -> 
    title = prompt("Event Title:", "") 
    hours = prompt("Hours", "") 
    if title 
    ... 

대신 2 개 프롬프트 코드 라인을 사용하여, 나는이 두 데이터 필드 작은 팝업 창을 가지고 싶습니다 나는 다음과 같은 커피 스크립트 코드가 있습니다. 어떻게해야합니까? 부트 스트랩 모달을 사용해야합니까?

감사

OK --- 나는이 모달을 생성하고 잘 표시

<div id="calModal" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Create Labor</h3> 
    </div> 
    <div class="modal-body"> 
    <form class="form-inline" method="get"> 
     <input type="text" id="title" class="input" placeholder="Title" name="title"> 
     <input type="floating" id="hours" class="input" placeholder="Hours" name="hours"> 
    </form> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div>` 

그러나, 제목 값과 시간 내 커피 스크립트 코드의 나머지 부분에서 사용할 수 없습니다 :

select: (start, end, allDay) -> 
     $('#calModal').modal('show') 
     title = $(".modal-body #title").val 
     hours = $(".modal-body #hours").val 
     if title 
     $.create "/events/", 
      event: 
      title: title, 
      starts_at: "" + start, 
      ends_at: "" + end, 
      all_day: allDay, 
      workorder_id: 1, 
      # need a modal for inputing these fields 
      hours: hours, 
      employee_id: 1 
      # pickup the current employee 
     $('#calendar').fullCalendar('refetchEvents')` 

이 문은 작동하지 않습니다 :

,966,

Answer 1

코드에 몇 가지 오류가 있지만 중요한 것은 이벤트 핸들러를 변경 사항 저장 버튼에 바인딩해야한다는 것입니다. 코드에서 모달을 표시 한 직후에 #title 및 기타 필드의 값이 나타날 것으로 기대하고 있지만 물론 그렇지 않을 것입니다. 변경 사항 저장 버튼의 이벤트 핸들러는 1) 모달을 닫고 2) 양식 필드의 값을 확인해야합니다.

나는 쉽게 참조 할 변경 사항 저장 버튼에 ID를 추가했다 :

<button id="savebtn" class="btn btn-primary">Save changes</button> 

을하고 또한 jQuery.val()를 호출 할 필요가있을 때 당신이 jQuery.val을 사용하고 있음을 발견 - 즉, 전화를 메서드를 그냥 참조하기보다는

다음 Coffeescript는 페이지로드시 모달을 열고 변경 사항 저장을 클릭하고 양식 필드 값을 자바 콘솔에 기록 할 때 모달을 닫습니다 (나는 coffeescript 1.3.1을 그대로 사용했습니다). 내가 무슨 일이 있었는지)

$ -> 
    $('#savebtn').bind 'click', (event) => 
     $("#calModal").modal('hide') 
     title = $(".modal-body #title").val() 
     hours = $(".modal-body #hours").val() 
     console.log title 
     console.log hours 
     return 


    $('#calModal').modal('show') 

위의 스 니펫이 작동하면 나머지 코드가 제대로 작동 할 수있게됩니다.