input text is being displayed double in divs

Question

can someone please help me? i have been trying for days but this has not been working properly my problem is that when i try to enter some text it is being displayed double one in each div if you need further explanation please ask. try typing something and you will see what im talking about when i edit them one of them changes color and the other size and font the reason is because the class are different each div has a different class on purpose this is the site http://amp.site88.net/

var z = 1; //value to make div overlappable

$('#addText').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'ui-widget-content',
        appendTo: '.container',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    });
});

$(document).on("dblclick", '.text', function()
{
    $(this).hide();    $(this).closest('.item1').find('.edit_text').val($(this).text()).show();
});

$(document).on("click", ".edit_text", function()
{
    return false;
});


$(document).on("click", function()
{
    var editingText = $('.edit_text:visible');
    if (editingText.length)
    {
        editingText.hide();
        editingText.closest('.item1').find('.text').text($(editingText).val()).show();
    }
});

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
    }
};



var z = 1; //value to make div overlappable

$('#addText').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'ui-widget-content',
        appendTo: '.container',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    });
});

$(document).on("dblclick", '.text', function()
{
    $(this).hide();    $(this).closest('.item2').find('.edit_text1').val($(this).text()).show();
});

$(document).on("click", ".edit_text1", function()
{
    return false;
});


$(document).on("click", function()
{
    var editingText = $('.edit_text1:visible');
    if (editingText.length)
    {
        editingText.hide();
        editingText.closest('.item2').find('.text').text($(editingText).val()).show();
    }
});

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
    }
};

var vm = function() {
  var self=this;
  self.items=ko.observableArray();
  self.textContent1 = ko.observable('');
  self.textContent2 = ko.observable('');
  self.textContent3 = ko.observable('');
  self.init = function() {
    self.items([]);
  }
  self.remove = function(item) {
    console.log(item);
    self.items.remove(item);
 }
 self.addNew = function() {
  var content = [ 
    self.textContent1(), 
    self.textContent2(), 
    self.textContent3()
  ].filter(function(item) {
    return item !== ''
  });
  content.forEach(function(item) { self.items.push(item); })
  self.textContent1('');
  self.textContent2('');
  self.textContent3('');
  }
}

ko.applyBindings(new vm());

$("#fs").change(function() {
    //alert($(this).val());
    $('.item1').css("font-family", $(this).val());

});

$("#size").change(function() {
    $('.item1').css("font-size", $(this).val() + "px");
});


$('.foo').click(function(){
    $('.item2').css("color", $(this).attr('data-color'));
});

<style>.item{
    width: 200px;
    height: 200px;
    padding: 0.5em;
    background:transparent;
    z-index: 1;
    display:block;
}

.edit_text
{
    display: none;
}
.edit_text1
{
    display: none;
}
.fix_backround
{
    background-color: transparent;
}

.container {
    width: 500px;
    height: 500px;
    border: 2px solid;
    position: relative;
    overflow: auto;
}
</style><style>
.thumbs img{
  margin:3px;
  width:50px;
  float:left;
}</style>
<style>
.bottlesWrapper img{
  margin:3px;
  width:400px;
  float:left;
}</style>
<style>#main { border:1px solid #eee; margin:20px; width:410px; height:220px;}
</style>
<style type="text/css" media="screen">
    .transparent { background:transparent }
</style>

<style>.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.white {
  background: #FFFFFF;
}
.yellow {
  background: #FAFF38;
}
.orange {
  background: #FFA200;
}

.red {
  background: #FF0000;
}
.dorange {
  background: #FF5500;
}
.lgreen {
  background: #80FF00;
}

.green {
  background: #45C731;
}

.turk {
  background: #17DDBC;
}
.lblue {
  background: #00A2FF;
}.blue {
  background: #1713F6;
}.purple {
  background: #AB09D3;
}.black {
  background: #000000;
}

</style><style>   #mainTarget{
    width:30px; 
    height:20px; 
    position:relative;
    top:100px; 
    left:25%
}

.mainTarget{position:absolute; width:25px; height:25px;}

#target{
    position:absolute;
    height:25px;
    width:25px;
    background:url(http://files.softicons.com/download/system-icons/human-o2-icons-by-oliver-scholtz/png/128x128/actions/object-rotate-left.png) no-repeat top center #ffffff;
    background-size:100%;
    cursor:pointer; 
    z-index:1; 
    top:1; 
    right:1;    
}
</style>

<form method="post" action="<?php echo $PHP_SELF;?>">


<div id="colour" >
  <div class="foo white" data-color="#FFFFFF"></div>
  <div class="foo black" data-color="#000000"></div>
  <div class="foo yellow" data-color="#FAFF38"></div>
  <div class="foo orange" data-color="#FFA200"></div>
  <div class="foo red" data-color="#FF0000"></div>
  <div class="foo dorange" data-color="#FF5500"></div>
  <div class="foo lgreen" data-color="#80FF00"></div>
  <div class="foo green" data-color="#45C731"></div>
  <div class="foo turk" data-color="#17DDBC"></div>
  <div class="foo lblue" data-color="#00A2ff"></div>
  <div class="foo blue" data-color="#1713F6"></div>
  <div class="foo purple" data-color="#AB09D3"></div>
</div>
    <select id="fs"> 
        <option value="Agency FB">Agency FB</option>
        <option value="Algerian">Algerian</option>
        <option value="AR Berkley">AR Berkley</option>
        <option value="AR Blanca">AR Blanca</option>
        <option value="AR Bonnie">AR Bonnie</option>
        <option value="AR Carter">AR Carter</option>
        <option value="AR Cena">AR Cena</option>

    </select>

    <select id="size">
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>


    </select>





 </form>
 <div class="item1">
  <textarea  data-bind="value: textContent1" Placeholder="Type text to append"></textarea>
</div>

<div class="item2">
  <textarea data-bind="value: textContent2" Placeholder="Type text to append"></textarea>
</div>

<button data-bind="click: addNew">Generate New Div</button>

<div class="container">
  <div data-bind="foreach:items" class="fix_backround">

    <div href="#" class="item1" data-bind="draggable:true,droppable:true">
      <span data-bind="click:$parent.remove">X</span>
      <br/>
      <br/>
      <center>
        <span class="text" data-bind="text:$data"></span><input class="edit_text"/>
      </center>
    </div>



   <div href="#" class="item2" data-bind="draggable:true,droppable:true">
      <span data-bind="click:$parent.remove">X</span>
      <br/>
      <br/>
      <center>
        <span class="text" data-bind="text:$data"></span><input class="edit_text1"/>
      </center>
    </div>

  </div> 
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script  
 src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script><link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet"
 href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">

Why do you have the same code twice? I am referring to `$('#addText').click(function (e) {` portion, wouldn't this cause your div to be added twice? — Bagzli, May 18 '16 at 17:13
this line: $(this).closest('.item2').find('.edit_text1').val($(this).text()).show(); is putting the content of item1 in item2, so why wouldn't they have the same content? — Dotan, May 18 '16 at 17:17
i deleted on of them and nothing happened im still showing double text results — fidel, May 18 '16 at 17:24
i have it kinda sorted https://jsfiddle.net/RachGal/nzqL5a3a/ but if you find a way to sort out the incrementing of the class numbers you'd be on a roll cos then you could use that class to adjust the div font size and font family — Rachel Gallen, May 18 '16 at 19:22
i'm just back from the shops. I'll take another look. I tried to insert it as an id and do it that way but had little joy. I'll try again — Rachel Gallen, May 18 '16 at 19:44
what i really want is to change color size and font in each draggable separately can that be possible i want it to be unlimited — fidel, May 18 '16 at 19:48
if you could increment the class numbers and append it as a separate class, I don't see why not. I think I had a good shot! — Rachel Gallen, May 18 '16 at 20:18
do you happen to know how i can do that ? would it be the same as incriminating id but instead of id its class? — fidel, May 18 '16 at 20:20
i had a counter implemented but for some reason it just keeps adding 0. but i'm tired. Its midnight in Ireland!!! — Rachel Gallen, May 18 '16 at 22:57

score 2 · Accepted Answer · answered May 19 '16 at 06:13

This is the code that will give you ONE at a time. The working-independently thing isn't sorted yet, but I think it deserves an upvote!

var z = 1; //value to make div overlappable
var i = 0;
$('#addText').click(function(e) {
  /** Make div draggable **/
  $('<div>', {
    class: 'ui-widget-content',
    appendTo: '.container',
    draggable: {
      containment: 'parent',
      start: function(event, ui) {
        $(this).css('z-index', ++z);
      }
    }
  });
  i++;
});

$(document).on("dblclick", '.text', function() {
  $(this).hide();
  $(this).closest('.item').find('.edit_text').val($(this).text()).show();
});

$(document).on("click", ".edit_text", function() {
  return false;
});


$(document).on("click", function() {
  var editingText = $('.edit_text:visible');
  if (editingText.length) {
    editingText.hide();
    editingText.closest('.item').find('.text').text($(editingText).val()).show();
  }
});

ko.bindingHandlers.draggable = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
    $(element).draggable();
  }
};

var vm = function() {
  var self = this;
  self.items = ko.observableArray();
  self.textContent1 = ko.observable('');
  self.textContent2 = ko.observable('');
  self.textContent3 = ko.observable('');
  self.init = function() {
    self.items([]);
  }
  self.remove = function(item) {
    console.log(item);
    self.items.remove(item);
  }
  self.addNew = function() {
    var content = [
      self.textContent1(),
      self.textContent2(),
      self.textContent3()
    ].filter(function(item) {
      return item !== ''
    });
    content.forEach(function(item) {
      self.items.push(item);
    })
    self.textContent1('');
    self.textContent2('');
    self.textContent3('');
  }
}

ko.applyBindings(new vm());

$("#fs").change(function() {
  //alert($(this).val());
  $('.item').css("font-family", $(this).val());

});

$("#size").change(function() {
  $('.item').css("font-size", $(this).val() + "px");
});


$('.foo').click(function() {
  $('.item').css("color", $(this).attr('data-color'));
});

<style> .item,
.item1 {
  width: 200px;
  height: 50px;
  float: left;
  padding: 0.5em;
  background: transparent;
  z-index: 1;
}

textarea {
  float: left;
  display: block;
  margin-top: 20px;
  margin-bottom: 30px;
  margin-right: 80%;
}

.edit_text {
  display: none;
}

.edit_text1 {
  display: none;
}

.fix_backround {
  background-color: transparent;
}

.container {
  width: 500px;
  height: 500px;
  border: 2px solid;
  position: relative;
  overflow: auto;
}

</style><style> .thumbs img {
  margin: 3px;
  width: 50px;
  float: left;
}

</style> <style> .bottlesWrapper img {
  margin: 3px;
  width: 400px;
  float: left;
}

</style> <style>#main {
  border: 1px solid #eee;
  margin: 20px;
  width: 410px;
  height: 220px;
}

</style> <style type="text/css" media="screen"> .transparent {
  background: transparent
}

</style> <style>.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.white {
  background: #FFFFFF;
}

.yellow {
  background: #FAFF38;
}

.orange {
  background: #FFA200;
}

.red {
  background: #FF0000;
}

.dorange {
  background: #FF5500;
}

.lgreen {
  background: #80FF00;
}

.green {
  background: #45C731;
}

.turk {
  background: #17DDBC;
}

.lblue {
  background: #00A2FF;
}

.blue {
  background: #1713F6;
}

.purple {
  background: #AB09D3;
}

.black {
  background: #000000;
}

</style><style> #mainTarget {
  width: 30px;
  height: 20px;
  position: relative;
  top: 100px;
  left: 25%
}

.mainTarget {
  position: absolute;
  width: 25px;
  height: 25px;
}

#target {
  position: absolute;
  height: 25px;
  width: 25px;
  background: url(http://files.softicons.com/download/system-icons/human-o2-icons-by-oliver-scholtz/png/128x128/actions/object-rotate-left.png) no-repeat top center #ffffff;
  background-size: 100%;
  cursor: pointer;
  z-index: 1;
  top: 1;
  right: 1;
}

</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script><link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css">

<form method="post" action="<?php echo $PHP_SELF;?>">

  <div id="colour">
    <div class="foo white" data-color="#FFFFFF"></div>
    <div class="foo black" data-color="#000000"></div>
    <div class="foo yellow" data-color="#FAFF38"></div>
    <div class="foo orange" data-color="#FFA200"></div>
    <div class="foo red" data-color="#FF0000"></div>
    <div class="foo dorange" data-color="#FF5500"></div>
    <div class="foo lgreen" data-color="#80FF00"></div>
    <div class="foo green" data-color="#45C731"></div>
    <div class="foo turk" data-color="#17DDBC"></div>
    <div class="foo lblue" data-color="#00A2ff"></div>
    <div class="foo blue" data-color="#1713F6"></div>
    <div class="foo purple" data-color="#AB09D3"></div>
  </div>
  <select id="fs">
    <option value="Agency FB">Agency FB</option>
    <option value="Algerian">Algerian</option>
    <option value="AR Berkley">AR Berkley</option>
    <option value="AR Blanca">AR Blanca</option>
    <option value="AR Bonnie">AR Bonnie</option>
    <option value="AR Carter">AR Carter</option>
    <option value="AR Cena">AR Cena</option>

  </select>

  <select id="size">
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>


  </select>

</form>
<div class="item">
  <textarea data-bind="value:textContent1" Placeholder="Type text to append"></textarea>
</div>

<button data-bind="click:addNew">Generate New Div</button>

<div class="container">
  <div data-bind="foreach:items" class="fix_backround">

    <div href="#" class="item" data-bind="draggable:true,droppable:true">
      <span data-bind="click:$parent.remove">X</span>
      <br/>
      <br/>
      <center>
        <span class="text i" data-bind="text:$data"></span>
        <input class="edit_text" />
      </center>
    </div>

  </div>
</div>

@fidel https://jsfiddle.net/RachGal/7g1a7btf/ this is the latest shot, with ids being appended, but as you can see, if you INSPECT, the id is always the same, as the counter is always the same — Rachel Gallen, May 19 '16 at 06:27
@fidel Cheers! Made my day :) I get my JavaScript badge now :) — Rachel Gallen, May 19 '16 at 17:17

score 0 · Answer 2 · answered May 18 '16 at 17:22

0

You have the same handler to add the text defined twice. Remove one of the two.

$('#addText').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'ui-widget-content',
        appendTo: '.container',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    });
});

answered May 18 '16 at 17:22

Korgrue

3,430
1
13
20

i already did that just now and im still showing double results – fidel May 18 '16 at 17:24
what else can i try? – fidel May 18 '16 at 17:51
@DonovanM does the updated code work so that you can change the fontsize and family of each div independently of each other - that was the aim? If so please post a working fiddle – Rachel Gallen May 19 '16 at 13:38
@RachelGallen here's a working fiddle - https://jsfiddle.net/kh4td8vn/1/ . You have to click on a div before changing its colors, size or font. – DonovanM May 19 '16 at 14:57
1

@DonovanM kinda weird that it took a full hour for you to implement 3 lines of code. I still think I deserve an upvote, I put much time into this!!!! – Rachel Gallen May 19 '16 at 15:09
Make sure that you clear your browser cache after you removed the second instance. Browsers cache JS - so its possible the site is just recalling the cached version. If that don't work, I apologize - I have not further suggestions for you. – Korgrue May 19 '16 at 15:49

input text is being displayed double in divs

2 Answers2

Linked