0

como eu faço pra carregar exatamente a mesma estrutura que crie em outra tela?

Seguinte, eu tenho essa tela de cadastro onde clicando no botão "+" vai adicionar inputs tipo texto (conforme codigo em anexo) Meu problema é que essa criação é dinamica, a pessoa pode adicionar tanto 1, quando 2,3,4..ou seja N. vou salvar esse dados e preciso replicar essa mesma estrutura em outra tela. Ou seja, vai carregar todos os inputs de texto criados na tela de adição. Como consigo "copiar" toda estrutura e replicar em outra tela?

7
  • Salve o .html() da div principal
    – Bsalvo
    Commented 12/07/2017 às 15:42
  • @Isa, uma dúvida. Você precisa pegar os dados de cada input e repassar os dados para outra tela. E a exibição dos dados será também usando inputs?
    – DNick
    Commented 12/07/2017 às 16:29
  • @DjalmaManfrin como se fosse um print, trazendo exatamente o que inseri na outra tela, e sim usando os input text pra exibição
    – Isa
    Commented 12/07/2017 às 17:48
  • @DjalmaManfrin a intenção é essa outra tela ser uma tela de edição, mas tô tentando agora pelo menos conseguir trazer exatamente igual a parte da inserção, e depois pensar como faria pra editar essas informações. Conseguiu entender?
    – Isa
    Commented 12/07/2017 às 17:49
  • 1
    @Bia vou elaborar a resposta
    – DNick
    Commented 12/07/2017 às 18:21

1 Resposta 1

1

Vamos la.

var copia;

function loadEditLabel() {
  // Salva o novo input saindo do campo ou apertando enter
  $('[contenteditable="true"]').focus().select().keydown(function(event) {
      if (event.key == 'Enter') { // Checa se a tecla digitada foi o Enter
        $(this).prev('input').val(this.innerHTML); // Colocar o value do input com o texto digitado
        $(this).prop('contenteditable', false); // Desabilita o campo de edição
      }
    })
    .blur(function() {
      $(this).prev('input').val(this.innerHTML);
      $(this).prop('contenteditable', false);
    });
}

$('#add').click(function() {
  html = '<div class="itens">';
  html += '<div id="radios"><input type="radio" disabled style="vertical-align: text-bottom;" value="teste" name="data"><input type="text" value="" class="form-control radio-alinha text" placeholder="Adicionar Alternativa"><a href="#" class="del"><span class= "glyphicon glyphicon-trash"></span></a></div></div>';
  //html += '<input type="text" placeholder="Nova Entrada">';
  //html += '<a href="#" class="del"><span class= "glyphicon glyphicon-trash"></span></a></div>';

  $('#campos').append(html); // Adiciona o novo input dentro da div radios

  loadEditLabel(); // Carrega o radio para a edição

$(function(){
    $('.del').click(function(event){
      event.preventDefault();   
    $(this).parent().remove();
    });
});

});

$('#btnexp').on('click', function(){
  
    copia = $('#exp').html();
  
});

$('#btnexibir').on('click', function(){
  
    $('.copiada').html(copia);
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
                     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                     <div class="form-group esconder" id="id_TME">
                        <div class="panel panel-default" id='exp'>
                           <div class="panel-body">
                              <div id="multipla-escolha">
                              </div>

                              <div id="campos"></div>
                              <button id="add" class="btn btn-primary btn-md">
                              <span class="glyphicon glyphicon-plus" aria-hidden="true">                                  
                              </span>
                              </button>


                           </div>
                        </div>
                        <button ng-click="adicionaTarefa()" type="button" class="btn btn-primary btn-md" data-dismiss="modal" id="btn-cadastra-tarefa"><span class="glyphicon glyphicon-ok-sign"></span> Salvar</button>
                     </div>

<div id='btnexp'>Copiar</div>
<div id='btnexibir'>Exibir Copia</div>

<div class='copiada'></div>

      <script src="bootstrap/js/bootstrap.min.js"></script>

O que foi feito

Criei uma variável global chamada copia que irá receber todo o conteúdo da div de class panel panel-default, criei uma id='exp' para ela.

o evento .html() do jquery recebe TODO o conteúdo da div selecionada.

aplicamos todos esse conteúdo a variável copia. E posteriormente atribuímos o conteúdo dessa variável a uma outra div, para que a cópia seja realizada.

Para visualizar o funcionamento faça o que quiser com os inputs, depois clique em copiar e depois em exibir copia.

Lembrando que estou mostrando como fazer para replicar o conteúdo exato da div. Você terá que adaptar para o seu próprio código.

3
  • legal!! vou aplicar ao meu exemplo, uma pergunta, se ao invés de ser inputs text, fosse uma tabela dinamica, onde adiciono colunas e linhas, ainda sim ele seria capaz de copiar todo o conteudo e estrutura? inclusive gerar essa tabela? como um print mesmo
    – Isa
    Commented 13/07/2017 às 13:45
  • 1
    Sim! o .html() do jquery é capaz de receber o conteúdo de qualquer elemento na página. Olhe só um pequeno trecho encontrado na documentação do .html() > In an HTML document, .html() can be used to get the contents of any element.
    – Bsalvo
    Commented 13/07/2017 às 13:52
  • Essa resposta te ajudou de alguma forma?
    – Bsalvo
    Commented 31/07/2017 às 13:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .