JavaScript stops working after partial refresh

Question

I have placed JavaScript in an update panel with the hope that it would run. One particular script applies bootstrap pagination to the grid view. However when the page button is clicked and the update panel is refreshed the script stops working and the buttons revert back to links. I have tried a number of things such as turning the update panel mode to "always", unfortunately nothing seems to work.

I am not proficient when it comes to JavaScript. It would be highly appreciated if there any you could do to help.

    <asp:UpdatePanel ID="UpdatePanel13" runat="server" UpdateMode="Always" >

             <ContentTemplate>

          <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
        <script src="Scripts/js/bs.pagination.js"> </script>


             </ContentTemplate>

         </asp:UpdatePanel>

Answer 1

You should have your script includes outside the update panel, put them back within the head tag.

You can try to manually invoke the javascript, you can do that in this fashion:

protected void Page_Load(object sender, EventArgs e)
{
    [...]
    ScriptManager.RegisterStartupScript(this, typeof(UpdatePanel), Guid.NewGuid().ToString(), "NameOfFunctionToInitialiseJavaScript()", true);
    [...]
}

NameOfFunctionToInitialiseJavaScript() probably needs to be pageLoad() or whatever bs.pagination.js is using.

EDITED TO ADD:

There is another solution, taken from here: Add some css styling either to the page or a separately included CSS file (don't add to the Bootstrap.css, it's not smart to modify that in case it changes):

.pagination-ys {
    /*display: inline-block;*/
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

.pagination-ys table > tbody > tr > td {
    display: inline;
}

.pagination-ys table > tbody > tr > td > a,
.pagination-ys table > tbody > tr > td > span {
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #dd4814;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    margin-left: -1px;
}

.pagination-ys table > tbody > tr > td > span {
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;    
    margin-left: -1px;
    z-index: 2;
    color: #aea79f;
    background-color: #f5f5f5;
    border-color: #dddddd;
    cursor: default;
}

.pagination-ys table > tbody > tr > td:first-child > a,
.pagination-ys table > tbody > tr > td:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.pagination-ys table > tbody > tr > td:last-child > a,
.pagination-ys table > tbody > tr > td:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.pagination-ys table > tbody > tr > td > a:hover,
.pagination-ys table > tbody > tr > td > span:hover,
.pagination-ys table > tbody > tr > td > a:focus,
.pagination-ys table > tbody > tr > td > span:focus {
    color: #97310e;
    background-color: #eeeeee;
    border-color: #dddddd;
}

Then all you need to do is add the styling to the GridView:

<asp:GridView ID="MyGridView" runat="server">
    <PagerStyle CssClass="pagination-ys" />
</asp:GridView>