jQuery를 사용하여 레일스 폼을 테이블에로드하십시오.

Question

이것은 며칠 동안 제 프로젝트를 죽였습니다.
표준 표가 있습니다. 이 같은 골격 뭔가 :

<table><tbody><tr><td>Stuff!</td></tr></tbody></table> 

나는 사용자가 테이블에 새 값을 추가 할 수 있도록하기 위해 jQuery를 사용하여 tbody에 인라인 레일 3 양식을로드하려합니다. 이것은 내 컨트롤러의 새 액션을 가져 오는 버튼으로 이루어지며 new.js.erb는 폼의 렌더링 된 부분을 단순히 테이블 앞에 추가합니다 ($("table tbody").prepend('<%= escape_javascript(render 'form') %>');). 여기

<tr> 
    <td> 
    <%= form_for @model, :remote => true do |f| %> 
    </td> 
    <td> 
    <%= f.text_field :column %> 
    </td> 
    <td> 
    <%= f.submit "Add" %> 
    <% end %> 
    </td> 
</tr> 

를 혼란이 시작되는 곳이다 :

양식 부분 자체가 이런 식 웹킷 브라우저와 IE이 예상 작품으로! 물론

<table> 
    <tbody> 
    <tr> 
     <td> 
     <form> 
     </form> 
     </td> 
     <td> 
     <input> 
     </td> 
     <td> 
     <input type="submit"> 
     <td> 
    </tr> 
    <tr>The list of values</tr> 
    </tbody> 
</table> 

, 양식이 시작 입력이 시작하기 전에, 동일한 셀에 종료 사실은, 뭔가 잘못 가고 붉은 깃발을 제기한다 : 결과 HTML은 다음과 같이 간다. 그러나, 양식은 여전히 ​​제출하고 완벽하게 그렇지 않으면 작동합니다.

Firefox에서는 그렇지 않습니다. 양식은 더이 같은 (도시 다른 모든 것이 동일하므로 추가되는 말머리 행 내부 단지 물건) 렌더링 :

<td> 
    <form> 
    </form> 
    <td> 
    <input> 
    </td> 
    <td> 
    <input type="submit"> 
    <td> 
</td> 

여기의 차이는 웹킷/IE 브라우저와는 달리, 파이어 폭스는 form에 모든 것을 던져이다 태그의 셀. 또한 양식이 전혀 작동하지 않습니다. 제출하지 않습니다. 요청이 전송되지 않습니다.

이제 내 연구의 일부에서 내가 여기서 만들고있는 큰 실수가 있다는 것을 알았지 만 그 차이점은 브라우저가 내가 다른 방식으로 버려둔 것을 렌더링하려고한다는 사실에서 비롯된 것입니다. 그걸 가지고 놀면서, 레일스 양식이 테이블과 상호 작용하는 방식과는 거의 관계가 없다는 것을 알아 냈습니다. 테이블 내부에서 부분을 렌더링하면 브라우저간에 HTML이 동일합니다 (양식 태그는 다른 입력 전에 계속 닫힙니다.) 그래도, 나는 잘못된 위치에 < %%%%>를 두겠다는 의미 일 수 있습니다!). jQuery를 사용하여 렌더링 된 부분을 미리 배치 할 때 뭔가 잘못되었습니다. 아마도 테이블 태그를 포함하지 않아 부분 렌더링이 잘못되어 테이블에 삽입되어 문제를 일으킬 수 있습니다.

정말로, 나는 어려움을 겪었습니다. 나는이 사실을 광범위하게 찾아 보았고 어떤 접선으로 관련된 질문은 없었지만 아무 것도 정말로 내 문제에 부딪치지 않는 것 같습니다.

나는 아주 간단한 실수를하기를 기대하고있다. 그러나 그것은 무엇인가?

어떤 도움을 주시면 감사하겠습니다. 가능한 한 명확하게 문제를 설명했기를 바랍니다.

Answer 1

부분적으로 보면 매우 분명합니다. 중첩 오류가 있습니다. 일부 요소 (이 경우 테이블 셀) 내부에서 양식 태그를 열면 해당 요소도 닫아야합니다. 마크 업의 유효성 검사는 이러한 종류의 경우에 도움이됩니다.

표를 사용해야하는 경우 양식 태그를 붙여서 전체 내용을 페이지에 삽입 할 수 있습니다.