code.extend(): Ajax

Problem :

This problem is related to the use of jquery with ASP.NET Update panel, I encountered it when i was trying to make a event scheduler using the update panel.
The problem was that when i load the new data in update panel, or when i fire an post-back asynchronously the event handlers of jquery attached to the previous dom inside the update panel gets lost. and i need to attach the events to newly updated dom elements.

Solution :

I begin my thought process and a ♫♪Tding♥♥♥ idea came into my mind, that when ever an ajax request is completed a request complete event is fired. Thus i need to capture this event and reinitialize my jquery code at the request completion.

After reading a lot of documentations over Microsoft AJAX i discovered the code below.

Sys.WebForms.PageRequestManager.getInstance().add_endRequest( yourCallBackFunction );

And yes this line of code calls your function when ever any ajax request completes on the page. and of course this is the extension to Microsoft AJAX Framework.

Below is a complete demo of code.

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
function () {

$('#Calender li').each(function (index) {
var Prev = $(this);
$(this).find('p').click(function () {
Prev.find('p').css('background-color', '');
$(this).css('background-color', '#111');
});
})

});

simply you can test as: (or i must say cup cake steps)

1. put a scriptmanager on the page
2. place an update panel on your page
3. put some buttons inside update panel
4. copy the following code and paste somewhere inside your page

<script type="text/javascript">

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
function () {
alert('Request completed');
});

</script>

Thanks for reading hope this will help you some where..

This concept is the solution of problem that,

How to send data from a server to a client without a native HTTP request made by client.This can be implemented in Chatting Applications, Automatic updates of some data.

So what is this ?

Comet is a programming technique that enables web servers to send data to the client without having any need for the client to request it. It allows creation of event-driven web applications which are hosted in the browser.

Try reading from this . http://en.wikipedia.org/wiki/Comet_%28programming%29

From where do i got to know of this is http://stackoverflow.com/questions/3226688/web-chat-application-asp-net-jabber-ajax-wcf-comet-reverseajax-issues-faced

Here is finally wot i got and believe me its Awesome :)

1. create a new c# web application

2. Add a new page name it Services.aspx
3. in the code file i.e. Services.aspx.cs add the following code.

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Service : System.Web.UI.Page
{
public static string Delimiter = "|";

protected void Page_Load(object sender, EventArgs e)
{
Response.Buffer = false;

while (true)
{
Response.Write(Delimiter + DateTime.Now.ToString("HH:mm:ss.FFF"));
Response.Flush();

// Suspend the thread for 1/2 a second
System.Threading.Thread.Sleep(500);
}

// Yes I know we'll never get here, it's just hard not to include it!
Response.End();
}
}

4. Good Now add a html page say home.html and add this code to it.

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Comet AJAX Sample</title>

    <script language="javascript">

      function getData()

{

          loadXMLDoc("Service.aspx");

}

      var req = false;

      function createRequest()

{

        // branch for native XMLHttpRequest object

        if(window.XMLHttpRequest && !(window.ActiveXObject))

{

          try {

            req = new XMLHttpRequest();

          } catch(e) {

      req = false;

}

        // branch for IE/Windows ActiveX version

        } else if(window.ActiveXObject) {

          try {

            req = new ActiveXObject("Msxml2.XMLHTTP");

          } catch(e) {

            try {

          req = new ActiveXObject("Microsoft.XMLHTTP");

         } catch(e) {

          req = false;

}

}

}

}

      function loadXMLDoc(url) {

try

{

              if (req) {

                  req.abort();

                  req = false;

}

              createRequest();

              if (req) {

              req.onreadystatechange = processReqChange;

              req.open("GET", url, true);

              req.send("");

}

           else {

               alert('unable to create request');

}

}

       catch (e) {

           alert(e.message);

}

}

      function processReqChange() {

          if (req.readyState == 3) {

try

{

                  ProcessInput(req.responseText);

                  // At some (artibrary) length 

                  // recycle the connection

                  if (req.responseText.length > 3000) {

                      lastDelimiterPosition = -1;

                      getData();

}

}

              catch (e) {

                  alert(e.message);

}

}

}

      var lastDelimiterPosition = -1;

      function ProcessInput(input)

{

          // Make a copy of the input

          var text = input;

          // Search for the last instance of the delimiter

          var nextDelimiter = 

                text.indexOf('|', lastDelimiterPosition+1);

          if (nextDelimiter != -1) {

              // Pull out the latest message

              var timeStamp = text.substring(nextDelimiter+1);

              if (timeStamp.length > 0) {

                  lastDelimiterPosition = nextDelimiter;

                  ProcessTime(timeStamp);

}

}

}

      function ProcessTime(time)

{

          var out = document.getElementById('outputZone');

          out.innerHTML = time;

}

    </script>

</head>

<body onload="getData()">

    <b>Server Time:</b>&nbsp;&nbsp;<span id="outputZone"></span>

</body>

</html>

5. And yes you have done it Now run your html page.

You will see that the time is Continuously updating and yeah this is server time also check out that the browser is not sending any AJAX requests.

code.extend()

May 7, 2012

Get the request complete event of ASP.NET Update Panel

Apr 16, 2012

COMET or Reverse Ajax

About Me