Как обновить один столбец, используя модал на одной странице на основе запроса AJAX - PullRequest
Новая
       16

Как обновить один столбец, используя модал на одной странице на основе запроса AJAX

0 голосов
/ 12 января 2019

У меня есть страница, которая содержит 3 блока, и все данные этих блоков необходимо обновить в одной таблице базы данных, поэтому я использовал для обновления всех из них по одному, используя частичный и пользовательский ajax.

Просмотр кода: 

.col-lg-3.col-md-3.col-sm-6.col-xs-6
    .box-bar
      h5.prodman Short Description
      br
      btn.btn-primary.btn-lg
        = link_to 'Edit', edit_product_path(@product, field: 'sd'), remote: true

  .col-lg-3.col-md-3.col-sm-6.col-xs-6
    .box-bar
      h5.prodman Long Description
      br
      btn.btn-primary.btn-lg
        = link_to 'Edit', edit_product_path(@product, field: 'ld'), remote: true

  .col-lg-3.col-md-3.col-sm-6.col-xs-6
    .box-bar
      h5.prodman T&Cs (General, Privacy, Fair Usage etc)
      br
      btn.btn-primary.btn-lg
        = link_to 'Edit', edit_product_path(@product, field: 'tc'), remote: true

После нажатия на ссылку_всуду загружается все это содержимое:

код edit.js.erb: 

<% field_name, field_title = get_field_name_title(params[:field]) %>

$('#dialog h4').html("<i class=' glyphicon glyphicon-pencil'></i> Update <%= field_title %>");

$('.modal-body').html('<%= j render('terms_field_form',{field_name: field_name}) %>');

$('#dialog').modal("show");

$('#dialog').on('shown.bs.modal', function () {

    CKEDITOR.replace('<%= "#{field_name}" %>');
});

$(document).on('click', '.update_terms', function () {
    $.ajax({
        type: 'PATCH',
        dataType: 'script',
        url: '<%= product_path(@product) %>',
        data: {
            "authenticity_token": $('input[name=authenticity_token]').val(),
            "product": {"<%= field_name %>": $('.terms_content').val()}
        }
    });
});

Частичный код: 

= text_area_tag "#{field_name}".to_sym, @product.send(field_name), class: 'form-control terms_content', id: field_name
= button_tag 'Submit', class: 'btn btn-primary mg-t-20 mg-b-20 mg-r-10 update_terms'

Динамические поля (столбцы и заголовки) код: 

def get_field_name_title(field)
    return 'short_description', 'Short Description' if field == 'sd'
    return 'long_description', 'Lease Terms' if field == 'ld'
    return 'terms_and_conditions', 'T&Cs (General, Privacy, Fair Usage etc)' if field == 'tc'
  end

Задача

Содержимое ящиков всегда остается неизменным. Значит, я обновляю «Длинное описание», и я обновлю его в БД, но если я попытаюсь обновить любой другой ящик, он снова покажет имя этого ящика (предыдущий, который я обновил). У меня сложилось впечатление, что при каждом клике и обновлении модальность остается неизменной, а при следующем клике ее добавление с существующим один раз. И это повторяет его до следующего клика. Итак, нажмите 1, в следующий раз я нажму 2, поэтому нажмите 1, нажмите 2. затем в следующий раз я нажал3, так что нажмите1, нажмите2, нажмите3. это проблема. Таким образом, нет нового свежего события для нового клика.

Есть ли какой-нибудь правильный способ сделать это, если мой процесс отстает от какой-либо функции?

1 Ответ

0 голосов
/ 14 января 2019

У вас есть проблемы, потому что вы не полностью посвятили себя одностраничной парадигме. Я не уверен во взаимодействии с CKEDITOR, но вижу 3 предупреждающих знака ... 

1)  Your update doesn't work, but create does
2)  Your code is randomly populating all of the fields with the same data
3)  Your code has no unique identifier for the fields in the css/html

Вам необходимо однозначно определить поля, которые будут изменены. 

Note:  all of this assumes that you are intending to treat each field separately as it's own form - I'm not sure you make a conscious decision about which strategy to use - so I'm just following the lead of the questions you seem to be asking - as I said in the rails/ruby chat - the simplest way is to make it all one form, have a single update button for it and be done

Ваши div или id для HTML-кода должны отражать этот факт, будучи обернутыми вокруг этих модальных полей.

Что позволит вам использовать для jquery .bind и прикрепить триггер только к этому полю, чтобы запустить обновление для сервера.

... пример того, как мы настраиваем html-класс / div для привязки jquery тоже ... 

Old:

.col-lg-3.col-md-3.col-sm-6.col-xs-6
    .box-bar
      h5.prodman Short Description
      br
      btn.btn-primary.btn-lg
        = link_to 'Edit', edit_product_path(@product, field: 'sd'), remote: true

Новое в классе - (не проверено, но общая идея): 

.sd-class    # -- note this can be any name, as long as sd/ld/tc aren't the same
  .col-lg-3.col-md-3.col-sm-6.col-xs-6
      .box-bar
        h5.prodman Short Description
        br
        btn.btn-primary.btn-lg
          = link_to 'Edit', edit_product_path(@product, field: 'sd'), remote: true

Далее вы просто устанавливаете привязку jquery на основе этого якоря - отвечали тысячи раз - Модальное обновление с помощью jquery .

Я предполагаю, что здесь - но CKEDITOR должен быть в состоянии взять это модальное поле, которое также правильно указано внутри div привязки, на который я указал вам ... см. Этот ответ, чтобы узнать, как проверить и найти элемент внутри другого, чтобы скормить это правильное поле. 

Note:  the other part is that CKEDITOR MIGHT need to be set to nil/initialized each time you call it, to ensure blank or set to the field using the unique class div we setup as an anchor

См. Этот ответ для помощи в выборе правильного поля с помощью jquery

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

...