1

I have a modal that allows the user to duplicate input so they can add users and adjust permissions from the dropdown menu.

Currently, I am only able to update the newest dropdown button with their selection. If they add three users and select "read" for the first, it will only update the newest entry. Each dropdown text has a different span. The simplified code is listed below but the full version can be seen here.

  <!-- Modal -->
<div class="modal fade new" id="new" tabindex="-1" role="dialog" aria-labelledby="new_modal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="permissions">Permissions</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"><i class="fas fa-times"></i></span>
        </button>
      </div>
      <div class="modal-body">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="users-tab" data-toggle="tab" href="#users" role="tab" aria-controls="users" aria-selected="true">Users</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="groups-tab" data-toggle="tab" href="#groups" role="tab" aria-controls="groups" aria-selected="false">Groups</a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <!-- Content for the users tab -->
          <div class="tab-pane fade show active" id="users" role="tabpanel" aria-labelledby="users-tab">
            <div class="wrapper">
              <div class="users">
                <u><h6>Name</h6></u>
                <span id="name"></span>
              </div>
              <div class="permissions">
                <u><h6>Access Level</h6></u>
                <span id="access_level"></span>
              </div>
            </div>
          </div>
          <!-- Content for the groups tab -->
          <div class="tab-pane fade" id="groups" role="tabpanel" aria-labelledby="groups-tab">
            Group Level Permissions
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" id="new_rule"><i class="fas fa-plus"></i></button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#saved" id="save">Save</button>
      </div>
    </div>
  </div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.3.1.js"integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
    var i = 1;
    // When the user cicks the + icon, a new input and dropdown list will appear
    $("#new_rule").click(function() {
        // markup for the dropdown
        var button = "<div class='btn-group'><button type='button' name='options' id='options' class='btn btn-danger dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'><span id='selected"+i+"'><span id='text'>Read</span></span></button><div class='dropdown-menu'><a class='dropdown-item 'href='#'>Read</a><a class='dropdown-item' href='#'>Write</a><a class='dropdown-item' href='#'>Full Control</a><div class='dropdown-divider'></div><a class='dropdown-item' href='#'>Learn More</a></div></div>"
        // Markup for the name input
        var input = "<input type='text' name='name' placeholder='name' class='form-control'>";
        // Prepend the markup to the spans
        $("#name").prepend(input);
        $("#access_level").prepend(button);
        // Update the dropdown to reflect what they selected *this is currently broken*
        $('.dropdown-menu a').click(function(){
         $('#text').text($(this).text());
       })
       // Increment the span ID so each dropdown has a different span.
       i++
    });
    // When they click "Save", we gather their inputs into two separate JSON arrays for POST
    $("#save").click(function() {
      // Gather the names that were entered and dump them into a JSON array
      var value = $("input[name='name']")
          .map(function() {
              return $(this).val();
          }).get();
        var jsonStr = JSON.stringify(value);
        console.log(jsonStr);

        $('#options').each(function(){
          // Gather the access level assigned to those names and dump them into a JSON array.
          var accessLevel = $("button[name='options']").map(function(){
            return $(this).text();
          }).get();
          console.log(JSON.stringify(accessLevel));
        });
      });
    });
</script>
user1178830
  • 436
  • 3
  • 11
John Doe
  • 109
  • 2
  • 11

1 Answers1

0

So, your problem is with the (as you said) broken line:

$('#text').text($(this).text());

This will find the first element with the id of 'text' and set the text of that element with your selected text. Of course, once you add multiple rules you have multiple span's with an id of 'text' (which is anyhow not a good idea. See here: https://stackoverflow.com/a/44009054/1178830).

You could either give them each their own id (e.g. text1, text2...) or you could try to find the element without the id by replacing the line above with something like this:

$(this).parent().siblings('button').find('span').text($(this).text());

This will of course heavily depend on the structure of the elements you add in your 'button' variable.

user1178830
  • 436
  • 3
  • 11