How Save document.body to variable and load from that variable again

Question

The $("body").load("myUrl") function in jQuery allows the html content of a file to be loaded into the body, in which case all the scripts in the html file in the body are loaded and executed correctly. How to provide html content from a variable to body instead of loading it from a file. For example, consider that:

in index.html :

  <script>
        window.keeper = null;  


        function callForm2() {

            window.keeper = window.document.body;

            $("body").load(
                "Form2.html"
            );

        }


        function closeForm2() {

            window.document.body = window.keeper;

        }
    </script>

in callForm2 Before the body content is called from a file, the current body content stored in a window.keeper variable.

in closeForm2() , I want to take the content from the window.keeper variable (old body content) and set to current body, in which case the content of the variable is not equal to the previously saved one, and I can not return the original content of the variable.

So how do I save the current body content of a variable for the next call? What is the correct way to save and call in this case?

here is my code: (you can also see https://github.com/yarandish/Challenge2 )

Answer 1

I Solved you problem and putting demo here. Your Solution is here: https://github.com/Master2V/FormCallSolution.git

In index.html put this script in head:

    <script>

    window.keeper = null;

    function callForm2() {

        var $body_page = $('body #Page');
        window.keeper = $body_page;
        $body_page.detach();

        $.ajax({
            type: "GET",
            url: "Form2.html",
            data: "",
            dataType: "html",
            success: function (response) {
                $("body").html(response);
            }
        });
    }

    function closeForm2() {

        var $body_page = $('body #Page');
        $body_page.detach();
        
        var $body = $('body');
        $body.append(window.keeper);

    }

</script>

And you must have a div tag with id="Page" in index.html and any other forms that you want to call.

Answer 2

Consider the following.

 window.keeper = {}; $(function() { $("#psudo_body > p").click(function() { window.keeper.html = $("#psudo_body").html(); window.keeper.text = $("#psudo_body").text(); console.log("Stored", window.keeper); var form = $("<form>", { id: "myForm" }); $("<button>", { type: "submit" }).html("Done").appendTo(form); $("#psudo_body").html(form); }); $("body").on("submit", "#myForm", function(event) { event.preventDefault(); $("#psudo_body").html(keeper.html); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="psudo_body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum elit sit amet mi molestie, ac commodo nibh blandit. Proin a tellus efficitur dui commodo varius. Nullam massa nunc, mollis in finibus ac, volutpat eu urna. Maecenas quis sodales felis, non finibus lorem. Aliquam tristique, dolor vitae consequat commodo, augue sem porta ex, eu tincidunt lectus orci ut elit. Integer nec enim eu erat pulvinar pretium eu id lorem. Sed et dapibus ligula, a rhoncus augue. Fusce et purus in diam aliquet accumsan. Curabitur mattis, ante quis tempor luctus, ante sapien dignissim metus, sit amet maximus ante lorem eu turpis. Praesent in sodales velit. Suspendisse varius ornare faucibus. Suspendisse maximus erat sodales, tincidunt nulla sit amet, fermentum ligula. Donec sed sollicitudin nunc. Phasellus vitae mauris bibendum, fringilla orci id, sodales libero. Donec at ullamcorper lectus. Proin dui enim, venenatis quis euismod vulputate, blandit sit amet nibh.</p> </div>

This would work for body element as well.

You can also use .data() in a similar way.

 $(function() { $("#psudo_body > p").click(function() { $("#psudo_body").data("keeper", $("#psudo_body").html()); var form = $("<form>", { id: "myForm" }); $("<button>", { type: "submit" }).html("Done").appendTo(form); $("#psudo_body").html(form); }); $("body").on("submit", "#myForm", function(event) { event.preventDefault(); $("#psudo_body").html($("#psudo_body").data("keeper")); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="psudo_body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum elit sit amet mi molestie, ac commodo nibh blandit. Proin a tellus efficitur dui commodo varius. Nullam massa nunc, mollis in finibus ac, volutpat eu urna. Maecenas quis sodales felis, non finibus lorem. Aliquam tristique, dolor vitae consequat commodo, augue sem porta ex, eu tincidunt lectus orci ut elit. Integer nec enim eu erat pulvinar pretium eu id lorem. Sed et dapibus ligula, a rhoncus augue. Fusce et purus in diam aliquet accumsan. Curabitur mattis, ante quis tempor luctus, ante sapien dignissim metus, sit amet maximus ante lorem eu turpis. Praesent in sodales velit. Suspendisse varius ornare faucibus. Suspendisse maximus erat sodales, tincidunt nulla sit amet, fermentum ligula. Donec sed sollicitudin nunc. Phasellus vitae mauris bibendum, fringilla orci id, sodales libero. Donec at ullamcorper lectus. Proin dui enim, venenatis quis euismod vulputate, blandit sit amet nibh.</p> </div>

See Also: Storing a variable in the JavaScript 'window' object is a proper way to use that object?