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>

With buttons

without buttons

possible duplicate of [Running script after Update panel AJAX asp.net](http://stackoverflow.com/questions/9026496/running-script-after-update-panel-ajax-asp-net) — emerson.marini, Mar 11 '15 at 11:17
i have checked the link you provided but i am not proficient when it comes to java script so i wouldn't know how to apply it. please help — user3052409, Mar 11 '15 at 11:23
@user3052409 can you update your question explaining why this is not a duplicate? If you can't solve this with the other question, maybe you require further information, but what exactly? — Sklivvz, Mar 11 '15 at 11:26
I looked at the other question and it says to apply this code — user3052409, Mar 11 '15 at 11:37
would this be the only thing that i would have to do for the scripts in the update panel to work — user3052409, Mar 11 '15 at 11:38

Hugo Yates · Accepted Answer · 2015-03-11T13:03:17.967

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>

I took the code out of the java script file and placed it at in the header section between script tags and it worked. If anything your answer lead me in the right direction. Thanks brada! — user3052409, Mar 11 '15 at 15:53

JavaScript stops working after partial refresh

1 Answers1