html - Making JavaScript Work On Multiple Partials (Rails) -
i have partial being called through link_to_add_fields function:
<!-- links adding new questions questionset --> <div class="row"> <div class="col-sm-2"> add sub-question<br> • <%= link_to_add_fields "multiple choice", f, :questions %><br> • <%= link_to_add_fields "ordered answers", f, :ordered_questions %><br> • <%= link_to_add_fields "identification", f, :matching_questions %> </div> </div> the user clicks on 1 want, appropriate partial rendered. i'm having issue when rendering "identification" partial there assigned javascript functions, seem work on first partial called, , subsequent partials unresponsive.
<div> <script> // fix either edit functions or new functions working. // checks if fields empty when partial rendered (new) , if true doesn't run check functions. // otherwise we're on edit questionset , check functions run. $(document).ready(function () { if(($('#img_form').val() == false) && ($('#name_form').val() == false) && ($('#desc_form').val() == false)){ return; } else { check_name(); check_desc(); check_img(); } }); </script> <div class ="panel"> question contain (minimum 2 required): <br> <input type = "checkbox" name="name" id="name_checkbox" onclick="check_name_field()"> name <input type = "checkbox" name ="description" id="description_checkbox" onclick="check_description_field()"> description <input type = "checkbox" name ="image" id="image_checkbox" onclick="check_image_field()"> image </div> <div id="name_field" style="display: none"> <%= f.text_field :body, :placeholder => "name", :class => "form-control", :id => "name_form" %> </div> <div id="description_field" style="display: none"> <%= f.text_field :description, :placeholder => "description", :class => "form-control", :id => "desc_form"%> </div> <!-- todo not ruby way of doing it, other methods --> <!-- drop down list media tutor --> <div id="image_field" style="display: none"> <% @filepaths = dir.glob("public/uploaded_images/#{@tutor.media_directory}/*") %> <%= f.collection_select :image, @filepaths, :to_s, :to_s, {:include_blank => ''}, :id => "img_form" %> </div> </div> <!-- todo move javascript file in assets / clean code less repetitive / implement jquery --> <script> var name_checkbox = document.getelementbyid("name_checkbox"); var description_checkbox = document.getelementbyid("description_checkbox"); var image_checkbox = document.getelementbyid("image_checkbox"); var name_field = document.getelementbyid("name_field"); var description_field = document.getelementbyid("description_field"); var image_field = document.getelementbyid("image_field"); function check_name_field(){ if (name_checkbox.checked == true){ name_field.style.display = "unset"; } else if (name_checkbox.checked == false){ name_field.style.display = "none"; } } function check_description_field(){ if (description_checkbox.checked == true){ description_field.style.display = "unset"; } else if (description_checkbox.checked == false){ description_field.style.display = "none"; } } function check_image_field(){ if(image_checkbox.checked == true){ image_field.style.display = "unset"; } else if (image_checkbox.checked == false){ image_field.style.display = "none"; } } //both functions below check see if relevant field has data, if display it, otherwise keep hidden. function check_name(){ if($('#name_form').val()){ name_checkbox.checked = true; name_field.style.display = "unset"; } } function check_desc(){ if($('#desc_form').val()){ description_checkbox.checked = true; description_field.style.display = "unset"; } } function check_img(){ if($('#img_form').val()){ image_checkbox.checked = true; image_field.style.display = "unset"; } } function assign_id(){ var r = math.floor(math.random() * 6000) + 1 name_checkbox = document.getelementbyid("name_checkbox"); description_checkbox = document.getelementbyid("description_checkbox"); image_checkbox = document.getelementbyid("image_checkbox"); name_checkbox.id = ("name_checkbox" + r); description_checkbox.id = ("description_checkbox" + r); image_checkbox.id = ("image_checkbox" + r); name_field = document.getelementbyid("name_field"); description_field = document.getelementbyid("description_field"); image_field = document.getelementbyid("image_field"); name_field.id = ("name_field" + r); description_field.id = ("description_field" + r); image_field.id = ("image_field" + r); } </script> any appreciated.
Comments
Post a Comment