레일즈, JQuery, 고치 및 선택을 사용하여 페이지에 양식을 만듭니다. 이 응용 프로그램은 식당 메뉴를 만드는 데 사용됩니다.새 div를 동적으로 생성 한 후 "selectize-dropdown-content"가 비어 있습니다.
/menu/new에는 메뉴 이름 (예 : '점심')을 입력 할 수있는 페이지와 '메뉴 항목 추가'및 '메뉴 만들기'버튼이 있습니다. 메뉴 항목을 추가하기 위해 클릭 할 때 카테고리, 항목 이름, 가격 및 설명 필드가있는 양식이 나타납니다. 원하는만큼 메뉴 항목을 추가 할 수 있습니다.
모든 것이 정상적으로 작동하므로 내 문제는 기능 중 하나가 아닙니다. 만들기 동작은 메뉴, 메뉴 항목 및 메뉴 항목 범주를 원하는대로 만듭니다. 내 문제는 선택입니다.
"새 메뉴 항목 추가"를 클릭하면 이전에 언급 한 메뉴 항목의 양식이 제공되고 "양식"은 이전에 작성한 범주의 드롭 다운 목록입니다. 문제는,리스트는 한 번에 페이지의 형태 중 하나 채워입니다 :
Like so
당신이 볼 수 있듯이, 단지 새로운 형태의 범주 드롭 다운에 데이터를 표시합니다. 페이지에 나타나는 처음 두 개가 이제 비어 있습니다. 데이터는 여전히 있지만 표시되지 않습니다. 이전 메뉴 항목 양식을 가져와 카테고리 목록을 표시하는 방법을 알 수 없습니다.
'메뉴 만들기'를 누르면 데이터가 올바르게 저장되므로 이것은 순전히 화장품입니다. 그러나 새 메뉴 항목을 추가하기 위해 클릭 한 후 범주를 편집하려는 경우 문제가됩니다.
$('form').on('cocoon:after-insert', function() { $('.selectize').selectize(); });
양식 :
다음은 jQuery의
<div class="field"> <%= f.select :category_id, Category.all.pluck(:name, :id), {}, { class: "selectize" } %> </div>
그냥 확인 : 링크를 클릭하여 새 메뉴 항목을 추가 할 때까지 선택 상자에 올바른 내용이 표시됩니다. 맞습니까? 콜백이 페이지의 _all_ select-boxes를 선택하고'selectize'를 다시 적용하면 그 효과를 설명 할 수 있습니까? 또는 페이지로드/새로 고침시 기존 항목의 선택 상자가 손상됩니까? – nathanvda
부분적으로 정확합니다."새 항목 추가"가 클릭 될 때까지 하나의 선택 상자 만 올바른 내용을 표시합니다. 그 다음에는 나타나는 새로운 선택 상자에 원하는 드롭 다운 내용이 표시됩니다. 왜 이런 식으로 행동하는지 모르겠습니다. FWIW 페이지에 새 div를 추가 한 후 이전 div를 숨김으로써 해결 방법을 찾았습니다. 이상적은 아니지만 최소한 문제가 덜 발생했습니다. 객체는 올바르게 표시되지 않더라도 제출을 치면 올바른 값을 유지하므로 데이터베이스에 올바르게 저장됩니다. –
selectize 클래스를 제공하지 않으면 작동합니까? – nathanvda