1

I am adding a block content by appending it to a div on a button click. The issue is that, it is adding the content below the button Add Section. It should add the content above the Add Section button, i.e where it is commented. My code is as follows:

Can someone please help ? I want the content to be added above div class="g" each time I click the Add Section button.

<div class="a">
    <div class="b">
        <div class="c">
            <input type="text" id="user-title-1" class="d" value="user 1">
            <button class="mdl-button mdl-js-button edit-title-btn">
            </button>
        </div>

                <div class="e">
                    <ul>  
                            for (int j = 1; j <= numOfCheckboxes; j++)
                            {
                                <li>
                                    <input type="checkbox" id="user-@j-1">
                                    <label for="user-@j-1"><i class="icon-tick" disabled></i></label>
                                </li>
                            }
                        }
                    </ul>

                <div class="f">
                    <small class="_availability">
                        <span class="title"> Section 1 </span>
                    </small>

                    <button type="button" class="mdl-button btn-show js-show-supplier">
                        <span class="show">Show <i class="icon-show"></i></span>
                    </button>
                </div>
            </div>

        <!-- New section to be added here
            //
        -->

            <div class="g">
                <button type="button" class="mdl-button add-Section-btn js-add-Section">
                    AddSection
                </button> &nbsp; &nbsp;
                <button type="button" class="mdl-button secondary-btn js-save">
                    Save
                </button>
            </div>

    </div>
</div>  


<script>

    $(document.body).on('click', 'button.js-add-Section', function () {
                var content = `<div class="e">
                    <ul>  
                            for (int j = 1; j <= numOfCheckboxes; j++)
                            {
                                <li>
                                    <input type="checkbox" id="user-@j-1">
                                    <label for="user-@j-1"><i class="icon-tick" disabled></i></label>
                                </li>
                            }
                        }
                    </ul>
                    <div class="f">
                    <small class="_availability">
                        <span class="title"> Section 1 </span>
                    </small>

                    <button type="button" class="mdl-button btn-show js-show-supplier">
                        <span class="show">Show <i class="icon-show"></i></span>
                    </button>
                </div>
            </div>`

            $(this).closest('.b').append(content);
    });

</script>

3 Answers 3

3

Just change append() function to insertBefore()

Here is an working example

$(document.body).on('click', 'button.js-add-Section', function() {
  var content = `<div class="e">
                    <ul>
                      <li>
                        <input type="checkbox" id="user-@j-1">
                        <label for="user-@j-1"><i class="icon-tick" disabled></i></label>
                      </li>
                    </ul>
                    <div class="f">
                    <small class="_availability">
                        <span class="title"> Section 1 </span>
                    </small>

                    <button type="button" class="mdl-button btn-show js-show-supplier">
                        <span class="show">Show <i class="icon-show"></i></span>
                    </button>
                </div>
            </div>`;

  $(content).insertBefore($(this).closest('.g'));
});

$(document.body).on('click', 'button.js-show-supplier', function() {
  alert('Clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <div class="b">
    <div class="c">
      <input type="text" id="user-title-1" class="d" value="user 1">
      <button class="mdl-button mdl-js-button edit-title-btn">
            </button>
    </div>

    <div class="e">
      <ul>
        <li>
          <input type="checkbox" id="user-@j-1">
          <label for="user-@j-1"><i class="icon-tick" disabled></i></label>
        </li>
      </ul>

      <div class="f">
        <small class="_availability">
          <span class="title"> Section 1 </span>
        </small>

        <button type="button" class="mdl-button btn-show js-show-supplier">
          <span class="show">Show <i class="icon-show"></i></span>
        </button>
      </div>
    </div>

    <div class="g">
      <button type="button" class="mdl-button add-Section-btn js-add-Section">
         AddSection
      </button> &nbsp; &nbsp;
      <button type="button" class="mdl-button secondary-btn js-save">
        Save
      </button>
    </div>
  </div>
</div>

EDIT

Do you mean something like this?

$(".main").on('change', '.js-cars-itemas [type="checkbox"]', function() {
  var idx = $(this).closest('li').index(); //Get the index - Number in order
  var chk = $(this).is(":checked"); //Get if checked or not
  var obj = this; //Checkbox object

  $(this).closest('.cars').find('.js-cars-itemas').each(function() { //Loop every js-cars-item
    //Find the checkbox with the same index of clicked checkbox. Change disabled property
    $(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false);
  });

  var checkeds = [];
  $(this).closest(".cars").find(".cars-itemas input:checkbox:checked").each(function(index) {
    checkeds[index] = $(this).attr('id');
  });
  console.clear();
  console.log("These are checked:", checkeds);
})

$('.js-add-category').click(function() {

  var categoryContent = `<div class="cars">

<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-3">
      <label for="car-1-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-3">
      <label for="car-2-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-3">
      <label for="car-3-3"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>

<button type="button" class="js-add-section">Add Section</button>
<button type="button" class="js-save-section">Save</button>
</div> <br>`

  $('.main').append(categoryContent);

});


$(document.body).on('click', 'button.js-add-section', function() {
  var sectionContent = `<div class="cars-item js-cars-itemas">
  <ul>
    <li>
      <input type="checkbox" id="car-1-6>
      <label for="car-1-6"><i class="icon-tick"></i></label>
    </li>
      <li>
      <input type="checkbox" id="car-2-6>
      <label for="car-2-6"><i class="icon-tick"></i></label>
    </li>
      <li>
      <input type="checkbox" id="car-3-6>
      <label for="car-3-6"><i class="icon-tick"></i></label>
    </li>
  </ul> </div>`


	
  $(this).closest('.cars').append(sectionContent);

});

$(document.body).on('click', 'button.js-save-section', function() {
	var parent = $(this).closest(".cars").addClass("saved");
  setTimeout(function() {
    parent.removeClass("saved");
  }, 2E3);
});
.cars-item {
  border-bottom: 1px solid gray;
}

ul {
  /* Added to fully show console in snippet */
  margin: 2px;
}

li {
  display: inline;
}

.cars {
  box-sizing: content-box;
  width: 250px;
  height: auto;
  padding: 10px;
  border: 5px solid blue;
  transition: border-color 300ms ease-in-out;
}

.cars.saved {
  border-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="js-add-category">Add Category</button> <br> <br>

<div class="main">

  <div class="cars">

    <div class="cars-item js-cars-item">
      <ul>
        <li>
          <input type="checkbox" id="car-1-3">
          <label for="car-1-3"><i class="icon-tick"></i></label>
        </li>
        <li>
          <input type="checkbox" id="car-2-3">
          <label for="car-2-3"><i class="icon-tick"></i></label>
        </li>
        <li>
          <input type="checkbox" id="car-3-3">
          <label for="car-3-3"><i class="icon-tick"></i></label>
        </li>
      </ul>
    </div>

    <button type="button" class="js-add-section">Add Section</button>
    <button type="button" class="js-save-section">Save</button>
    <br>

    <div class="section">
    </div>
  </div>
  <br>

7
  • For each generated Show button. how can I invoked separate function upon each section ? I am using ` $(document.body).on('click', 'button.js-show', function () { alert('Clicked'); });` but its showing alert the number of times that I click on Show
    – crazydev
    May 21, 2018 at 9:58
  • @jones Is alert showing more than once after click? Because I tested it and it showed me only once. Check my edited snippet May 21, 2018 at 10:03
  • @jones hmm, it appears that you have minor errors in this fiddle, but still after repairing them alert shows only once per click. It is difficult for me to find the reason if I can not see the problem :) What exactly is not working and how would you like it to work? May 21, 2018 at 10:27
  • As you can see in the fiddle, when if you click on Add Category another blue box appears with an initial row of checkboxes. Inside this blue box, you can add another rows of checkboxes. What I want to achieve is to when I click Save in each blue box, it should alert only the concerned blue box in which the button Save was clicked.
    – crazydev
    May 21, 2018 at 10:30
  • @jones Take a look at edit and tell me if this is what you wanted. May 21, 2018 at 10:38
1

There is prepend() for your case. Like I explain by the simplest example.

Suppose there is a list like:

<ul id="counting">
   <li>two</li>
   <li>three</li>
</ul>

I want to append "one" on top of list not at the end. This can be achieved by the function:

$("#counting").prepend("<li>one</li>");
1

you can change $(this).closest('.b').append(content); to $('.g').before(content); Here is working code.

$(document.body).on('click', 'button.js-add-Section', function () {
                var content = `<div class="e">
                    <ul>  
                            for (int j = 1; j <= numOfCheckboxes; j++)
                            {
                                <li>
                                    <input type="checkbox" id="user-@j-1">
                                    <label for="user-@j-1"><i class="icon-tick" disabled></i></label>
                                </li>
                            }
                        }
                    </ul>
                    <div class="f">
                    <small class="_availability">
                        <span class="title"> Section 1 </span>
                    </small>

                    <button type="button" class="mdl-button btn-show js-show-supplier">
                        <span class="show">Show <i class="icon-show"></i></span>
                    </button>
                </div>
            </div>`

            $('.g').before(content);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="a">
    <div class="b">
        <div class="c">
            <input type="text" id="user-title-1" class="d" value="user 1">
            <button class="mdl-button mdl-js-button edit-title-btn">
            </button>
        </div>

                <div class="e">
                    <ul>  
                            for (int j = 1; j <= numOfCheckboxes; j++)
                            {
                                <li>
                                    <input type="checkbox" id="user-@j-1">
                                    <label for="user-@j-1"><i class="icon-tick" disabled></i></label>
                                </li>
                            }
                        }
                    </ul>

                <div class="f">
                    <small class="_availability">
                        <span class="title"> Section 1 </span>
                    </small>

                    <button type="button" class="mdl-button btn-show js-show-supplier">
                        <span class="show">Show <i class="icon-show"></i></span>
                    </button>
                </div>
            </div>

        <!-- New section to be added here
            //
        -->

            <div class="g">
                <button type="button" class="mdl-button add-Section-btn js-add-Section">
                    AddSection
                </button> &nbsp; &nbsp;
                <button type="button" class="mdl-button secondary-btn js-save">
                    Save
                </button>
            </div>

    </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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