How do I move a div from one page to another?

Question

I have the following div on a page called Transactions.html :

<div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
    <div data-role="collapsible" data-collapsed="false" data-theme="a">
        <h3>$12.62   -  11/01/2012   -   Kelloggs Diner  -  Brooklyn Ny</h3>
        <div data-role="controlgroup"  data-type="horizontal">
            <a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
            <a class="red" href="#" data-role="button">No</a>
            <a class="blue" href="IDK.html" data-transition="slideup" data-role="button">I'm not sure</a>
        </div>
    </div>
</div>

And when I click the link <a>No</a> I want the whole div to move to another Summary.html page. Any ideas? Thanks

Answer 1

You can do it this way. You need to have a wrapper div tag in-order to select the entire html content.

<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('.red').click(function(){
            var divData = $('#dataContainer').html();
        window.location.href = "summarypage.html?data="+divData+"";
        });
    });            
</script>

<div id="dataContainer">
    <div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
        <div data-role="collapsible" data-collapsed="false" data-theme="a">
            <h3>$12.62   -  11/01/2012   -   Kelloggs Diner  -  Brooklyn Ny</h3>
            <div data-role="controlgroup"  data-type="horizontal">
                <a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
                <a class="red" href="#" data-role="button">No</a>
                <a class="blue" href="IDK.html" data-transition="slideup" data-role="button">I'm not sure</a>
            </div>
        </div>
    </div>
</div>

In summary page you need to retrieve the data from the URL. When you run this and click 'NO' link it navigates to summary page and you can see the html values on the summary page URL bar

You can use PHP to retrieve this data using <?php echo $_REQUEST['data']; ?> <?php echo $_REQUEST['data']; ?>

Answer 2

You can't - that's not how the web works. Each HTML page is self-contained and encapsulated.

Some sites, like Github, do little tricks with the JavaScript history API and AJAX to make it appear as though a new page is "partially loaded", when in fact it's the same page.

Answer 3

您可能需要使用PHP或服务器端技术来存储数据，并且需要将静态页面完全转换为动态PHP页面，这需要大量工作。

Answer 4

By using the html it is not possible to transfer the data from one html file to another html file. use the JQuery to perform the data transfer By clicking on the button, speficy in which div or place you want the data to display, by using the load() in Jquery you can load the specific data in another page to your page