Dynamisch injiziert Formularfeld nicht während Formulareinreichung

Question

<%= simple_form_for @product, method: :post, url: save_item_path do |f| %> 
    <tr> 
     <td> 
      Category 
     </td> 
     <td> 
      <%= f.input :category_id, collection: Category.all, label: false, prompt: 'Select your category', required: true ,required: true %> 
     </td> 
    </tr> 

    <div class="row " style="height:100px;width:100%"> 
     <div class="col-md-5 sub-cat-dropdown"> 
      <select class="select required sub-cat" required="required" name="product[sub_id]"><option value="">Select your sub category</option><option value="15">Bottle</option><option value="16">Charger</option></select> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-3 col-md-offset-5"> 
      <%= f.submit :submit %> 
     </div> 
    </div> 

<% end %>  

vorgelegt kommt das Formular mit allen params vorgelegt wird, die erforderlich sind .. hier ist die params

{"utf8"=>"✓", "authenticity_token"=>"4gY7lWgSqo6j4UoZ78iv1nsaMq9TUXLXE2oQzlqqyh3I3oED3CxwM04cB1n5P+Nz81O3Vvk+/NDPxixNey/J9Q==", "product"=>{"name"=>"vamsi", "price"=>"456", "availability"=>"true", "about"=>"aerg", "ref"=>"456", "texture"=>"rdgg", "shipping"=>"ewataewrg", "category_id"=>"13", "notes"=>"feartg", "packaging"=>"wer5tyy", "sub_id"=>"15"}, "commit"=>"submit", "controller"=>"items", "action"=>"create"} 

in der obigen params-Hash, können Sie sub_id eingereicht werden.

Allerdings hat die Unterkategorie Dropdown dynamisch generiert werden, basierend auf Auswahl der Hauptkategorie.

So ist der Unter cat-Drop-Down-div ist wie diese

<div class="row " style="height:100px;width:100%"> 
     <div class="col-md-5 sub-cat-dropdown"> 

     </div> 
</div> 

geleert Ich versuche, einen select-Tag in dem Unter-cat-Drop-Down zu injizieren, auf Klicken der Hauptkategorie Dropdown

hier ist der Code, den ich geschrieben habe

$(document).ready(function(){ 

    //this function is supposed to create a dropdown of sub category 
    //based on the main category dropdown 

    $('#product_category_id').on('change', function(){ 

     var values = []; 
     var inner_contents = []; 

     if(this.value === undefined){ 
      return; 
     }else{ 
      $main_category = this.value; 
      $main_category_length = $cat_obj[$main_category].length; 
      for (var i=0;i<$main_category_length;i++){ 
       values.push($cat_obj[$main_category][i].id); 
       inner_contents.push($cat_obj[$main_category][i].name); 
      } 

      $('.sub-cat-dropdown').empty(); 
      inject_sub_category(values, inner_contents); 
     } 

    }); 



    // this function injects a dropdown of sub categories, just below the categories ... 


    function inject_sub_category(value_array, inner_html_array){ 

     var select = document.createElement("select"); 
     select.setAttribute("class","select required sub-cat"); 
     select.setAttribute("required","required"); 
     select.setAttribute("name","sub_id"); 

     // the above will create this 
     // <select class ="select required form-control" 
     //     required = "required"  
     //     name = "product[sub_id]" 
     //     id = "sub_cat_id"> 
     // </select>    

     $('.sub-cat-dropdown').append(select); 


     // setting the default option 

     var default_option = document.createElement("option"); 
     default_option.setAttribute("value","") 
     default_option.innerHTML = default_option.innerHTML + "Select your sub category"; 
     select.appendChild(default_option); 
     // injecting <option value> Select your category </option> under select tag 

     // creating options of subcategories, and injecting under the select element as children 
     for(var i = 0 ; i< value_array.length ; i++){ 
      var option_element = document.createElement("option"); 
      option_element.setAttribute("value",value_array[i]); 
      option_element.innerHTML = option_element.innerHTML + inner_html_array[i]; 
      select.appendChild(option_element) 
     } 



    } 


     // this is supposed to read the json data of the categories and sub categories 

     $.ajax({ 
     url: "http://localhost:3000/categories_api/show", 
     type: 'GET', 
     dataType: 'json', 
     success: function(res) { 
       $cat_obj = res; 
     } 
    }); 

}); 

Was oben Code tut, ist es soll ein Auswahl Dropdown einzufügen .. innerhalb der Sub-cat-Drop-Down-

Die select-Tag, das eingeführt wird, so aussieht, von Browser kopiert

<div class="col-md-5 sub-cat-dropdown" style="-webkit-user-select: text;"><select class="select required sub-cat" required="required" name="product[sub_id]"><option value="">Select your sub category</option><option value="15">Bottle</option><option value="16">Charger</option></select></div> 

Aber, wenn das Formular Vorlage geschieht, ist params nicht sub_id

{"utf8"=>"✓", "authenticity_token"=>"zUVF55KdvQ4l8nBjtlIcofqHECgd3/pIi7U97cF0xbrnnf9xJqNns8gPPSOgpVAEcs6V0bewdE9XGQFu4PHGUg==", "product"=>{"name"=>"jdkrfb", "price"=>"89", "availability"=>"true", "about"=>"sfukb", "ref"=>"78678", "texture"=>"jkdfbjkrbg", "shipping"=>"jkdfsk", "category_id"=>"12", "notes"=>"jhhdfvbj", "packaging"=>"sajkf"}, "commit"=>"submit", "controller"=>"items", "action"=>"create"} 

ich dieses Problem habe für Nach einigen Stunden wird jede Hilfe sehr geschätzt.

Meine Beobachtungen:

Es gibt kein Problem mit dem Ajax-Aufruf ist, und die Funktionen, die den select-Tag generieren. Ich kann sehen, dass das DOM das generierte select-Tag hat und ein Kind von sub-cat-dropdown ist.

Der statische des select-Tag sub_id vorgelegt bekommen, aber für den dynamisch man es nicht der Fall ist. es ist nicht

Answer 1

In Javascript eingereicht, können Sie keine Ereignis-Listener auf dynamisch erstellte Elemente hinzufügen, auch wenn man sie in DOM zu sehen. Aus diesem Grund befindet sich Ihre dynamisch erstellte Auswahloption in DOM, ist jedoch nicht in Ihren Formulardaten enthalten. Versuchen Sie, den Auswahleingang statisch zu halten und die darin enthaltenen Optionen dynamisch zu halten.

<div class="row " style="height:100px;width:100%"> 
<div class="col-md-5 sub-cat-dropdown"> 
    <select class="select required form-control" required="required" name="product[sub_id]" id="sub_cat_id"> 
    </select>  
</div> 
</div> 

statt

<div class="row " style="height:100px;width:100%"> 
<div class="col-md-5 sub-cat-dropdown"> 
</div> 
</div> 

und dann die Optionen innerhalb Auswahleingang durch Javascript ändern -

function inject_sub_category(value_array, inner_html_array){ 

    // setting the default option 

    var default_option = document.createElement("option"); 
    default_option.setAttribute("value","") 
    default_option.innerHTML = default_option.innerHTML + "Select your sub category"; 
    $("#sub_cat_id").append(default_option); 
    // injecting <option value> Select your category </option> under select tag 

    // creating options of subcategories, and injecting under the select element as children 
    for(var i = 0 ; i< value_array.length ; i++){ 
     var option_element = document.createElement("option"); 
     option_element.setAttribute("value",value_array[i]); 
     option_element.innerHTML = option_element.innerHTML + inner_html_array[i]; 
     $("#sub_cat_id").append(option_element) 
    } 

} 

es eine andere Art und Weise ist es event delegation mit zu tun.