How can I reload javascript and css after asp gridview is refreshed in updatepanel?

Question

I have an asp.net Gridview where users can insert update and deleted rows. With the code below, the users can drag a row up and down the gridview and update the position.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function myFunction() {

    $("[id*=GridView1]").sortable({
        items: 'tr:not(tr:first-child)',
        cursor: 'pointer',
        axis: 'y',
        dropOnEmpty: false,
        start: function (e, ui) {
            ui.item.addClass("selected");
        },
        stop: function (e, ui) {
            ui.item.removeClass("selected");
        },
        receive: function (e, ui) {
            $(this).find("tbody").append(ui.item);
        }
    });
});
</script>

My issue is whenever a user inserts or updates a row, they can no longer drag and reorder any rows unless the page is refreshed. How can I resolve this issue?

Answer 1

I resolved this by just putting myFunction inside pageLoad as follows:

<script type="text/javascript" language="javascript">
    function pageLoad() {
        $("[id*=GridView1]").sortable({
            items: 'tr:not(tr:first-child)',
            cursor: 'pointer',
            axis: 'y',
            dropOnEmpty: false,
            start: function (e, ui) {
                ui.item.addClass("selected");
            },
            stop: function (e, ui) {
                ui.item.removeClass("selected");
            },
            receive: function (e, ui) {
                $(this).find("tbody").append(ui.item);
            }
        })
    };
</script>