DotNetIt

Showing Loading Symbol Until Page Loads Completly

Wednesday, June 19, 2013

Its good to restrict Page Access until The Page Completely Loaded.
Demo
HTML to be added to the Page

<div id="spinner"></div>

<div id="spinner"></div>

CSS on the Page

view plain copy to clipboard print ?

#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(Image/preloader-w8-cycle-black.gif) 50% 50% no-repeat #808080;
}

#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(Image/preloader-w8-cycle-black.gif) 50% 50% no-repeat #808080;
}

JavaScript On the Page

view plain copy to clipboard print ?

<script type="text/javascript">
// <![CDATA[
$(window).load(function () { $("#spinner").fadeOut("slow"); })
// ]]></script>

<script type="text/javascript">
// <![CDATA[
$(window).load(function () { $("#spinner").fadeOut("slow"); })
// ]]></script>

Complete HTML

view plain copy to clipboard print ?

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
*background: url(Image/preloader-w8-cycle-black.gif) 50% 50% no-repeat #808080;
}
</style>
<script type="text/javascript">// <![CDATA[
$(window).load(function () { $("#spinner").fadeOut("slow"); })
// ]]></script>
</head>
<body>
<div id="spinner"></div>
</body>
</html>

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <style>

        #spinner {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            *background: url(Image/preloader-w8-cycle-black.gif) 50% 50% no-repeat #808080;
        }
    </style>
    <!-- Preloader --><script type="text/javascript">// <![CDATA[
                      $(window).load(function () { $("#spinner").fadeOut("slow"); })
                      // ]]></script>
</head>
<body>
<div id="spinner"></div>
</body>
</html>

How to Find a Page loaded in Iframe or not

Thursday, June 13, 2013

We can check if a page is loaded in Iframe or not using Javascript -- Why do we need this For me its Iframe APPS
So use the below code in the Iframe Page.Bingo you have the result.

view plain copy to clipboard print ?

<script type="text/javascript">
if (top == self)
alert('Not in an iframe');
else
alert('In an iframe');
</script>

<script type="text/javascript">
    if (top == self)
        alert('Not in an iframe');
    else
        alert('In an iframe');
</script>

Decrease coding lines using AjaxSetup

Monday, June 10, 2013

How do we write out Ajax Call usually

view plain copy to clipboard print ?

$.ajax({
type: 'POST',
url: 'handler.ashx',
contentType: 'application/json',
dataType: 'json',
processData: false,
data: "{}",
//Other code
success: function (response) {
// Update the UI here to reflect that the request was successful.
var result = eval('(' + response.d + ')');
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
if (xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)
return true; // it's not really an error ***Browser reload or exit
else {
// Update the UI here to reflect that the request was unsuccessful
AJAXERROR('[function NAme]::' + xmlHttpRequest.responseText + '::[thrownerror]::' + errorThrown);
}
}
});

$.ajax({
        type: 'POST',
        url: 'handler.ashx',
        contentType: 'application/json',
        dataType: 'json',
        processData: false,
        data: "{}",
        //Other code
        success: function (response) {
            // Update the UI here to reflect that the request was successful.
            var result = eval('(' + response.d + ')');
        },
        error: function (xmlHttpRequest, textStatus, errorThrown) {
            if (xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)
                return true;  // it's not really an error ***Browser reload or exit
            else {
                // Update the UI here to reflect that the request was unsuccessful
                var fnName = arguments.callee.toString();
     fnName = fnName.substr('function '.length);
     fnName = fnName.substr(0, myName.indexOf('('));
                alert('[function NAme]::' + xmlHttpRequest.responseText + '::[thrownerror]::' + errorThrown);
            }
        }
         
    });

Now lets take advantage of the jQuery.ajaxSetup() using this function you can predefine you common code in the Ajax call
Now i will take my normal code and use it in Ajax Setup

view plain copy to clipboard print ?

$.ajaxSetup({
type: 'POST',
contentType: 'application/json',
dataType: 'json',
processData: false,
data: "{}",
error: function (xmlHttpRequest, textStatus, errorThrown) {
if (xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)
return true; // it's not really an error ***Browser reload or exit
else {
// Update the UI here to reflect that the request was unsuccessful
var fnName = arguments.callee.toString();
fnName = fnName.substr('function '.length);
fnName = fnName.substr(0, myName.indexOf('('));
alert('' + xmlHttpRequest.responseText + '::[thrownerror]::' + errorThrown);
}
}
});

$.ajaxSetup({
    type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        processData: false,
        data: "{}",
 error: function (xmlHttpRequest, textStatus, errorThrown) {
            if (xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)
                return true;  // it's not really an error ***Browser reload or exit
            else {
                // Update the UI here to reflect that the request was unsuccessful
  var fnName = arguments.callee.toString();
     fnName = fnName.substr('function '.length);
     fnName = fnName.substr(0, myName.indexOf('('));
                alert('' + xmlHttpRequest.responseText + '::[thrownerror]::' + errorThrown);
            }
        }
});

I use same error function to all so i have added it if you dont need it You can remove it or override it in the Ajax Call Later
As you can see i Have defined most of my Ajax options in the ajaxSetup.Now lets See how the Ajax Call reduces

view plain copy to clipboard print ?

$.ajax({
url: 'handler.ashx',
//Other code
success: function (response) {
// Update the UI here to reflect that the request was successful.
var result = eval('(' + response.d + ')');
//Do needed
}
});

$.ajax({
         
        url: 'handler.ashx',
        //Other code
        success: function (response) {
            // Update the UI here to reflect that the request was successful.
            var result = eval('(' + response.d + ')');
            //Do needed
        }
    });

As you can see we have reducd almost 12 line of code
if we have 10 ajax functions then 12*10 = 120-12=108lines
the size of the file may not decrese by huge.but we can save the last few bytes of Javascript file.
Please provide your FeedBack will meet you in next Post

Find all Stored Procedures Editted and Created In Last few Days

Sunday, June 2, 2013

Now when you are moving from SIT to Production
with a team like I am in trust me its a pain....
but i thought of what can i do to keep track of all this changes join hogwart's and learn magic
then i came across pinal's Article here and vola
Here is the query and visit pinal's site for any info

view plain copy to clipboard print ?

SELECT name FROM sys.objects
WHERE type = 'P'
AND DATEDIFF(D,modify_date, GETDATE()) < 30

SELECT name FROM sys.objects 
WHERE type = 'P' 
AND DATEDIFF(D,modify_date, GETDATE()) < 30

some other types that may be helpful

Object type: AF = Aggregate function (CLR)
C = CHECK constraint
D = DEFAULT (constraint or stand-alone)
F = FOREIGN KEY constraint
FN = SQL scalar function
FS = Assembly (CLR) scalar-function
FT = Assembly (CLR) table-valued function
IF = SQL inline table-valued function
IT = Internal table
P = SQL Stored Procedure
PC = Assembly (CLR) stored-procedure
PG = Plan guide
PK = PRIMARY KEY constraint
R = Rule (old-style, stand-alone)
RF = Replication-filter-procedure
S = System base table
SN = Synonym
SO = Sequence object
SQ = Service queue
TA = Assembly (CLR) DML trigger
TF = SQL table-valued-function
TR = SQL DML trigger
TT = Table type
U = Table (user-defined)
UQ = UNIQUE constraint
V = View
X = Extended stored procedure

Loading JS file dynamically with callback function for IE

Friday, May 10, 2013

HI All I have come across a requirement of

Dynamically loading the Javascript file On request.

Its pretty Simple Code

view plain copy to clipboard print ?

<script type="text/javascript">
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = 'JScriptDynamic.js';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>

<script type="text/javascript">
        function loadScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = 'JScriptDynamic.js';
            document.body.appendChild(script);
        }
        window.onload = loadScript;
</script>

view plain copy to clipboard print ?

$(function(){
alert('FileLoaded');
})

$(function(){
alert('FileLoaded');
})

Now I am happy the file is loaded and i get alert saying

FileLoaded

now lets try to change the code little bit

view plain copy to clipboard print ?

<script type="text/javascript">
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = 'JScriptDynamic.js';
document.body.appendChild(script);
alertload();
}
window.onload = loadScript;
</script>

<script type="text/javascript">
        function loadScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = 'JScriptDynamic.js';
            document.body.appendChild(script);
            alertload();
        }
        window.onload = loadScript;
    </script>

view plain copy to clipboard print ?

function alertload()
{
alert(FileLoaded);
}

function alertload()
{
 alert(FileLoaded);
}

boom we got a error @alertload();

Microsoft JScript runtime error: Object expected

Lets Dig...Why Does this happen? Ok:) no digging and ploughing its pretty simple logic

JScriptDynamic.js

not yet loaded
So what can we do now?
we know every DOM has a ONLOAD event so lets try this

view plain copy to clipboard print ?

<script type="text/javascript">
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = 'JScriptDynamic.js';
document.body.appendChild(script);
script.onload = function () {
alertme();
}
}
window.onload = loadScript;
</script>

<script type="text/javascript">
        function loadScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = 'JScript1.js';
            document.body.appendChild(script);
            script.onload = function () {
                alertme();
            }
        }
        window.onload = loadScript;
</script>

view plain copy to clipboard print ?

function alertload()
{
alert(FileLoaded);
}

function alertload()
{
 alert(FileLoaded);
}

Yahoo..... Google chrome Showed the alert Now As most of the users still use IE,we need a test on IE
LET THE TEST BEGIN

its been 2 MIN !!!!!!!!!!!!!!!!!!!!!!!!!!!!! Where is my alert BOX?

don't worry IE Doesn't support onload for script element so we have a work around

view plain copy to clipboard print ?

function loadScript( ) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "JScriptDynamic.js";
document.body.appendChild(script);
var browser = navigator.appName;
if (browser = "Microsoft Internet Explorer") {
ieLoadBugFix(script, function () {
//alert('IE');
alertload();
});
}
else {
script.onload = function () {
//alert('nonIE');
alertload()
}
}
}

 function loadScript( ) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "JScriptDynamic";
        document.body.appendChild(script);
        var browser = navigator.appName;
        if (browser = "Microsoft Internet Explorer") {
            ieLoadBugFix(script, function () {
                //alert('IE');
                alertload();
            });
        }
        else {
            script.onload = function () {
                //alert('nonIE');
                alertload()
            }
                }
    }

view plain copy to clipboard print ?

function ieLoadBugFix(scriptElement, callback) {
if (scriptElement.readyState == 'loaded' || scriptElement.readyState == 'completed') {
callback();
} else {
setTimeout(function () { ieLoadBugFix(scriptElement, callback); }, 100);
}
}

function ieLoadBugFix(scriptElement, callback) {
    if (scriptElement.readyState == 'loaded' || scriptElement.readyState == 'completed') {
        callback();
    } else {
        setTimeout(function () { ieLoadBugFix(scriptElement, callback); }, 100);
    }
}

Now the Above code will work in all the Browsers. Happy Coding :)

HOW to handle AJAX Error due to page refresh or page unload.

Thursday, May 2, 2013

AJAX will end up hitting error method when any event in page cause page load or page unload.

OCCURS:

Why this occurs is due to the ajax call in the middle of fetching data from server and the page is forcing it to close connection

SOLUTION:

jQuery throws the error event when the user navigates away from the page either by refreshing, clicking a link, or changing the URL in the browser. You can detect these types of errors by by implementing an error handler for the ajax call, and inspecting the xmlHttpRequest object:

view plain copy to clipboard print ?

if (xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)
return true; // it's not really an error
else {
alert('[functionname]::' + xhr.responseText + '::[thrownerror]::' + thrownError);
OnError(xhr, thrownError);
}
///ERROR of ajax call
error: function (xmlHttpRequest, textStatus, errorThrown) {
if (xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)
return true; // it's not really an error
else {
alert('[functionname]::' + xhr.responseText + '::[thrownerror]::' + thrownError);
OnError(xhr, thrownError);
}
}

if (xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)
                        return true;  // it's not really an error
                    else {
                        alert('[functionname]::' + xhr.responseText + '::[thrownerror]::' + thrownError);
                        OnError(xhr, thrownError);
                    }

///ERROR of ajax call

 error: function (xmlHttpRequest, textStatus, errorThrown) {
                    if (xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)
                        return true;  // it's not really an error
                    else {
                        alert('[functionname]::' + xhr.responseText + '::[thrownerror]::' + thrownError);
                        OnError(xhr, thrownError);
                    }
                }

Alternative Approach:
you can check it by windows.unload event but its a function call more but more reliable

view plain copy to clipboard print ?

var unloaded = false;
$.ajax(...) ...
.error(function(jqXHR) {
if (unloaded) return; // Ignore errors caused by navigating away
// Now, check for real errors ..
});
$(window).unload(function() {unloaded = true;});

var unloaded = false;
$.ajax(...) ...
 .error(function(jqXHR) {
    if (unloaded) return; // Ignore errors caused by navigating away
    // Now, check for real errors ..
});
$(window).unload(function() {unloaded = true;});

DotNetIt

Showing Loading Symbol Until Page Loads Completly

Showing Loading Symbol Until Page Loads Completly

Wednesday, June 19, 2013

How to Find a Page loaded in Iframe or not

How to Find a Page loaded in Iframe or not

Thursday, June 13, 2013

Decrease coding lines using AjaxSetup

Decrease coding lines using AjaxSetup

Monday, June 10, 2013

Find all Stored Procedures Editted and Created In Last few Days

Find all Stored Procedures Editted and Created In Last few Days

Sunday, June 2, 2013

Loading JS file dynamically with callback function for IE

Loading JS file dynamically with callback function for IE

Friday, May 10, 2013

HOW to handle AJAX Error due to page refresh or page unload.

HOW to handle AJAX Error due to page refresh or page unload.

Thursday, May 2, 2013

About Me

Blog Archive