How to update single column using modal on one page based on ajax request

Question

I have page who contains 3 boxes and all of these boxes's data need to update in one db table so I used to update all of them one by one using partial and custom ajax.

View Code:

.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

Upon clicking link_to the modal loads all those content:

edit.js.erb code:

<% 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()}
        }
    });
});

Partial Code:

= 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'

Dynamic fields (column and titles ) code:

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

Problem

The boxes contents always remain same. Means, I am updating 'Long Description' and I will update it in db but if I try to update any other box it show the name of that box again ( the previous one I updated ). I got an impression that on each click and updation the modal stay same and on next click its adding with existing once. And it iterates it to next click. So, click1, next time I clicked2, so click1,click2. then next time i clicked3, so click1,click2,click3. this is the issue. So, no new fresh event to new click.

Is there any proper way to do it if my process lags any feature?

Answer 1

You are having issues because you haven't fully committed to the single page paradigm. I'm not sure of the interaction with CKEDITOR, but the 3 warning signs I see ...

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

You need to uniquely identify the fields which will be altered.

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

Your div or id for the html code needs to reflect this fact, by being wrapped around those modal fields.

Which will allow you to use to jquery .bind & attach a trigger on just that field to run the update against server.

... example of us setting up a html class/div to anchor the jquery too ...

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

New with class - (not tested but general idea):

.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

Next your simply setup an jquery binding based on that anchor - answered thousands of times - Modal updating with jquery.

I'm guessing here - but CKEDITOR should be able to take that modal field that is properly pointed too inside the anchoring div I pointed out to you ... see this answer for how to test and locate an element inside another to feed it the right field.

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

See this answer for help selecting the right field with jquery

I feel like most of your issue is the code you wrote doesn't explicitly tell CKEDITOR where to find the information it's targeting & it's not reseting after each run. So you might have to initialize CKEDITOR each time - see their forums for help on that one.