I have a Html section that is cloned and populated through jquery , however I need to use the same cloned structure in another location, keeping clear the first cloned if they were two places with the same clones - I do not know and possible - but when I add the cloned structure to the new site only appears in one place and not in the two places I want, I know that it is possible to clone angular structures with ease, but for some reasons I'm using jquery , I wanted to know an efficient way to solve this problem, and if this is correct, reuse the cloned structure in a new location.
jquery
function containerClones() {
/*public methods*/
var $atividadeContainerTasks = $(".containerTasks");
var $atividadeData = $(".descricaoData").clone(true);
var $atividadeDefaultask = $(".task").clone(true);
var $atividadetaskDetail = $(".taskDetail").clone(true);
var $containerBoxCalendario = $(".box-calendar").clone(true)
var $asideTarefascontainer = $(".asideTarefas");
/*private methods*/
function fillAtividadeController(atividade) {
//$atividadeContainerTasks.append($atividadeData);
$.each(atividade, function (index, item) {
var taskDefaultClone = $atividadeDefaultask.clone();
// var asideDefaultClone = $atividadeDefaultask.clone();
fillAtividadeWeek.call(this, item, taskDefaultClone);
$asideTarefascontainer.append(taskDefaultClone);
$atividadeContainerTasks.append(taskDefaultClone);
//fillAtividadeWeek.call(this, item,asideDefaultClone);
// $asideTarefas.append(asideDefaultClone);
});
};
function fillAtividadeWeek(atividade, $atividadeDefaultask) {
//$atividadeDefaultask.prop("id", "taskTitleText" + atividade.ID);
$atividadeDefaultask.data("atividade", atividade);
$atividadeDefaultask.find(".taskToDo").attr("data-target", "#task" + atividade.IdAtividadeAgenda);
$atividadeDefaultask.find(".taskDetail").prop("id", "task" + atividade.IdAtividadeAgenda);
$atividadeDefaultask.find(".atividadeQuinzenal").text(atividade.Descricao);
$atividadeDefaultask.find(".autorAtividade").text(atividade.Descricao);
$atividadeDefaultask.find(".detailTarefa").text(atividade.Descricao);
$atividadeDefaultask.find(".detailObservacao").text(atividade.Descricao);
$atividadeDefaultask.find(".taskTitleText").text(atividade.Descricao);
}
/*WS calls*/
function getAtividade() {
var atividade = [
{
Descricao: "teste1",
},
{
Descricao: "teste2",
},
];
fillAtividadeController(atividade);
}
html
<div class="m-b-15 containerTasks">
<h4 class="descricaoData text-primary m-b-5">Hoje - 06 de Novembro
</h4>
<div class="panel panel-default task">
<div class="panel-heading clearfix taskToDo" data-toggle="collapse" data-target="#collapse1">
<span class="taskTitle col-sm-10 col-xs-9">
<span class="checkTask"><i class="fa fa-check" aria-hidden="true"></i></span>
<span class="taskTitleText">limpeza da piscina</span>
</span>
<span class="col-sm-1 col-xs-2 text-center text-danger">01/10</span>
<span class="col-sm-1 col-xs-1 text-center">
<i class="taskIcon glyphicon glyphicon-chevron-down"></i>
</span>
</div>
<div class="panel-collapse collapse taskDetail clearfix" id="collapse1">
<div class="taskForm">
<div class="pull-right">
<a href="#" class="trashBtn btn btn-default btn-sm"><i class="fa fa-trash-o" aria-hidden="true"></i> Excluir</a>
</div>
<small class="atividadeQuinzenal text-muted m-l-10">Atividade quinzenal, criada por <i class="autorAtividade">Autor</i></small>
<br />
<p class="detailTarefa">
detalhes <br />
</p>
<div class="ObsTask col-sm-12 col-xs-12">
<small class="textoObservacao text-muted">enviado: 07/11/17</small><br />
<p class="detailObservacao">observacao</p>
</div>
<div class="ObsTask col-sm-12 col-xs-12">
<div>
<small class="detailObservacao text-muted">enviado: 07/11/17</small><br />
<p class="detailObservacao">observacao</p>
</div>
</div>
</div>
<div class="SendObsTask col-sm-12 col-xs-12">
<div>
<textarea class="form-control" placeholder="Escreva uma observação" rows="2"></textarea>
<a href="#" class="btn btn-primary btn-sm m-t-5 pull-right">
<i class="fa fa-paper-plane" aria-hidden="true"></i> Enviar
</a>
</div>
</div>
</div>
</div>
</div>
</div>
New structure for clones
<div class="box-white clearfix m-t-15">
<div id="calendar" class="col-sm-8 col-xs-12 nomargin nopadding">
</div>
<div class="col-sm-4 asideTarefas">
<h1>Tarefas</h1>
</div>
</div>