JavaScript not working after AJAX postback (jQuery Backstretch and Telerik RadAjaxManager)

Question

I am using jQuery Backstretch (http://srobbin.com/jquery-plugins/backstretch/), but after an AJAX update via an RadAjaxManager AjaxRequest (kicked off clientside), it dies.

I have tried re-initializing after the AJAX, but no dice. Other jQuery plugins are still working though (i.e. Countdown for jQuery - http://keith-wood.name/countdown.html).

JS Page Load:

$(document).ready(function () {
  $('#timer').countdown({
    until: new Date(2014, 5 - 1, 1)
  });

  $.backstretch([
    'images/bg1.jpg',
    'images/bg2.jpg',
    'images/bg3.jpg'
     ], {
     fade: 750,
     duration: 4000
  });
});

Javascript called for a button click:

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest();

VB:

Protected Sub RadAjaxManager1_AjaxRequest(sender As Object, e As AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest
    'Do something
End Sub

After the AjaxRequest has run, the Countdown is still running, but the Backstretch images have disappeared!

Help?

Answer 1

Wrap your function into a self invoke function as this:

(function($){
  $(document).ready(function () {
 ...
  });
});})($telerik.$)

this will load the jquery from the telerik libraries.

As for the reason it has something to do with the way Telerik handles ajax and it does not load jquery from your references libraries.

Answer 2

You may wish to rebind to the IDs.

Otherwise, for the purpose of debugging, please try to re-run the js script after the ajax call.

 $(document).ready(function(){
       //your ajax call
       $.getScript("jquery.min.js");
 });