0

I am modifying an existing application where there is already a list on the html. I will be adding a fancybox where the user can select from checkboxes inside the fancybox and when closing the fancybox the selection will be appended to the loaded form. Here is the html of the list and I want to add the selected items to it.

    <ul id="collabList" data-area="display-list">
     <li>
        First item in the list
        <button class="btn btn-link btn-sm" type="button" data-action="remove">
           <i class="glyphicon glyphicon-remove-sign"></i>
        </button>
     </li>
     <li>
        Second item in the list
       <button class="btn btn-link btn-sm" type="button" data-action="remove">
           <i class="glyphicon glyphicon-remove-sign"></i>
      </button>
      </li>
    </ul>

interface looks like: enter image description here

Improve this question
5
  • 1
    please add js as well Commented Oct 27, 2015 at 3:18
  • Hiya - as you probably know, where we prefer for you to have a go at the code yourself before asking for help - so show us what you've done so far (add it to your question) and we'll be better able to see what you're trying to do and can update it to help you with your goals. Commented Oct 27, 2015 at 3:21
  • Do you need to know how to get the values of selected items, or simply how to append to the collabList ul using the jQuery append() method? Commented Oct 27, 2015 at 3:22
  • @JonathanBowman Just how to append to the collabList ul using Jquery append method(). The values from the checkboxes i was able to retrieve already. Commented Oct 27, 2015 at 3:24
  • 1
    Oh, then take a look at Justice's answer below. I'm not sure the selector he provided is correct, but that method is all it takes to append the DOM. Note that it will add it to the end of the list, whereas you can use prepend() to add it to the top. Commented Oct 27, 2015 at 3:26

2 Answers 2

Reset to default
1

Call this when the box is selected:

$('#collablist').append('<li>New List</li>');
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Won't he need to use $("#collabList")?
1

Try using append:

var str='<li>Third item in the list';
str +='<button class="btn btn-link btn-sm" type="button" data-action="remove">';
           str +='<i class="glyphicon glyphicon-remove-sign"></i>';
     str +=' </button></li>';
$("ul#collabList").append(str);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="collabList" data-area="display-list">
     <li>
        First item in the list
        <button class="btn btn-link btn-sm" type="button" data-action="remove">
           <i class="glyphicon glyphicon-remove-sign"></i>
        </button>
     </li>
     <li>
        Second item in the list
       <button class="btn btn-link btn-sm" type="button" data-action="remove">
           <i class="glyphicon glyphicon-remove-sign"></i>
      </button>
      </li>
    </ul>

Improve this answer

1 Comment

Thank you this works in appending the values selected from the checkboxes. However, when I submit the form, the appended values in the list are not saved. I will debug and post here when I have figured it out :)

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.