Critical Developers

Programmers Knowledge Base

jQuery script not working inside asp.net updatepanel

Solved : jQuery not working inside asp.net update panel

Eg:- As Usual Call of Script

<script type="text/javascript">
     $(document).ready(function() {
     $(function() {
     $('#gallery1 a').lightBox();   //jquery lightbox is taken as example
     });
     });
</script>

The jQuery script wont work after partial postback i.e our ajax request. If you try to call any jQuery script inside an asp.net updatepanel, script will not work after the first ajax request. To resolve it, call the jquery script again  as written here :-

Eg:- When you are using asp.net update panel call it again like as follow

<script type="text/javascript">
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {  
$('#gallery1 a').lightBox();   //jquery lightbox is taken as example  
 }
 }
</script>

                                                                             OR

Call your script again on page_load event (either individual aspx page or MasterPage if using)

protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "mykey", "$(document).ready(function() { $('#gallery1 a').lightBox(); });", true);
    }

NOTE:-

pageLoad is executed after every postback, synchronous or asynchronous. pageLoad is a inbuilt function name in ASP.NET AJAX act as handler to the Sys.Application.load event (e.g. Sys.Application.add_load(handler)).

$(document).ready() on the other hand, is executed only once, when the DOM is initially ready/loaded.