August 2009 - Posts

How to Perform Async Post Back via Javascript

if you are advanced in skip to Solution.

Beginners Tutorial

When you have updatePanel you have to register via Template , Trigger->AsyncPostBackTrigger, or Through Programatically on Page_load ex:


 I've got a case which i've got JQuery autocomplete , i've got a textbox Inside UpdatePane(runat server, and have an event of TextChanged On Server)

After user click auto complete i need to Refresh the UpdatePanel. while the autocomplete is not triggering the ontextchanged event. Yes, i heard you saying this and that ..

But there is a neat way to Refresh the UpdatePanel through javascript, that is by using The solution below that you have full control on updatepanel trigger.


we do know that __dopostback require  us to provide clientid, and targetEventName which we are going to call

There is call back architecture but that is not the case.


how about when you have update panel, scriptmanager, and want to manualy force postback via javascript 

we must register this event on the Page Request Manager.


 function doPostBackAsync(eventName, eventArgs) {
                var prm = Sys.WebForms.PageRequestManager.getInstance();

                if (!Array.contains(prm._asyncPostBackControlIDs, eventName)) {

                if (!Array.contains(prm._asyncPostBackControlClientIDs, eventName)) {

                __doPostBack(eventName, eventArgs);

you can use it like

doPostBackAsync('<%= txtsearchauto.ClientID %>', 'OnTextChanged');

it will make async post back,  call page load then the event we specify


Share this post: | | | |
Posted by cipto with 2 comment(s)
Filed under:

How to use jquery.autocomplete

  1. Include all the JS

    <script type="text/javascript" src="<%= RelativeLink.BuildAbsolute("includes/js/jquery.bgiframe.min.js") %>"></script>

    <script type="text/javascript" src="<%= RelativeLink.BuildAbsolute("includes/js/jquery.ajaxQueue.js") %>"></script>

    <script type="text/javascript" src="<%= RelativeLink.BuildAbsolute("includes/js/thickbox-compressed.js") %>"></script>

    <script type="text/javascript" src="<%= RelativeLink.BuildAbsolute("includes/js/jquery.autocomplete.pack.js") %>"></script>

2.Set on Document Ready 

$(document).ready(function() {
                        $('#yourtextboxid').autocomplete("../services/YourServices.ashx", { width: 260, selectFirst: false, formatItem: formatItem });


 Format Item is used for formatting your data: You might wonder logically what is going to be selected is Your first index data Array 

 function formatItem(row) {
                            //[0] name
                            //[1] id
                            //[2] city
                            return row[0] + " (Occupation: " + row[2] + ")";


         3.set up your ashx

  //QueryString = {q=a&limit=10&timestamp=1250833053376}
        int limit = Convert.ToInt32(context.Request.QueryString["limit"]);
        string search = context.Request.QueryString["q"];      

  the autocomplete will make a http get with query string , d is the seach keyword, limit is The limit how many rows maximum to match.

 You can seperate your Array return by a limiter '|' , the autocomplete will split based on that character , the first 0 is the selected Value.

 ex: resultstostring += result.FullName +"|"+result.UserID +"|";

4. if you need to trigger Event For , after user select the item 

$('#yourtextboxid').result(function(event, data, formatted) { 

//do something here


the one that is on jquery documentation is not working , this one result works :)

That's it. you might want to explore more as from the example, there's with image one, etc


To dispose your previous autocomplete  and set to new one, u should trigger the unautocomplete first so that the object autocomplete is removed from that textbox.

it's $('#yourtextboxid').trigger("unautocomplete"); or  $('#yourtextboxid').unautocomplete();


The Behaviour of autocomplete when you type something not in the list it will make a call to the url you specified. In order To force Taking from your url again , you should 

Empty your cache on keydown, and on keyup the auto complete already showing you the fresh result.

To empty the cache it's $("#yourtextboxid").flushCache(); 

Share this post: | | | |
Posted by cipto with no comments
Filed under:

Using FFMpeg and Record The Progress of Convertion

Read first

Here And Here

Let me complete the Missing Part.

 public static class Utility
        public static double TotalDuration;
        public static double CurrentDuration;
        public static double PercentageOfFinish;
       public static string ExtractDuration(string duration)
           //ex:  Duration: 01:30:10.92, start: 0.000000, bitrate: 1084 kb/s
           Regex regex = new Regex("[0-9][0-9]:[0-9][0-9]:[0-9][0-9].[0-9][0-9]");
           Match resultmatch = regex.Match(duration);
           if (resultmatch.Success)
               return resultmatch.Value.ToString();
           return duration;
        public static  double TotalStringToSeconds(string RawDuration)
            double seconds = 0.0;
            int hours = int.Parse(RawDuration.Substring(0, 2));
            seconds += Utility.ConvertHoursToSeconds(hours);   
            int minute=int.Parse(RawDuration.Substring(3, 2));
            seconds += Utility.ConvertMinutesToSeconds(minute);
            int second = int.Parse(RawDuration.Substring(6, 2));
            seconds += second;
            int milisecond=int.Parse(RawDuration.Substring(9, 2));
            seconds += ConvertMillisecondsToSeconds(milisecond);
            return Convert.ToDouble(seconds);
        public static void synchTotal(string total)
            TotalDuration = Convert.ToDouble(total);
        public static string ExtractTime(string time)
            //frame=   91 fps=  0 q=31.0 size=     118kB time=3.64 bitrate= 265.4kbits/s   
           int indexoftime = time.IndexOf("time=");
           int indexofbitrate = time.IndexOf("bitrate=");
           string extractedTime = time.Substring(indexoftime, indexofbitrate-indexoftime);
            extractedTime = extractedTime.Replace("time=", "");
           //Regex regex = new Regex("[time=][0-9].[0-9][0-9]");
           //Match resultmatch = regex.Match(time);
           //if (resultmatch.Success)
           //    return resultmatch.Value.ToString().Replace("=","");
            return extractedTime.Trim();
        public static  double CurrentStringToSeconds(string rawstring)
            //assume it's minutes
            return Convert.ToDouble(ConvertMinutesToSeconds(Convert.ToDouble(rawstring)));  
        public static void synchCurrent(string rawstring)
            CurrentDuration = Convert.ToDouble(rawstring);
            PercentageOfFinish = (CurrentDuration/TotalDuration)*100;
        public static void synchTextOutput(string text)
        #region To seconds
        public static double ConvertMillisecondsToSeconds(double milliseconds)
            return TimeSpan.FromMilliseconds(milliseconds).TotalSeconds;

        public static double ConvertMinutesToSeconds(double minutes)
            return TimeSpan.FromMinutes(minutes).TotalSeconds;

        public static double ConvertHoursToSeconds(double hours)
            return TimeSpan.FromHours(hours).TotalSeconds;

        public static double ConvertDaysToSeconds(double days)
            return TimeSpan.FromDays(days).TotalSeconds;


So actually FFmpeg does log on during conversion but to StandardError.

But one thing to note.. the first time you get the output of how long the duration is.

It can grow, i mean during convertion the duration can grow longer... i found it on wmv files.

I've make the Percentage of Convertion and it can grow more than 100%  that's because the time being passed on frame log can Grow more than the duration in seconds.

At the end , it says 'muxed 1.11%' howmany percent

that's the Grow size from the actual one.



Share this post: | | | |
Posted by cipto with no comments
Filed under:

Aurigma Image Uploader

First Impression, What a cool uploader..

Easy to use.. user friendly , neat looking. 

to make thumbnail just set it on the property, to add water mark just set it on property.


Now i did stumble on something, why after upload it direct back to The Client side. So no page_load will be executed.

After reading the documentation. Aurigma will make multiple HttpPost and then after finished you can define what HTML result to passed back and display on Aurigma Pane ..

To achive a post on our aspx page after uploading images, you need to define AfterUpload=Somefunction. and then on that function somefunction(){ //do a postback. window.navigate=mypage.aspx?somemark=true}


Share this post: | | | |
Posted by cipto with no comments
Filed under:

How to make Album reorder FB like

First, Of course you need a column first like index or sortindex.Display your album in that index order.

To implement the drag drop and sort, use Jquery.sortable.. it works like a charm

For every event there are 2 params by default, event (generated by browser), and the ui object class.

Make Handler that receive the post.

There are several Event, the perfect event would be update.

on that update submit your post to your handler

  • Besure to put your id like [name]_[sortindex], and the serialize will work , not null
  • you can put your naming convention to replace the order word for example by passing {key:string} on the option of Serialize

It will post like ex you name three Li id with: order_1 ,order_2,order_3 , respectively.

When you call var resultquerystring= $('#ulid').sortable('serialize'),it will generate order[]=1&order[]=2&order[]=3.

in my case i put different naming for each id.

if you click drag, and the element swap. it will generate in order. Meaning if 1 to 3 , the 3 will show up first then the 1.

but the value is still the same. you can only compare the name(key).


on your server side do a compare of Key(); in this case would be jpeg filename

if the order is not the same as the Old one, Do a Swap on DB.

That's it



Share this post: | | | |
Posted by cipto with no comments
Filed under: