Adding a content dynamically issue in jquery

Question

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>

Krzysztof Janiszewski · Accepted Answer · 2018-05-21 10:37:47Z

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>

edited May 21, 2018 at 10:37

answered May 21, 2018 at 8:34

Krzysztof Janiszewski

3,8293 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

crazydev Over a year ago

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

Krzysztof Janiszewski Over a year ago

@jones Is alert showing more than once after click? Because I tested it and it showed me only once. Check my edited snippet

Krzysztof Janiszewski Over a year ago

@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?

crazydev Over a year ago

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.

Krzysztof Janiszewski Over a year ago

@jones Take a look at edit and tell me if this is what you wanted.

|

Ahmed Jahanzaib · Accepted Answer · 2018-05-21 08:41:12Z

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>");

answered May 21, 2018 at 8:41

Ahmed Jahanzaib

711 bronze badge

Comments

Sudhi · Accepted Answer · 2018-05-21 08:44:57Z

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>

Collectives™ on Stack Overflow

Adding a content dynamically issue in jquery

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related