Once i was stuck with a process(long running for loop) at server side in asp.net, hence i thought to change code in such a way that some how i got intimation about how much work that process has done.

I have decided to make two pages,
one page when called starts a long running process,
And, Second page i call frequently from java script(with jQuery.ajax()), and that page gives me status (% of work done) of process start by first page.

Following is two JavaScript functions,

That uses JQuery’s Ajax request,

First function is intended to update page with some kind of intimation to user (like 30% work has been done).

function getFrequentUpdate() {

jQuery.ajax({
url: “getFrequentUpdate.aspx?” + “tmp=” + Math.random() * 1000,
async: true,
type: ‘GET’,
cache: false,
success: function(msg) {
jQuery(“#divMsg”).html(” Current Progress is: ” + msg);

var runtimeProgress = (parseInt(msg) * 100) / parseInt(jQuery(“#hdTotalObject”).val());
runtimeProgress = Math.ceil(parseFloat(runtimeProgress));
runtimeProgress = parseFloat(runtimeProgress) * 10;

jQuery(“#divProgress”).css(‘width’, runtimeProgress + ‘px’);
}
});

}

Second function calls a page that starts a long running process.

function startLongRunningProcess() {
getFrequentUpdate();
myintval = setInterval(‘getFrequentUpdate()’, myDelay);

jQuery.ajax({
url: “someProcess.aspx?” + “tmp=” + Math.random() * 1000,
async: true,
type: ‘GET’,
cache: false,
success: function(msg) {

window.clearInterval(myintval);
jQuery(“#lblStartBackup”).html(“Process has been completed successfully.”);

}
});

}

Main challenging task is to update page with % of work long running process has done.

Here, I have first tried with using session variable, but later I came to know that somehow, when, I tried to run multiple pages together, and if they access SESSION variable, one of process was stopped, until second one has finished.

To overcome that issue, I have used a class in “App_Code” folder with STATIC VARIABLE that can be used application wide:

static public int MyStatusVariable = 0;

In my case, my long running process was updating above server variable and first Ajax function was fetching it frequently, with interval specified with in

myintval = setInterval(‘ getFrequentUpdate ()’, 2000);

NOTE : Also visit www.dhanashree.com

If you are in need of any Web Development feel free to Inquire us . Dhanashree Inc. Expertise in Asp.net Development, Php Development,
Website designing, Open Source customisation. Dhanashree Inc can be our offshore development company / outsourcing web development company, hire dedicated web programmers.

Above information is for knowledge sharing if you have problem / issue / suggestion please intimate us with details for proper and prompt action.

Intension for the development of this PlugIn is to develop a jQuery pagination which resembles Flicker like pagination.

jPager is a jQuery pager plugin, similar to Flickr’s paging interface.

If you have ever visited Flicker photo sharing website, you would have noticed that it display a range of pages with

current page in middle. It also facilitates to have back and forth navigation. If you have very large data spread across

range of pages, and then it leave outs page numbers, displaying an ellipsis instead, followed by the last page number.

It is very integrative jQuery pager Plugin.

Although pager is generally used along with some grid controls, but there may be sometime kind of requirement where

you may require to use jQuery pager control alone itself. For e.g. you may use along with some image gallery,

rotating content, carousel like section etc.

This jQuery pager/Flicker like jQuery pager allows you to creating pagination facility into you application

with minimum effort.

How to use?

1. Reference jPager.js & jPager.css files in your page

   <script type="text/javascript" language="javascript" src="jquery-1.2.6.min.js" />
   <script type="text/javascript" language="javascript" src="jPager.js" />
   <link href="jPager.css" rel="stylesheet" type="text/css" />

2. create a HTML container for pager. Put it where you wanted to display your pager require.<div id=”content”></div>
3. Put the following sript in your page.<script type=”text/javascript” language=”javascript”>$(document).ready(function() { $(“#content”).pager({ PageCount: 5, currentPage: 1 }); });</script>

Features:

1. Very lighweight & easy to use and easy to integrate. Just one line of code you need to build jQuery pager.
2. CSS driven so layout is fully costomizable with CSS.
3. Event driven facility make it easy to call any custom script whenever page get chaged.
4. Supports upto unlimited pages.
5. Display custom text for previous & next buttons.
6. Hide displaying previous & next buttons.

You can download the demo & source code from here.

Cheers

NOTE : Also visit
www.dhanashree.com

If you are in need of any Web Development feel free to Inquire us . Dhanashree Inc. Expertise in Asp.net Development, Php Development,
Website designing, Open Source customisation. Dhanashree Inc can be our offshore development company / outsourcing web development company, hire dedicated web programmers.

Above information is for knowledge sharing if you have problem / issue / suggestion please intimate us with details for proper and prompt action.

Implementing J-Query Model popup Plug In

As shown in above screen, developing Model Popup will require 2 layers:

1. Disabled Back ground
2. Popup content Panel

We will implement a plug In and call it on Popup Panel element.

Somewhat like: $(“div.popupDiv”).ShowPopup();

ShowPopup();
Is a plug-In method which will initiate an instance of the plug-In which we going to implement as next step.

Prior to that a CSS for Disabled background needs to be developed

Which we can achieve as below:

.popupbackGround

{

position: absolute;

height: 100%;

width: 100%;

left: 0px;

top: 0px;

background-color: #000;

z-index: 1;

opacity: 0.5;

filter: alpha(opacity =50);

display: none;

}

We don’t have to assign this CSS class anywhere in HTML, but we will use this class while implementing Plug-In.

Next to this, we will implement Model Popup J-Query Plug-In.

Parameter to be passed to Plug-In: closeButtonCSS

The plug in will be called on the popup panel itself and take one parameter called CloseButtonCSS which will be used to close the Model popup.

We will create close event on the specified close button in parameter.

model-popup.js (Plug-In file)

jQuery.noConflict();

(

function($K){

$K.fn.ShowPopup=function(data)

{

/*

Parameters:

closeButtonCSS,

*/

$K(this).each(function(i)

{

var dbBack,intTopAxis=0;

var objCloseButton= $K(“.” + data.closeButtonCSS);

var objPopup= $K(this);

var a;

objCloseButton.click(function(){

HidePopup();

});

$K(window).scroll(function()

{

var xTop= parseInt($K(window).scrollTop()) + intTopAxis ;

objPopup.animate({top:xTop+ “px”},{queue: false, duration: 350});

});

initBackGround = function()

{

dbBack  = $K(“<div></div>”).attr(“class”,“popupbackGround”).css(“height”,$K(document).height()).hide();

$K(“body”).append(dbBack);

intTopAxis= parseInt(($K(window).height())/2)-(objPopup.height()/2);

}

ShowPopup = function()

{

initBackGround();

dbBack.fadeIn(function(){objPopup.show();});

objPopup.css({“left”: (($K(window).width())/2)-(objPopup.width()/2),“top”: (($K(window).height())/2)-(objPopup.height()/2)+parseInt($K(window).scrollTop())}) ;

}

HidePopup = function()

{

objPopup.fadeOut();

dbBack.fadeOut();

}

ShowPopup();

});

}

})(jQuery);

How to call Model Popup

Popup Plug-In can be called on any Div object. And the DIV itself will get displayed as a popup like shown in the above screen.

For example:

Target popup DIV class is popupDiv.

<div class=”popupDiv”>

<div>

Popup Content Goes Here..

</div>

<div class=”close”><a class=”lnkClose”><img src=”resource/small-closelabel.gif” /></a>

</div>

</div>

We can popup by placing the following javascript :

$k(“div.popupDiv”).ShowPopup(

{

closeButtonCSS:“lnkClose”

});

Here “closeButtonCSS:“lnkClose” is used to treat lnkClose as close button of popup.

Playing FLV

To play any FLV file in HTML will require a flash based FLV player. There are many FLV players available among of those we will use one, which is a flash file and we can play FVL using the flash FLV player.

Here we will require 2 flash (SWF) files:

1. flvplayer.swf (download )
2. SteelExternalAll.swf (needs to be placed on same path of container HTML page) (Download)

Below is how to embed object in HTML page to play FLV using above FLV player.

<object id=”Object1″ height=”380″ width=”400″ classid=”clsid:D27CDB6E-AE6D-11cf-96B8- 444553540000″ codebase=”http://macromedia.com/cabs/swflash.cab#version=6,0,0,0″>

<param name=”movie” value=”flash/flvplayer.swf” />

<param name=”FlashVars” value=”flvurl=../flash/test.flv” />

<param name=”quality” value=”high” />

<param value=”true” name=”autoplay” />

<embed height=”380″ width=”400″ src=”flash/flvplayer.swf” flashvars=”flvurl=../flash/test.flv” type=”application/x-shockwave-flash” />

</object>

Above code will take FLV file path as a parameter, that is been specified at 2 places.

1. flashvars=”flvurl=../flash/test.flv”
2. <param name=”movie” value=”flash/flvplayer.swf” />
   

Your FLV file path will go here.

Putting all together

Now we got both things ready with us.

1. Implemented J-Query plug-In for model popup
2. FLV player

Simply placing the <object> tag inside the Popup Div will result in our targeted output.

In addition to that we will require a Button to be clicked to show model popup. Like shown below

<a class=”lnkPopup”>Play FLV in Popup</a>

Let’s create a simple J-Query click event of the above link and call popup plug-In inside click event, like shown below.

<script type=”text/javascript” language=”javascript”>

var $k=jQuery.noConflict();

$k(document).ready(function()

{

$k(“a.lnkPopup”).click(function()

{

$k(“div.popupDiv”).ShowPopup(

{

closeButtonCSS:“lnkClose”

});

});

});

</script>

You can also download full source code ZIP file by clicking here .

NOTE :

If you are in need of any Web Development feel free to Inquire us . Dhanashree Inc. Expertise in Asp.net Development, Php Development, Website designing, Open Source customisation. Dhanashree Inc can be our offshore development company / outsourcing web development company, hire dedicated web programmers.

Above information is for knowledge sharing if you have problem / issue / suggestion please intimate us with details for proper and prompt action.