Как добавить динамические флажки на основе ввода формы? - PullRequest
Новая
       5

Как добавить динамические флажки на основе ввода формы?

1 голос
/ 30 сентября 2019

Контекст Пользователь может заполнить форму заказа, в которой можно выбрать bike_type и, следовательно, опции, принадлежащие этому bike_type.

Текущая ситуация В зависимости от пользователяввод ('bike_type') в столбце simple_form, я хотел бы включить флажок со всеми потенциальными опциями ('опции), где можно выбрать несколько опций. В настоящее время я могу:

  • (Ситуация 1) Отобразить все параметры для соответствующего типа bike_type через Ajax в представлении, но, к сожалению, они не отправляются в параметрах.

  • (Ситуация 2) Отображение все опции для всех велосипедов , эти вставлены в параметры и правильно сохранены, но это не правильнопоскольку пользователи должны иметь возможность выбирать только те опции, которые относятся к bike_type.

HTML Я думаю, что ошибка заключается в вставке опций в JSсписок флажков. Я попытался имитировать HTML, показанный ниже, но я не могу понять, как это правильно. Поэтому, пожалуйста, найдите несколько печатных экранов HTML-различий ниже.

Неправильный HTML, который неправильно вставлен в следующие параметры:

Incorrect html that is not inserted

Правильный HTML-код, который вставляется (поскольку он отображает все параметры, включая различные параметры велосипеда в представлении) ниже: Incorrect html that is inserted but provides the wrong view

форма 

<%= simple_form_for [@bike_store, @order] do |f|%>
  <%= f.collection_check_boxes :option_ids, Option.all, :id, :name do |b| %>
    <div class="collection-check-box", id='test-options'>
      <%= b.check_box %>
      <%= b.label %>
    </div>
  <% end %>
  <%= f.submit %>
<% end %>

script 

<script >
  $(document).on("change", "#bike_type", function(){
    var bike_type = $(this).val();

   $.ajax({
    url: "/bike_stores/<%= @bike_store.id %>/orders/new",
    method: "GET",
    dataType: "json",
    data: {bike_type: bike_type},
    error: function (xhr, status, error) {
      console.error('AJAX Error: ' + status + error);
    },
    success: function (response) {
      console.log(response);

      // test
      $("#test-options").html("");
      $("#test-options").append("");
      for(var i=0; i< options.length; i++){
        $("#test-options").append('<input type="checkbox" value="' + options[i]["id"] + '">' + options[i]["name"] + '');
      }
      // test

    }
  });
});
</script>

controller.rb 

def new
    @bike_store = BikeStore.find(params[:bike_store_id])
    @order = Order.new
    @orders = @bike_store.orders
    @order.order_options.build
    @options = []

    # Display options for bike_type
    if params[:bike_type].present?
      @options =  BikeType.find(params[:bike_type]).options
    end
    if request.xhr?
      respond_to do |format|
        format.json {
        render json: {options: @options}
      }
    end
  end
    # test
    authorize @order
  end

  def create
    @order = Order.new(order_params)
    @bike_store = BikeStore.find(params[:bike_store_id])
    @order.bike_store = @bike_store
    @order.order_contact = @order_contact
    authorize @order
    @order.save
    redirect_to root_path
  end

private
def set_order
    @order = order.find(params[:id])
  end

  def order_params
    params.require(:order).permit(:arrival, :departure, :order_contact_id,
      order_bikes_attributes: [:id, :bike_id, :bike_quantity, :_destroy,
        bikes_attributes: [:id,:name, :bike_type_id,
          bike_types_attributes: [:id, :name]]],
      order_options_attributes: [:id, :option_id, :option_quantity, :_destroy,
        options_attributes: [:id, :name, :bike_type_id, :description,
          bike_types_attributes:[:id, :name]]])
  end

1 Ответ

1 голос
/ 30 сентября 2019

Если проблема заключается только в отображении правильных полей ввода, то вы можете использовать следующий подход:

Это фрагмент кода для отображения параметров выбора для событий, основанных на возрастной группе пользователя. твое: 

.done(function (events){

                    var select = document.getElementById( "events-dropdown" );
                        while(select.length >0){
                            select.remove(select.length-1);
                        }
                        var option;
                    if( Object.keys( events ).length > 0){
                        events.forEach(function( event ) {
                                option = document.createElement( 'option' );
                                option.value = event.id;
                                option.textContent = event.title;
                                select.add( option );
                            });
                    }
                    // no events found for particular gender AND age group
                    else{ 
                        option = document.createElement( 'option' );
                        option.value ='';
                        option.textContent= 'Sorry! No events found for your age group';
                        option.disabled = true;
                        select.add( option );
                    }

                    });
...