0

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)

reza esmaili
  • 41
  • 5
  • I am really confused by what you are trying to accomplish and it feels like a "really bad idea" without more context. Why not use `window.keeper = $("body").html();` and `$("body").html(window.keeper);`? – Twisty Jan 30 '22 at 16:54
  • thanks Twisty. but when restore my body from saved html, method and values and scripts not worked anymore...my new code explain my problem...https://github.com/yarandish/challenge2edited.git – reza esmaili Jan 31 '22 at 07:13

2 Answers2

0

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?

Twisty
  • 30,304
  • 2
  • 26
  • 45
  • special thanks to you dear Twisty.but when restore my body from saved html, method and values and scripts not worked anymore...my new code explain my problem...https://github.com/yarandish/challenge2edited.git – reza esmaili Jan 31 '22 at 07:14
  • @rezaesmaili yes that would be the expected behavior. You're copying the HTML, so bound events and other parts will not be collected. – Twisty Jan 31 '22 at 15:39
  • @rezaesmaili if you want, you could Hide the form. This way when it is revealed again, all the previous values and such would be there. – Twisty Jan 31 '22 at 16:27
0

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.

Vahid Momeny
  • 77
  • 8