Reload div no external file

Question

I have a list of images which I can order. I use this code to order the images:

$(document).ready(function(){ 
    $(function() 
    {
        $("#subafbeelding ul").sortable(
        { 
            opacity: 0.6, 
            cursor: 'move', 
            update: function(){
                var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
                $(".hoofdafbeelding").load("foo.php");
                $.post("updatevolgoorde.php", order, function(theResponse)
                {
                    $("#contentRight").html(theResponse);

                });                                                              
            }                                 
        });
    });
}); 

after

  $("#contentRight").html(theResponse);

I want to reload the div heading. How can I make this?

Answer 1

One option you could take is to make a copy of the html when you load the page. Store it in a hidden element, and then re-use that when you want to 'reload' the html.

Something like this:

$("#storage").html($("#original").html());

function addEvents() {
    $("#original ul").sortable({
        opacity: 0.6,
        cursor: 'move',
        update: function () {

        }
    });
}
addEvents();

$("#reset").click(function (e) {
    e.preventDefault();
    $("#original").html($("#storage").html());
    addEvents();
});

which works on the following html:

<div id="original">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>
<div id="storage"></div>
<div> 
    <a id="reset">reset</a>
</div>

Here is a working example.