Riot Zeast Captain Riot Zeast Captain - 7 months ago 8
Javascript Question

Dynamically Generate id, and assign to label



$(document).ready(function() {
$("body").tooltip({
selector: '[data-toggle=tooltip]'
});
});

var unique_id=0;
$('#update').on('click', function() {
if ($('#myText').val().length == 0) {
alert('Are you Kidding ? ;)')
return
}
unique_id++;
$('#result').append('<li>' + '<input id="checkboxFourInput" type="checkbox" class="todo-item" /> <label for="checkboxFourInput"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
// $('#myText').val("").attr("disabled", "disabled");

// update value
$('#myText').val('').change();
});

$('#myText').on("focus click", function() {
$('#update').removeClass("gray_text");
$('#update').addClass("show");
});
$('#edit').on('mouseup', function() {
console.log($('#myText'));
$('#myText').prop("disabled", false).focus().select();
});

$('#myText').on("focus click", function() {
$('#update').removeClass("gray_text");
$('#update').addClass("show");
})

$('.hide').on("click", function() {
$('.hide').removeClass("show");
});

$('#result ').on('click', 'li .glyphicon-remove', function() {
// alert('Clicked');
$(this).closest('li').remove();
});

.editable_text{
margin: 20px;
/*padding: 15px;*/
border: 1px solid #ccc;
width: 300px;
border-radius: 5px;
background: white;
display: inline-block;
text-align: left;
}
ul#result{
padding: 0;
margin: 0;
position: relative;
top: -40px;
border-top: 1px solid #ccc;
}
#result li {
padding: 15px 25px;
border-bottom: 1px solid #ccc;
list-style: none;
font-size: 18px;
font-weight: 100;
color: #555;
letter-spacing: 1px;
width: 100%;
}
#myText{
margin: 0;
padding: 20px 30px 20px 40px;
border: transparent;
border-bottom: 1px solid #ccc;
position: relative;
/*left: -16px;*/
width: 100%;
top: -40px;
}

.btns{
width:100%;
position: relative;
padding: 20px 0;
}
.plus {
padding: 0 20px;
cursor: pointer;
position: relative;
right: 2px;
z-index: 1;
}
.okay{
float: right;
position: relative;
right: -2px;
top: 0px;
padding: 0 20px;
cursor: pointer;
z-index: 1;
}
.gray_text{
opacity: 0.2;
color: #222;
}
.show{
opacity: 1;
color: blue;
}
input[type=checkbox] {
visibility: hidden;
}
#result label {
cursor: pointer;
position: absolute;
width: 24px;
height: 24px;
top: 15px;
left: 15px;
background: #fff;
border: 1px solid #4AADF1;
border-radius: 100%;
}
#result label:focus{
background: #4AADF1;
}
#result label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 12px;
height: 5px;
left: 5px;
top: 7px;
background: transparent;
border: 2px solid white;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/**
* Create the hover event of the tick
*/
#result label:hover::after {
opacity: 0.5;
}

/**
* Create the checkbox state for the tick
*/
#result input[type=checkbox]:checked + label:after {
opacity: 1;
}
#result input[type=checkbox]:checked + label{
background: #4AADF1;
}
.todo-item-del{
text-align: right;
float: right;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="box">
<div class="editable_text">
<div class="btns">
<a id="edit" class="pull-left plus" data-toggle="tooltip" data-placement="bottom" title="Click to Add">
<i class="glyphicon glyphicon-plus"></i>
</a>

<a id="update" class="gray_text okay" data-toggle="tooltip" data-placement="right" title="Click to Okay">
<i class="glyphicon glyphicon-ok"></i>
</a>
</div>
<input type='text' id="myText" placeholder="Add new goals"/>
<ul id="result"></ul>
</div>
</div>





Hi there,

I'm trying to implement a To-Do-List for my Admin Dashboard, where I got strucked up, in this I was appending a
li
in my To-Do-List as an item, for the very first time its is working fine, am getting
checkbox
which is working too, but when am creating the second To-Do, it is getting error, and the check box isn't working.

here's the code which I was trying but dint get succeeded

$('#result').append('<li>' + '<input "$(this).attr("id",$(this).attr("id")+"_"+(unique_id))" type="checkbox" class="todo-item" /> <label for="(unique_id)"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');


following is the fiddle link

Answer

2 issues:

  • id for the checkbox needs to be based on unique_id
  • #result label { ... top: 15px; ... } is causing each checkbox to be fixed at the same y position.

$(document).ready(function() {
  $("body").tooltip({
    selector: '[data-toggle=tooltip]'
  });
});

var unique_id = 0;
$('#update').on('click', function() {
  if ($('#myText').val().length == 0) {
    alert('Are you Kidding ? ;)')
    return
  }
  unique_id++;
  $('#result').append('<li>' + '<input id="checkbox'+unique_id+'Input" type="checkbox" class="todo-item" /> <label for="checkbox'+unique_id+'Input"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
  // $('#myText').val("").attr("disabled", "disabled");

  // update value
  $('#myText').val('').change();
});

$('#myText').on("focus click", function() {
  $('#update').removeClass("gray_text");
  $('#update').addClass("show");
});
$('#edit').on('mouseup', function() {
  console.log($('#myText'));
  $('#myText').prop("disabled", false).focus().select();
});

$('#myText').on("focus click", function() {
  $('#update').removeClass("gray_text");
  $('#update').addClass("show");
})

$('.hide').on("click", function() {
  $('.hide').removeClass("show");
});

$('#result ').on('click', 'li .glyphicon-remove', function() {
  // alert('Clicked');
  $(this).closest('li').remove();
});
.editable_text {
  margin: 20px;
  /*padding: 15px;*/
  border: 1px solid #ccc;
  width: 300px;
  border-radius: 5px;
  background: white;
  display: inline-block;
  text-align: left;
}
ul#result {
  padding: 0;
  margin: 0;
  position: relative;
  top: -40px;
  border-top: 1px solid #ccc;
}
#result li {
  padding: 15px 25px;
  border-bottom: 1px solid #ccc;
  list-style: none;
  font-size: 18px;
  font-weight: 100;
  color: #555;
  letter-spacing: 1px;
  width: 100%;
}
#myText {
  margin: 0;
  padding: 20px 30px 20px 40px;
  border: transparent;
  border-bottom: 1px solid #ccc;
  position: relative;
  /*left: -16px;*/
  width: 100%;
  top: -40px;
}
.btns {
  width: 100%;
  position: relative;
  padding: 20px 0;
}
.plus {
  padding: 0 20px;
  cursor: pointer;
  position: relative;
  right: 2px;
  z-index: 1;
}
.okay {
  float: right;
  position: relative;
  right: -2px;
  top: 0px;
  padding: 0 20px;
  cursor: pointer;
  z-index: 1;
}
.gray_text {
  opacity: 0.2;
  color: #222;
}
.show {
  opacity: 1;
  color: blue;
}
input[type=checkbox] {
  visibility: hidden;
}
#result label {
  cursor: pointer;
  position: absolute;
  width: 24px;
  height: 24px;
  /*top: 15px;*/
  left: 15px;
  background: #fff;
  border: 1px solid #4AADF1;
  border-radius: 100%;
}
#result label:focus {
  background: #4AADF1;
}
#result label:after {
  opacity: 0.2;
  content: '';
  position: absolute;
  width: 12px;
  height: 5px;
  left: 5px;
  top: 7px;
  background: transparent;
  border: 2px solid white;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/**
* Create the hover event of the tick
*/

#result label:hover::after {
  opacity: 0.5;
}
/**
* Create the checkbox state for the tick
*/

#result input[type=checkbox]:checked + label:after {
  opacity: 1;
}
#result input[type=checkbox]:checked + label {
  background: #4AADF1;
}
.todo-item-del {
  text-align: right;
  float: right;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="box">
  <div class="editable_text">
    <div class="btns">
      <a id="edit" class="pull-left plus" data-toggle="tooltip" data-placement="bottom" title="Click to Add">
        <i class="glyphicon glyphicon-plus"></i>
      </a>

      <a id="update" class="gray_text okay" data-toggle="tooltip" data-placement="right" title="Click to Okay">
        <i class="glyphicon glyphicon-ok"></i>
      </a>
    </div>
    <input type='text' id="myText" placeholder="Add new goals" />
    <ul id="result"></ul>
  </div>
</div>

Comments