Search code examples
jqueryhtmlcssjquery-uijquery-ui-selectable

Append list item only to lists within selected tabs

I got a little codepen where I got multi selectable tabs (with jQuery selectable widget). Above that I got a form with a text input and a submit button. When I insert some text and submit it, it adds the text into the list on each tab. My goal is that the input text only get appended onto the lists of the selected tabs. Thats my javascript:

$(function() {
    function selectionChange(event, ui) {
        var items = $('.ui-selected', this).map(function () {
            return $(this).index();
        }).get();

        $("section").each(function () {
            $(this).toggle(items.indexOf($(this).index()) > -1);
        });
        console.log(items);
    }

    $("#selectable").selectable();
    $("#selectable").selectable({
        selected: selectionChange,
        unselected: selectionChange
    });
});


$(function(){
   $('#plannerform').submit(function(e){
       var val = $(this).find('#plannername').val();
       $('ul.plannerlist').append('<li>' + val + '</li>');
       e.preventDefault();
   });
});

And thats the HTML:

<form id="plannerform">
    <input id="plannername" placeholder="Name eingeben" type="text"></input><!--
    --><input id="plannersubmit" type="submit" value="eintragen"></input>
</form>

<ol id="selectable">
  <li class="ui-widget-content">FR PM</li>
  <li class="ui-widget-content">SA AM</li>
  <li class="ui-widget-content">SA PM</li>
  <li class="ui-widget-content">SO AM</li>
  <li class="ui-widget-content">SO PM</li>
  <li class="ui-widget-content">MO AM</li>
</ol>

<div id="content">
  <section class="tabcontent">1
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">2
    <ul class="plannerlist">
    </ul>  
  </section>
  <section class="tabcontent">3
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">4
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">5
    <ul class="plannerlist">
    </ul>  
  </section>
  <section class="tabcontent">6
    <ul class="plannerlist">
    </ul> 
  </section>
</div>

If you need more code, the full code is on my codepen which I mentioned above.

Solution

  • Append to $('.tabcontent:visible .plannerlist') instead, and if none are visible (initial state), append to the one in the first .tabcontent

    Here's a pen since the form submission won't work on SO http://codepen.io/mcoker/pen/YNoNdN

    $(function() {
    // define one function, to be used for both select/unselect
    function selectionChange(event, ui) {
        // Get indexes of selected items in an array
        var items = $('.ui-selected', this).map(function () {
            return $(this).index();
        }).get();
        // Show or hide sections according to the corresponding option's selection
        $("section").each(function () {
            $(this).toggle(items.indexOf($(this).index()) > -1);
        });
        console.log(items);
    }

    $("#selectable").selectable();
    $("#selectable").selectable({
        selected: selectionChange,
        unselected: selectionChange
    });
});


$(function(){
    $('#plannerform').submit(function(e){
        var val = $(this).find('#plannername').val();
        var $target = $('.tabcontent:visible').length ? $('.tabcontent:visible .plannerlist') : $('.tabcontent:first-child .plannerlist');
        $target.append('<li>' + val + '</li>');
        e.preventDefault();
    });
});
    *{
  font-family: 'Josefin Sans', sans-serif;
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
}
#selectable .ui-selecting { 
  background: #9eefbc;
  transition:.8s ease-in-out;
  -webkit-transition: -webkit-transform 0.8s, background-color 0.8s;
	transition: transform 0.8s, background-color 0.8s;
	-webkit-transform: perspective(300px) rotate3d(1,0,0,-180deg);
	transform: perspective(300px) rotate3d(1,0,0,-180deg);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-perspective-origin: 50% 100%;
	perspective-origin: 50% 100%;
}
#selectable .ui-selected { 
  background: #6dce91; 
  transition:all 0.8s;
}
#selectable { 
  list-style-type: none; 
  position:absolute;
  width: 60%;
  margin-left:20%;
  display:flex;
  transition:.3s ease-in-out;
  z-index:1;
  margin-top:3px;
}
#selectable li { 
  background:#ddffea;
  padding: 0.6em; 
  font-size: 1.4em; 
  flex-grow:1;
  transition:.3s ease-in-out;
  border:none;
  text-align:center;
  line-height:0.8em;
}

#selectable .ui-selected:after,
#selectable .ui-selected::after {
    position: absolute;
    top: 44px;
    margin-left:-50px;
    transition: .2s ease-in-out;
    content: '';
    width: 0;
    height: 0;
    opacity:1;
    animation:dreieckFade 1s forwards;
    border-top: solid 15px #6dce91;
    border-left: solid 20px transparent;
    border-right: solid 20px transparent;
}

@keyframes dreieckFade{
    0%{opacity:0;border-top: solid 0px #6dce91;}
    100%{opacity:1;border-top: solid 15px #6dce91;}
}

.ui-selectable-helper {
  visibility: hidden;
}

#content{
  width:60%;
  background-color:#9eefbc;
  margin-left:20%;
  padding-top:70px;
  margin-top:3px;
  padding-bottom:30px;
}

.tabcontent{
    top:44px;
    background-color:transparent;
    z-index:0;
    transition:.3s ease-in-out;
    font-size:2em;
    display:none;
    padding-left:100px;
}

#plannername{
  width:40%;
  background-color:#9eefbc;
  margin-left:20%;
  border:0;
  font-size:2em;
  padding:20px;
}
#plannername:focus{
  outline:0;
}
#plannersubmit{
  width:20%;
  background-color:#6dce91;
  border:0;
  font-size:2em;
  padding:20px;
  transition:.2s ease-in-out;
}
#plannersubmit:hover{
  transition:.2s ease-in-out;
  padding-left:40px;
  cursor:pointer; 
}
#plannersubmit:focus{
  outline:0;
}
#plannersubmit:active{
  color:white;
}
.plannerlist{
    list-style-type:none;
}
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<form id="plannerform">
    <input id="plannername" placeholder="Name eingeben" type="text" autocomplete="off"></input><!--
    --><input id="plannersubmit" type="submit" value="eintragen"></input>
</form>
<ol id="selectable">
  <li class="ui-widget-content">FR PM</li>
  <li class="ui-widget-content">SA AM</li>
  <li class="ui-widget-content">SA PM</li>
  <li class="ui-widget-content">SO AM</li>
  <li class="ui-widget-content">SO PM</li>
  <li class="ui-widget-content">MO AM</li>
</ol>
<div id="content">
  <section class="tabcontent">1
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">2
    <ul class="plannerlist">
    </ul>  
  </section>
  <section class="tabcontent">3
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">4
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">5
    <ul class="plannerlist">
    </ul>  
  </section>
  <section class="tabcontent">6
    <ul class="plannerlist">
    </ul> 
  </section>
</div>