Unable to Clone HTML & Values into jQuery Datatables 1.10

Question

This question has been asked on a few occasions, for example:

Store Cloned Element in Variable

Copy DOM Element

However, I'm having issues selecting say <div id="XYZ"></div> and cloning it to a variable for the jQuery DataTable fnStateSaveParams to save. When the page refreshes it is then meant to reload the cloned object back into the HTML via fnStateLoadParams. I am trying to use .clone() over .html() because I also need the values stored within the dynamically generated textboxes.

If I'm not saving and loading via the Datatables plugin, then it works perfectly. As soon as I try calling code similar to the below then it ceases to work (please bare in mind I've tried a number of variations to the below code). Has anyone got any ideas or suggestions?

"fnStateSaveParams": function (oSettings, oData) {
    var clonedHtml= $("#XYZ").clone(true);
    oData.storedHtml = clonedHtml;
},
"fnStateLoadParams": function (oSettings, oData) {
    //$("#displayHtml").append(oData.storedHtml);
    //$("#displayHtml").html(oData.storedHtml);
    //$(oData.storedHtml).prependTo("#displayHtml")
}

<div id="XYZ">
    <div data-template="">
        <label class="bolder"></label>

        <div class="input-append">
            <div class="inline-block advancedSearchItem">
                <input type="text" id="test1" value="Test Scenario" />
            </div>

            <a href="#" data-id="" class="btn btn-small btn-danger removeField">
                <div class="hidden-phone">Remove</div>
                <i class="icon-trash icon-only hidden-tablet hidden-desktop"></i>
            </a>
        </div>
    </div>
</div>

The end scenario will be more complex, however the above is the simplest form of what I am trying to create. If you need more information, feel free to ask and I'll update the question accordingly.

Answer 1

I didn't find a way of utilising .clone() to grab all HTML and Text Box values. However, I did come up with a solution and the code below is for anyone who needs a reference point.

Using .html() (as most will know) will only copy the available HTML and ignore what is essentially 'placeholder' text within text fields. My solution though is to force the value into the HTML rather than being treated as 'placeholder' text, this allows it to be used again when the page is loaded.

$(document).on("click", "#advancedSearchButton", function(event) {
    event.preventDefault();

    // DO SOME STUFF HERE

    $("[data-value]").each(function(index) {
        if (index > 0) {
            fieldCount++;
            $(this).attr("value", $(this).val());
        }
    });

    oTable.fnFilter("");
});

function loadData() {
    // ... ... ...
    "fnStateSaveParams": function(oSettings, oData) {
        oData.advancedSearchHtml = $("#addedSearchFields").html();
        oData.fieldCount = fieldCount;
        oData.isAdvancedSearch = isAdvancedSearch;
    },
    "fnStateLoadParams": function(oSettings, oData) {
        $("#addedSearchFields").html(oData.advancedSearchHtml);

        if (oData.isAdvancedSearch == true) {
            $("#collapseElement").removeClass("collapsed");
            $("#collapseIcon").removeClass().addClass("icon-chevron-up");
            $("#filter").hide();
        }

        isAdvancedSearch = oData.isAdvancedSearch;
        advancedSearchFields = oData.fieldCount;
    }
    // ... ... ...
}