Hi together,

I’m trying to save the content from a div to a javascript variable before loading new content to the div.

The goal is that I get the whole content of a previous page with all user entries and several jquery UI Widgets to the div without loading the data from the server again.

I’m trying to solve the problem with jQuery clone, but I have several problems with the jquery UI Widgets und jqGrid.

Here is my first try:

test.html

1. <script type="text/javascript">
   var currentPage = 0;
   var url = "./content.html";
   var frameContents = new Array();
   
   function nextFrame() {
       if(currentPage!=0){
           frameContents[currentPage]["divContent"]=$('#mainContent').clone( true );
           var selects = $('#mainContent').find("select");
           $(selects).each(function(i) {
               var select = this;
               frameContents[currentPage]["divContent"].find("select").eq(i).val($(select).val());
               });
           }
       currentPage++;
       frameContents[currentPage]=new Array();
       loadPageGet();
       }
   
   function prevFrame() {
       frameContents[currentPage]=null;
       currentPage--;
       $('#mainContent').html(frameContents[currentPage]["divContent"]);
       }
   
   function loadPageGet(){
       $.get(url, function( data ) {
           $('#mainContent').html( data );
           });
       }
   
   $(function() {
       nextFrame();
       });
   </script>
   <button onclick="prevFrame()">prevFrame</button>
   <button onclick="nextFrame()">nextFrame</button>
   <div id="mainContent" style="width:100%;height:100px;display:inline;border: 5px solid orange;background-color:#ffffff;"></div>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

content.html

1. <form id="myForm">
   <script type="text/javascript">  
   $(function() {
      
   $( "#datepicker" ).datepicker({
       dateFormat: "yy/mm/dd"
       });
   $( "#tabs" ).tabs();
   $( "#accordion" ).accordion({active:9});
                      
   $("#list451").jqGrid({
           url:"data.json",
           datatype: "local",
           height: 255,
           width: 100,
           autowidth: true,
           headertitles: true,
              colNames:['Index','Name', 'Code','Status'],
              colModel:[
                  {name:'item_id2',title:'myTest', index:'item_id2', width:65,  sorttype:'integer', searchoptions:{sopt:['eq','ne','le','lt','gt','ge']},defaultValue:'test'},
                  {name:'item',index:'item', width:150, sorttype:'string', searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}},
                  {name:'item_cd',index:'item_cd', width:100, stype:'select',stype:'select',editoptions:{value:":;1:AAA;2:BBB;3:CCC"}    },
               {name:'item_state',index:'item_state',stype:'select',editoptions:{value:":;4:DDD;5:EEE;6:FFF"},resizable:true}
                  ],
           rowNum:50,
           rowTotal: 200,
           rowList : [1,5,10,20,30,50],
           loadonce:false,
              mtype: "GET",
              loadui: "block",
           rownumbers: true,
           rownumWidth: 40,
           gridview: true, //renders a data 3-5 time faster
              pager: '#pager451',
              sortname: 'item_id',
              sortable: true, // reordering column
           viewrecords: true,
           sortorder: "asc",
           caption: "Loading data from server at once",
       });
       $("#list451").jqGrid('filterToolbar',{searchOperators : true});
       $("#list451").jqGrid('navGrid','#pager451',{add:false,edit:false,del:false,search:true,refresh:true});
       $("#list451").jqGrid('setGridParam',{'datatype':'json','emptyrecords': 'no records'});
       submitGridSearch();
       $("#gview_list451 div:first a:first").replaceWith($("#filterbar"));
   });
   
   function submitGridSearch() {
           console.log("reloadGrid: "+$("#list451").getGridParam('datatype'))
       $('#list451').jqGrid('clearGridData');
       $("#list451").trigger("reloadGrid");
       }
   
   </script>
   <table id="list451"></table>
   <div id="pager451"></div>
   <div id="filterbar"><input id="myField" type="text"><select id="mySelect"><option>A</option><option>B</option><option>C</option></select></div>
   
   <select>
   <option>1</option>
   <option selected>2</option>
   <option>3</option>
   </select>
   
   Date: <input type="text" id="datepicker" />
   
   <div id="tabs">
       <ul>
           <li><a href="#tabs-1">Nunc tincidunt</a></li>
           <li><a href="#tabs-2">Proin dolor</a></li>
           <li><a href="#tabs-3">Aenean lacinia</a></li>
       </ul>
       <div id="tabs-1">tabs-1 - content</div>
       <div id="tabs-2">tabs-2 - content</div>
       <div id="tabs-3">tabs-3 - content</div>
   </div>
   
   <div id="accordion">
       <h3>Section 1</h3><div>Section 1 - content</div>
       <h3>Section 2</h3><div>Section 2 - content</div>
       <h3>Section 3</h3><div>Section 3 - content</div>
       <h3>Section 4</h3><div>Section 4 - content</div>
   </div>
   </form>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

With this code I get the content back to the div after pressing the button prevFrame, but I have several problems with the UI Widgets and jqGrid.