I need to clone the contents of a div and put in the form of my modal

Asked

Viewed 349 times

2

Good afternoon, everyone.

Once again I come to you about a problem I have. I need to use the syntax below in a modal.

$("#divConsulta").clone().appendTo($("#formFruta"));

In the row below when clicking, I open my modal with the data form to update:

<a href="<c:url value="edita?cod=${fruta.cod}"/>" class="btn btn-success btn-xs" data-toggle="modal" data-target="#update-modal" title="Editar"><span class="glyphicon glyphicon-edit"></span></a>

The thing is, I don’t know how to do this:

clone(). appendTo

for my modal.

In short, I don’t know if I’m right, I need to pass the content of a div that is on a page, that when clicked the button to open modal, the content of #divConsulta goes to #formEnjoy that it is in a Bootstrap modal.

I hope I’ve been clear, because I’ve been trying this for hours.

Grateful

javascript jquery bootstrap-3

  • I believe you do not need to use $('#formFruta') to identify the element, just use ('#formFruta'). It would look like this: $("#divConsult"). clone(). appendTo("#formFruta");

  • 1

    @Ricardo reading the documentation (http://api.jquery.com/appendto/) the method appendTo accepts as parameter: selector, element, HTML string, array of elements or jQuery object, hence the $('#formFruta') is a valid value. The problem must be another.

  • The element with the ID formFruta is there at the time the append is run? Is there an error? Take a look at the browser console to see if any Exception is fired.

3 answers

1


The problem may be that when you try to insert cloned element content #divConsulta, the modal content has not yet been inserted in the GIFT and therefore the #formFruta is not yet available for manipulation with Javascript.

Try the events shown.bs.modal or show.bs.modal boostrap:

$("#update-modal").on('show.bs.modal', function () {
    $("#divConsulta").clone().appendTo($("#formFruta"));
});

I hope I’ve helped.

  • It worked perfectly. Thank you very much

0

Try as follows: $("#divConsult"). clone(). appendTo("#formFruta");

Take a look at this test I did, see if it helps you: plunker

  • Reading the documentation (api.jquery.com/appendto) the appendTo method accepts as parameter: selector, element, HTML string, element array or jQuery object, so $('#formFruta') is a valid value.

0

I think the best form of doing this is with the append and not the appendTo. You can use it like this: 

var div = $("#divConsulta").clone();
$("#formFruta").append(div);

That way you’re adding cloned content to the form.

Browser other questions tagged javascript jquery bootstrap-3

You are not signed in. Login or sign up in order to post.