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

Popular posts from this blog

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

php - How to remove letter in front of the word laravel -

minify - Minimizing css files -