Using JQuery ProgressBar with Long ASP.NET Process

OK, so maybe others have figured this out, but if so, they haven't written about it. Wanted to use the JQuery Progressbar to display progress results for a long ASP.NET Process.

First thing was to download a theme from the ThemeRoller site, http://jqueryui.com/themeroller/, and add the jquery library to my project.

Next, you must create a class to process the status of a ThreadStart Result in ASP.NET. For details on doing this, you can read the Microsoft Documentation, located at: .

Next, you will need two pages, one for creating the long process, one for showing the progress of the item.

The majority of the work can be found in the sample code, found at: http://www.joshuablackstone.com/Examples/LongProcess.zip, but the key for me was how to show the progress in the progress bar. First, create your div, such as:

<div class="progress" rel="0" runat="server" id="progressBar"></div>, and then the code to post the value to the progress bar is set with this function:

function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
$("div.progress").each(function () {
var element = this;
$(element).progressbar({
value: parseInt($(element).attr("rel"))
});
});
}
}

The reason for the section (if (args.Get_isPartialLoad)) is because an update panel is triggering a timer every two seconds to get the latest value from the threadstart.

So then, you run the process, which sends the user to the progress page, where they will see a jquery themed progress bar showing progress for the long process, and redirects to a page of your choice when complete.

Cool.

Javascript In or Out of Office

Wanted to create a standard tool to determine if a business is in or out of the office. Fairly standard stuff, but here it is if anyone can use it.


Needed to check for 3 things.

1. Holidays


2. Weekends


3. Business Hours (in this case 8 to 5)

Anyways, here's the script that results in a boolean value to determine whether or not the office is open.


var d = new Date();
var day = d.getDay();
var h = d.getHours();
var y = d.getYear();

var holidays = ['1/1/' + y,
'1/21/' + y,
'2/18/' + y,
'5/26/' + y,
'7/4/' + y,
'9/1/' + y,
'10/13/' + y,
'11/11/' + y,
'11/27/' + y,
'12/25/' + y,
'12/31/' + y];

function isWeekend() {
if (day == 0 || day == 6) {
return true;
}
else
{
return false;
}
}

function isOffHours() {
if (h < 8 || h > 17) {
return true;
}
else {
return false;
}
}

function businessClosed() {
var today = (d.getMonth() + 1) + '/' + d.getDate() + '/' + y;
if (isWeekend() == true || (jQuery.inArray(today, holidays)) > 0 || isOffHours() == true) {
return true;
}
else {
return false;
}
}

$(function () {
if (businessClosed() == true) {
alert('Sorry, we are closed!');
}
else {
alert('Open for Business!');
}
});


If you want to download, it can be found HERE.

Use Google Calendar as Datasource for Holiday Notifications

I wanted to see how difficult it would be to do a simple notification on my site of any basic holidays that occurred on any given day. Sure, it would be simple enough to simply create an array to hold the data in js, and display if the date matched, but I figured I would use a JSON Feed to display the data instead. Turns out Google Calendar has just the thing in their Holiday Calendar Feed.

http://www.google.com/calendar/feeds/en.usa%23holiday%40group.v.calendar.google.com/public/basic

If you go to this feed, you'll notice there is a lot of information that needs to be parsed down to use it, so after some fiddling, I came up with the following YQL Feed:

select entry.title.content, entry.summary.content from xml where url='http://www.google.com/calendar/feeds/en.usa%23holiday%40group.v.calendar.google.com/public/basic' AND entry.content.content LIKE '% + year + %'

with year being a new Date().getYear() value.

Anyways, here's the script. It simply displays a message in a Div if today falls on one of the holidays.

$(function () {
var d = new Date();
var year = d.getYear();
var shortDay = (d.toDateString()).slice(4, 10);
var query = "select entry.title.content, entry.summary.content from xml where url='http://www.google.com/calendar/feeds/en.usa%23holiday%40group.v.calendar.google.com/public/basic' AND entry.content.content LIKE '%" + year + "%'";
$.getJSON(
"http://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(query) + "&format=json&callback=?",
function (data) {
$.each(data.query.results,
function (index, item) {
for (i = 0; i < item.length; i++) {
var each = item[i];
var date = ((each.entry.summary).slice(9, 16).replace(',', ''));
if (jQuery.trim(date) == jQuery.trim(shortDay)) {
$('<h6></h6>').html('Today is ' + each.entry.title + '!').appendTo('#holidays');
}
}
});
});
});

You can feel free to download this script if you would like to use it.

http://www.joshuablackstone.com/Scripts/HappyHolidays.js.

White Pages API Sample

I was looking on the web, and found that there are few if any real samples available for the White Pages People and Reverse Number Searches.

I've posted a simple example that has 2 search forms. The first one is a simple people search that takes the name and the zip code as parameters and displays the results below.

The second search was simpler, as I simply ask for a 10 digit phone number and it displays the results found below as well. You can optionally pass a state code in place of the area code, but I figured i'd keep it simple for now.

If anyone is interested in checking it out, there is source code and a working example available at:

Sample with Source.

Hope this helps someone out...