0

I have two pages in jquery. When I clicked page two, I want to copy content of pageone to pagetwo. Because I have three pages in another project. I simulated here easily to show my problem. Back to problem, it copies content with id "pageone" but collapsibleset widget doesnt work properly.

Example on JSfiddle

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>
    function showPage(pageId){
           var content = $("#"+pageId).html();
           $("#pagetwo").html(content);
            $("#"+pageId).html("");
           $("#external_page_link").click();
    }


</script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Collapsible Sets</h1>
    </div>

    <a onclick="showPage('pageone')" data-rel="page" class="filter_panel ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" >Page2</a>
  <div id="asd" data-role="main" class="ui-content">
    <div data-role="collapsibleset">
      <div data-role="collapsible">
        <h3>Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
      <div data-role="collapsible">
        <h3>Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
      <div data-role="collapsible">
        <h3>Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
      <div data-role="collapsible">
        <h3>Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
    </div>
  </div>

  <div data-role="footer">
    <h1>Insert Footer Text Here</h1>
  </div>
</div> 
    <a href="#page2" id="external_page_link" ></a>

<div data-role="page2" id="pagetwo">



</div>

</body>
</html>
hkaraoglu
  • 1,345
  • 1
  • 15
  • 34
  • `$('#page2').html($('#page1').html());` simple copy? – mtizziani Apr 03 '17 at 13:45
  • No, it doesnt work... – hkaraoglu Apr 03 '17 at 13:54
  • The immediate solution is to call the init function (`.collapsible()`) again, because you had change in the DOM. The problem is that when you copy the current html from page 1, it includes the html that jquery-ui was added too. For example the plus buttons. So when you call the init function again, it create all the extra elements (such as the plus button) again. So what you should do is to save the html **before** jquery changed the DOM and this is what you should copy. Hope you understand.. – Mosh Feu Apr 03 '17 at 14:02
  • From more info read these questions: http://stackoverflow.com/q/4214538/863110, http://stackoverflow.com/q/9013255/863110 – Mosh Feu Apr 03 '17 at 14:04

0 Answers0