Wednesday, February 25, 2009

Tip: ASP.NET Button Post Back in a JQuery Dialog

Most of the time we want to build some ASP.NET controls inside a JQuery dialog and that when user click on the controls, they will post back to the web server. However, by nature if you put those controls inside a Jquery dialog, they will not behave as expected.

The reason is because JQuery builds the dialog outside of the "form" element in the form that you have created. Any control that is put outside the form will not post back. The following illustration shows the scenario that i am talking about.

<form id='formName'>     
</form>
<div id='dialog'>
    <input id='btnSubmit' type='button' />
</div>

In order to fix the problem we need to move the div section inside the form. In order to do that we can write something like this:

dlg.parent().parent().appendTo($("#formName"));

The code above appends the resulting dialog to the form element named 'formName'. The end result basically shows the following code structure.

<form id='formName'>
     <div id='dialog'>
         <input id='btnSubmit' type='button' />
     </div>
</form>
        

Thursday, February 12, 2009

Tip: Converting MS Ajax JSON DateTime to JS Date object

In my recent project, i have to use JSON Serialization to translate a datatable into JSON format. The table contains fields that are of DateTime data type. When the data is deserialized in the browser, the data is always represented in "/Date(1325926000000-0800)/".

I know i can use the the MS Ajax JS API "Sys.Serialization.JavaScriptSerializer.deserialize" to deserialize the data back into JS Date object but i dont want to include the immense MS JS script library into my page. So the option is to use the JS below to do the trick.

var dt    = data.updateDateTime; //assuming it's like /Date(1325926000000-0800)/
var s = eval(dt.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
dt = new Date(s);
    
var mil = Date.UTC(dt.getFullYear(),dt.getMonth(), dt.getDate(), dt.getHours(), dt.getMinutes(), dt.getSeconds(), dt.getMilliseconds()); //Miliseconds since January 1, 1970
dt      = new Date(mil); //Convert to local time
alert(dt);