0
\$\begingroup\$

I have some JS code that when the user clicks the "add" button, some text is displayed to a textarea.

The code seems to be working OK. However, I realize I must refactor the code so that I am using only the one on click function instead of the six that I have for each of the 6 add buttons.

$('#row_split_id_cover_letter_details_first_paragraph').prepend('<div id="id_standard_suggestion_01" class="cover_letter_suggestion_content margin-bottom-15"><span id="id_1a1" class="margin-bottom-15">Standard Sentence Number 1.1. </span><span class="cover_letter_suggestion_add_button"><button id="id_add_standard_suggestion_paragragh01_01" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button></span></div><div id="id_standard_suggestion_02" class="cover_letter_suggestion_content margin-bottom-15"><span id="id_1a2" class="margin-bottom-15">Standard Sentence Number 1.2. </span><span class="cover_letter_suggestion_add_button"><button id="id_add_standard_suggestion_paragragh01_02" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button></span></div><div id="id_standard_suggestion_03" class="cover_letter_suggestion_content margin-bottom-15"><span id="id_1a3" class="margin-bottom-15">Standard Sentence Number 1.3. </span><span class="cover_letter_suggestion_add_button"><button id="id_add_standard_suggestion_paragragh01_03" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button></span></div><div id="id_standard_suggestion_04" class="cover_letter_suggestion_content margin-bottom-15"><span id="id_1a4" class="margin-bottom-15">Standard Sentence Number 1.4. </span><span class="cover_letter_suggestion_add_button"><button id="id_add_standard_suggestion_paragragh01_04" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button></span></div><div id="id_standard_suggestion_05" class="cover_letter_suggestion_content margin-bottom-15"><span id="id_1a5" class="margin-bottom-15">Standard Sentence Number 1.5. </span><span class="cover_letter_suggestion_add_button"><button id="id_add_standard_suggestion_paragragh01_05" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button></span></div><div id="id_standard_suggestion_06" class="cover_letter_suggestion_content margin-bottom-15"><span id="id_1a6" class="margin-bottom-15">Standard Sentence Number 1.6. </span><span class="cover_letter_suggestion_add_button"><button id="id_add_standard_suggestion_paragragh01_06" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button></span></div>');

$(function () {
    $('#id_add_standard_suggestion_paragragh01_01').on('click', function () {
        var divTA1 = document.getElementById('id_cover_letter_details_first_paragraph');
        var divGS1 = document.getElementById('id_1a1');
        divTA1.innerHTML = divTA1.innerHTML + divGS1.innerHTML;
    });

    $('#id_add_standard_suggestion_paragragh01_02').on('click', function () {
        var divTA1 = document.getElementById('id_cover_letter_details_first_paragraph');
        var divGS1 = document.getElementById('id_1a2');
        divTA1.innerHTML = divTA1.innerHTML + divGS1.innerHTML;
    });

    $('#id_add_standard_suggestion_paragragh01_03').on('click', function () {
        var divTA1 = document.getElementById('id_cover_letter_details_first_paragraph');
        var divGS1 = document.getElementById('id_1a3');
        divTA1.innerHTML = divTA1.innerHTML + divGS1.innerHTML;
    });

    $('#id_add_standard_suggestion_paragragh01_04').on('click', function () {
        var divTA1 = document.getElementById('id_cover_letter_details_first_paragraph');
        var divGS1 = document.getElementById('id_1a4');
        divTA1.innerHTML = divTA1.innerHTML + divGS1.innerHTML;
    });

    $('#id_add_standard_suggestion_paragragh01_05').on('click', function () {
        var divTA1 = document.getElementById('id_cover_letter_details_first_paragraph');
        var divGS1 = document.getElementById('id_1a5');
        divTA1.innerHTML = divTA1.innerHTML + divGS1.innerHTML;
    });

    $('#id_add_standard_suggestion_paragragh01_06').on('click', function () {
        var divTA1 = document.getElementById('id_cover_letter_details_first_paragraph');
        var divGS1 = document.getElementById('id_1a6');
        divTA1.innerHTML = divTA1.innerHTML + divGS1.innerHTML;
    });
});

Here is a working fiddle.

\$\endgroup\$
  • \$\begingroup\$ "Refactoring" is not needed in titles. Every question here is about refactoring. \$\endgroup\$ – Jamal Nov 25 '15 at 7:52
  • \$\begingroup\$ @Jamal - Ah, I understand now! 1st time noob. \$\endgroup\$ – user3354539 Nov 25 '15 at 8:36
1
\$\begingroup\$

Don't add HTML in DOM from jQuery, add it from server side.

Changes in HTML

  1. Removed all ids as it is not used
  2. Removed redundant attribute type="button" from buttons.

Use HTML structure as follow:

<div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.1. </span>
    <span class="cover_letter_suggestion_add_button">
        <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
    </span>
</div>
<div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.2. </span>
    <span class="cover_letter_suggestion_add_button">
        <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
    </span>
</div>
<div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.3. </span>
    <span class="cover_letter_suggestion_add_button">
        <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
    </span>
</div>
<div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.4. </span>
    <span class="cover_letter_suggestion_add_button">
        <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
    </span>
</div>
<div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.5. </span>
    <span class="cover_letter_suggestion_add_button">
        <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
    </span>
</div>
<div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.6. </span>
    <span class="cover_letter_suggestion_add_button">
        <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
    </span>
</div>

Javascript

  1. Use common class to bind event on all elements, cover_letter_suggestion_add_button in this case
  2. Use the DOM traversal methods to get the elements corresponding to the clicked element, using $(this) to reference to clicked element and prev to get the previous sibling.

Code:

$(document).ready(function () {
    $('.cover_letter_suggestion_add_button button').on('click', function () {
        // Get text of the previous span element
        var text = $(this).closest('.cover_letter_suggestion_add_button').prev().text();

        $('#id_cover_letter_details_first_paragraph').val(function (i, oldVal) {
            return oldVal + text; // Append the value of the prev. span to the textarea
        });
    });
});

Demo

$(document).ready(function() {
  $('.cover_letter_suggestion_add_button button').on('click', function() {
    var text = $(this).closest('.cover_letter_suggestion_add_button')
      .prev().text();
    $('#id_cover_letter_details_first_paragraph').val(function(i, oldVal) {
      return oldVal + text;
    });
  });
});
.cover_letter_suggestion_content {
  background-color: #ededed;
  border: 1px solid #a8a8a8;
  padding: 10px;
}
.cover_letter_suggestion_add_button {
  display: block;
  text-align: right;
}
.textAreaSplit {
  height: 200px;
  max-height: 600px;
  max-width: 50%;
  min-height: 100px;
  min-width: 50%;
  resize: vertical;
}
.textAreaSplitContainer {
  background-color: #f6f6f6;
  border: 1px solid #d9d9d9;
  display: inline-block;
  height: 200px;
  max-height: 600px;
  max-width: 45%;
  min-height: 100px;
  min-width: 45%;
  overflow: scroll;
  overflow-x: hidden;
  padding: 10px;
  resize: none;
  /* container is resized by resizing the textarea */
  vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="row_id_cover_letter_details_first_paragraph" class="form-group  ">
  <label for="id_cover_letter_details_first_paragraph" class="control-label ">Paragraph 1:</label>
  <div class="controls ">
    <span id="row_id_cover_letter_details_first_paragraph">
            <textarea cols="40" data-parsley-maxlength="2000" id="id_cover_letter_details_first_paragraph" maxlength="2000" name="cover_letter_details_first_paragraph" rows="10" class="textAreaSplit kmw-disabled keymanweb-font" data-parsley-id="8695" data-parsley-required="false"></textarea>
            <span class="parsley-errors-list" id="parsley-id-8695"></span>
    </span>
    <p class="help-block">2,000 character limit</p>
  </div>
  <div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.1. </span>
    <span class="cover_letter_suggestion_add_button">
            <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
        </span>

  </div>
  <div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.2. </span>
    <span class="cover_letter_suggestion_add_button">
            <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
        </span>

  </div>
  <div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.3. </span>
    <span class="cover_letter_suggestion_add_button">
            <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
        </span>

  </div>
  <div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.4. </span>
    <span class="cover_letter_suggestion_add_button">
            <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
        </span>

  </div>
  <div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.5. </span>
    <span class="cover_letter_suggestion_add_button">
            <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
        </span>

  </div>
  <div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.6. </span>
    <span class="cover_letter_suggestion_add_button">
            <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
        </span>

  </div>
</div>

\$\endgroup\$
  • \$\begingroup\$ @user3354539 Check Demo \$\endgroup\$ – Tushar Nov 25 '15 at 6:03
  • \$\begingroup\$ @Tashar, I don't understand, your demo is not working. Nothing happens on click of Add button. \$\endgroup\$ – user3354539 Nov 25 '15 at 6:44
  • \$\begingroup\$ @user3354539 You've to first type some text in textarea and then click on add button \$\endgroup\$ – Tushar Nov 25 '15 at 6:45
  • \$\begingroup\$ @Tashar, that is not the functionality of the original code. Why did you change the functionality? What you did makes no sense! Take a look at the fiddle I supplied for the actual functionality. \$\endgroup\$ – user3354539 Nov 25 '15 at 7:28
  • \$\begingroup\$ @user3354539 Can you please explain what is the code in question doing and what is expected \$\endgroup\$ – Tushar Nov 25 '15 at 7:29
2
\$\begingroup\$

You can utilize data attribute in the button to assign the span id to it. For instance <button id="id_add_standard_suggestion_paragraph01_01" data-span-target="id_1a1" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button>. By doing this, you can use it inside the click event. Javascript should be as per below

$(function () {
    $("button[id^='id_add_standard_suggestion_paragraph']").on('click', function(){
        var divTA = $('#id_cover_letter_details_first_paragraph');
        var spanTarget = $(this).data('span-target');
        divTA.append($("#" + spanTarget).html());
    });   
});

DEMO

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.