components that does not disappear
<p>We are creating a CMS-like program as our thesis. Our problem with our modules is that when we append the components to the working area, that is to click and drag to the desired place, when we refresh the same page, all the components disappear. how to solve such problem? is there a way to prevent it? Your help is much appreciated..:D</p>

<p>here is the code. </p>

<pre><code>$("#dialog3").dialog({
            modal: true,
            resizable: false,
            position: "center",
            buttons: {
                "Ok": function() {
                        $( this ).dialog( "close" );    
                        var pos2 = document.getElementById("compPart2").value;
                                                    if ($counter &lt; 20)
                                                    { $counter++;
                                                       if(pos2=="header"){
                                                        // document.getElementbyId("workarea").innerHTML += '&lt;div class="inside" style="background: none; width: 400px;"&gt;&lt;p class="editme2" id="edited'+$counter+'"&gt;Click me twice to add text and drag me to where you want me to be.&lt;/p&gt;&lt;/div&gt;';
                                                      $('#workarea').append( '&lt;div class="inside" style="background: none; width: 400px;"&gt;&lt;p class="editme2" id="edited'+$counter+'"&gt;Click me twice to add text and drag me to where you want me to be.&lt;/p&gt;&lt;/div&gt;');
                                                      $( '.inside' ).

                                                      resizable().draggable({ containment: '#workarea' }); }

                                                       else if(pos2=="body"){
                                                      $('#workarea').append( '&lt;div class="inside" style="background: none; width: 400px;"&gt;&lt;p class="editme2" id="edited'+$counter+'"&gt;Click me twice to add text and drag me to where you want me to be.&lt;/p&gt;&lt;/div&gt;');
                                                      $( '.inside' ).resizable().draggable({ containment: '#workarea' }); }

                                                       else if(pos2=="footer"){
                                                      $('#workarea').append( '&lt;div class="inside" style="background: none; width: 400px;"&gt;&lt;p class="editme2" id="edited'+$counter+'"&gt;Click me twice to add text and drag me to where you want me to be.&lt;/p&gt;&lt;/div&gt;');
                                                      $( '.inside' ).resizable().draggable({ containment: '#workarea' }); }
                                                       }

                },
                Cancel: function() { $( this ).dialog( "close" ); }
            }
        });
    });
&lt;/script&gt;
</code></pre>
