Rails JavaScript fonksiyonumu çalıştıramıyor

Yardım
,
1

Öncelikle herkese iyi forumlar.

Rails ile form uygulaması oluşturmaya çalışıyorum ve bu uygulamamda kullanıcı adlarını checkbox kullanarak kullanıcıya seçtirmem gerekiyor.

Burayı sorunsuz hallettim ama kullanıcının belirli bir seçimden sonra seçim yapamaması için şu javascript kodunu buldum ve app/javascript/edit_users.js dosyamın içine yapıştırdım:

function onlyOneCheckBox(limit) {
    var limit = limit;
    var checkboxgroup = document.getElementById('checkboxgroup').getElementsByTagName("input");
    for (var i = 0; i < checkboxgroup.length; i++) {
        checkboxgroup[i].onclick = function() {
            var checkedcount = 0;
            for (var i = 0; i < checkboxgroup.length; i++) {
                checkedcount += (checkboxgroup[i].checked) ? 1 : 0;
            }
            if (checkedcount > limit) {
                console.log("You can select maximum of " + limit + " checkbox.");
                alert("You can select maximum of " + limit + " checkbox.");
                this.checked = false;
            }
        }
    }
}

Kullanımı ise şu şekilde:

<%= javascript_pack_tag "edit_users"%>
<div id="checkboxgroup" class="form-check">
    <% @users.each do |user|%>
        <%= check_box_tag("selected_users[]", value = user.username, checked = false,class:"form-check-input")%>
        <%= form.label user.username,class:"form-check-label"%><br/>
    <%end%>
</div>
<script>
    onlyOneCheckBox(1);
</script>

Kodu direkt olarak html dosyamın içine yazarak çalıştırdığımda sıkıntısız çalışıyor ama başka dosyadan çağırdığım zaman istediğim gibi çalışmıyor.

Yardımcı olucak arkadaşlara şimdiden teşekkürler.

2

Geç olacak ama yine de yazayım.

JavaScript, bütün elementler tamamen yüklenmeden DOM ağacına tamamen erişemez. Rails ise yazdığınız javascript dosyalarını daha <%= javascript_pack_tag "edit_users"%> dediğiniz anda çalıştırıyor. Bakıyor ortalıkta istenen element (henüz) yok, çalışmıyor. Konsola baksaydınız hata çıktılarını görebilirdiniz.

Bunu aşmanın ilk yolu DOMContentLoaded eventi içerisinde fonksiyonu çalıştırmak. Tabii bunu tahmin ederek düşünüyorum, elde denemedim.

2 Beğeni