Everything Happens By Mistake: AJAX

Showing posts with label AJAX. Show all posts

Mar 26, 2014

How to Display Loading Image with AJAX-Auto Complete

After long time I had a chance to update my Blog.

In this post I’m going to show you how to display data fetching progress with AJAX Auto Complete extender.

This is very simple.

Add ASP Text box to the page (ID=TextBox1)
Add AJAX AutoCompleteExtender
Insert following javascript code to the web page
```
<script type="text/javascript">
```
```
    function ShowImage() {
```
```
        document.getElementById('TextBox1')
```
```
             .style.backgroundImage = 'url(images/loader.gif)';
```
```
 
```
```
        document.getElementById('TextBox1')
```
```
                           .style.backgroundRepeat = 'no-repeat';
```
```
 
```
```
        document.getElementById('TextBox1')
```
```
                           .style.backgroundPosition = 'right';
```
```
    }
```
```
    function HideImage() {
```
```
        document.getElementById('TextBox1')
```
```
                             .style.backgroundImage = 'none';
```
```
    }
```
```
ript>
```

Set OnClientPopulating=ShowImage and OnClientPopulated=HideImage events of AutoCompleteExtender. Complete markup as below.

<asp:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server"      DelimiterCharacters="" Enabled="True" ServicePath="WebService1.asmx" TargetControlID="TextBox1"    ServiceMethod="GetCompletionList" MinimumPrefixLength="2"    OnClientPopulating="ShowImage" OnClientPopulated="HideImage"  />

Aug 27, 2010

The status code returned from the server was 12029

Figure 1: Ajax exception

This error code coming from Microsoft Win32 Internet (WinInet) API, which provides abstracts the protocols into high level interface.

12029       ERROR_INTERNET_CANNOT_CONNECT
               The attempt to connect to the server failed.

Useful links:

Oct 3, 2009

Update Progress with AJAX UpdatePanel

In this post I will demonstrate how to create update progress with UpdatePanel, a similar one that we can see in our gmail, like following,

Following key things to be addressed.

It should be on top-center of the page
It should be on top all other HTML controls
When scrolling it should be placed on relative position of the current scroll position.

To achieve this we can use many alternatives but I would use a simple approach.
In addition to the UpdatePanel, I will use </div>, CSS style and javaScript.

Here we go.

Add a div tag within body element.
```
<div class="divProg" id="divProg"></div>
```
Note that id and class attributes are necessary.

Add following css class to the web page or style sheet file. Keep in mind, without position: absolute; z-index: 10; css properties this won’t work as we expected.

.divProg
{
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100px;
 height: 0px;
 z-index: 10;
 border: 1px none #000000;
 visibility: hidden;
 background-color: #FFF1A8;
 font-weight: bold;
 padding: 5px 10px 5px 10px;
}

Now we want to display div on top-center of the screen as well as move its top position relative to the current scroll position. To address this we will creates following 3 javascript functions.
To get current Y position of scroll,

function getScroll_Y() 
{
        return document.documentElement.scrollTop;  
}

To set current top position of div,

function setDivTop() 
{

        if (document.getElementById("divProg") != null) {
            theDiv= document.getElementById("divProg");
        }
        else {
            return;
        }
        theDiv.style.top = getScroll_Y() + "px";
}

Write a function to toggle display for the div.

function displayDiv(display) 
{
    if (document.getElementById("divProg") != null) {
        theDiv = document.getElementById("divProg");
    }
    else {
        return;
    }

    if (display) {
        var width = document.body.offsetWidth;
        var height = document.body.offsetHeight;
        if (!width) {
            width = window.innerWidth;
            height = window.innerHeight;

            if (!width) {
                width = screen.width;
                height = screen.height;
            }
        }
        // To center the div, we need to deduct its half of
        // width from half of screen width. So we set div width =100
        // in css, so that deduct by 50
        theDiv.style.left = width / 2 - 50;
        theDiv.style.top = getScroll_Y();
        theDiv.style.height = 25;
        theDiv.innerText = 'Working...';
        theDiv.style.visibility = 'visible';

    }
    else {
        theDiv.style.visibility = 'hidden';
    }
}

Now we want to handle request start and request end events. we will be able to use following code with assist of ajax extension library.

// Requests Events
// ============================================
var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);

function InitializeRequest(sender, args) {
    if (prm.get_isInAsyncPostBack()) {
        args.set_cancel(true);
    }
    displayDiv(true);
  

}
function EndRequest(sender, args) {
    if (args.get_error()) {
        alert(args.get_error().message);
        args.set_errorHandled(true);

    }
    displayDiv(false);
}

//===============================================

Set page's scroll event,
```
<body onscroll="setDivTop()">
```

	Download Sample
	File Size: 18K

Nov 20, 2007

Why AJAX Update Panel Causing Errors?

AJAX update panel, throw an error if we use methods such as Response.Write(), Server.Transfer() etc. But it's works fine with Response.Redirect() method.

This is really happen to me. As my knowledge I suppose, because Update Panel process response proportionally or fetch only changes to the current response, instead of whole response. That's why we cant see the whole page get refreshed even if a post back occurs.

In my web application, when user click on print button it should bring up a new pop-up window with the preview. Since this button is inside the UpdatePanel it throws an exception.


protected void OnPrintClick(object sender, EventAgrs e)
{
Response.Write("<script type=\"text/javascript\">window.open(\"reports.aspx\",\"\",\"toolbar=0,
menubar=0,resizable=yes\");</script>");
}

When run this line, I got following error.

I change above code as follows,



protected void OnPrintClick(object sender, EventAgrs e)
{
StringBuilder _sb = new StringBuilder();
_sb.Append("window.open('reports.aspx','',");
_sb.Append("'toolbar=0,menubar=0,resizable=yes')");
// Register java script to the ScriptManager.
ScriptManager.RegisterStartupScript(Page, Page.GetType(),
"winOpen", _sb.ToString(), true);
}

It works now as I expected.

Everything Happens By Mistake