CODEWITHSUNDEEP
jqueryajaxloadclonedynamically-generated
vlatkorun
vlatkorun

Reputation: 127

Clone dynamically added html content with JQuery clone() method

I have a table with rows containing user information.

When some user clicks the <a id="modify1" data-userid="value"> link for that row, there is hidden <div id="formContainer"></div> that gets dynamicaly populated with a <form> tag (via JQuery load('getuserupdateform.php?user_id=X') method) for updating that user.

After the call to load() method, i call another function showModal() that puts <div id="formContainer"></div> (and it's dynamically added content) into a modal window.

But the problem is that the dynamically added <form> element is not present into the modal window.

Here is the relevant code:

    $('a.modify').click(function() {
        $('#formContainer).load('getuserupdateform.php?user_id=X');
        return showModal($(#formContainer));
    });

  showModal = function(element) {
    var modal;
    modal = element.clone();
    //Code for creating the modal window
  }

It appears that the clone() method doesn't clones the dynamically added <form> element.

How can i solve this issue?

Upvotes: 1

Views: 1097

Answers (1)

soundswaste
soundswaste

Reputation: 3074

First of all, you should use $('a#modify1'), since modify1 is ID and not class.

You are running showModal, without checking if load method completed, and so it couldnt find any <form> to clone.

Try putting showModal as a callback to the load function:

$('a#modify').click(function() {
    $('#formContainer).load('getuserupdateform.php?user_id=X', function(){
        return showModal($(#formContainer));
    });
});

This way, showModal will run ONLY when the load request has completed.

Detailed explanation on how callback works : http://api.jquery.com/load/

Upvotes: 1

Related Questions