Tagged: ajax

Learning JavaScript again!

Its time to learn JavaScript again folks. If you are a web developer like me there is no escape, you were using it in the past, you are using it more today and chances are that you will be using it a lot tomorrow. Web is getting highly interactive, and everyone is focusing on delivering web based systems that are close to behaviour as desktop applications. I think it makes perfect sense, there were times in the past we use to push back on certain user requirements giving excuse of limitations of web (in terms of UI features). But look at how things have changed in the last few years. We have Flex, Flash, Silverlight and HTML5 (almost there) to deliver rich internet applications (RIA), great AJAX enabled JavaScript UI platform libraries, and in the server side, we have matured architectural patterns around SOA and RIA services. So if you look at all the available great UI platforms, there is one in common and that is JavaScript. Its the same JavaScript you used to do your element level validations in your ASP/HTML pages, but leveraged in great many ways along with CSS to deliver the perfect web experience.

So this brings me to the point of this post, to re-learn JavaScript, and we will learn from the best guru on this, Douglas Crockford.

Here is a series of videos from Yahoo (YUI Theater). Follow this sequence. Before you start with these, pick that old JavaScript book from your bookshelf and read throught it fast. Hey, it should be an easy read, after all you have programmed using JavaScript for many years!

Now start viewing this videos, since you are fresh from your reading, it will be easy to follow the video.

Douglas Crockford – JavaScript Programming Language Series, From YUI Theater

Part 1 of 4 (31 minutes)
Part 2 of 4 (31 minutes)
Part 3 of 4 (29 minutes)
Part 4 of 4 (20 minutes)

Douglas Crockford – The Theory of DOM, From YUI Theater

Part 1 of 3 (31 minutes)
Part 2 of 3 (21 minutes)
Part 3 of 3 (26 minutes)

Douglas Crockford – Advanced JavaScript, From YUI Theater

Part 1 of 3 (31 minutes)
Part 2 of 3 (25 minutes)
Part 3 of 3 (11 minutes)

Good Luck!

JSON Serialization and Circular Reference Error !

I have a table that references a child table with reference to parent (!), I am using LINQ to SQL, for a paricular scenario, when I want to serialize my result using Json(obj) in my controller code, I got an error saying.. “A circular reference was detected while serializing an object of type..”

This issue is very well explained by Rick Strahl in his blog (link here)

If we are using WCF services, setting SerializationMode of the data context to “Unidirectional” would do the trick. In my case I was using MVC and it was a controller action invoke from javascript!! Also I did not want to try setting the Access Level to internal because I was not sure whether I get deep serialization if I do that! (did not try, because I was half convinced that It may not work for me)

Issue was Json() call in my controller to convert my object to Json and send back as JsonResult… So I ended up serializing it in my biz layer, biz layer method now returned a Json String, changed my controller to return ActionResult/ContentResult and used Content(jsonString) to send back a ContentResult.

It worked because Javascript library expected a Json Literal and it got that. All is good for now!

Ajax and ASP.Net EventValidation

By default in an ASP.Net webform, Event validation is turned ON. This is a security feature aimed at preventing injection attacks. But consider this scenario, your asp.net page is rendered with a drop down list with certain values, depending on some user selections, you did an AJAX call and modified the contents of this drop down list, when you do a postback on this page, asp.net will throw this error:

Invalid postback or callback argument. Event validation is enabled using
in configuration or in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation
method in order to register the postback or callback data for validation.

The reason for this is that the data that was postback is now different from the original data that was rendered by ASP.Net. I have noticed that in couple of instances you will receive this error, one is selecting any new value from the drop down list and doing a postback on dropdown list, another scenario is if you do a __doPostBack(”,”) call from your javascript.

Workaround is get around this message is to turn OFF the event validation. This can be done by either setting the page directive
enableeventvalidation=”false” (for controlling it in a page level) or change web.config to add to control it for the entire site.


Ajax Control Toolkit FAQ

Other day someone asked me why do we get many folders along with AjaxControlToolkit dll when we do site build. Simple answer is these are resource folders for the toolkit that enables it to support localization. If you do not wish to use them, you could simply delete all these folders and just keep the main dll in the root level. If you want to read a little bit more about this, go here.

Here is a link to a great Ajax Control Toolkit FAQ.


Using Popup Extender – Some tips

Popup extender is a very useful control included in AJAX Control tool kit. You can find
many articles and blogs if you search internet for this. You can download toolkit from here.
and you can see controls in action live from here.

Here is some of my observations:

When you use Popup Extender, if there is any dropdown list controls in your parent page, when popup is displayes, extender will automatically make the dropdowns invisible. This is to prevent dropdown to show up over the popup (since popup is rendered as a “div”). But many times I have noticed that, extender fails to set the visibility to hidden when popup is displayed. In these instances, we should find these controls and make these style changes ourselves. Another funky thing I have noticed that I have noticed is once popup unloads, the dropdowns still does not show up! Again, workaround is to get handle to these controls and make it visible again on popup unload.

If you have a master page, your page controls are rendered (including popup extender) with control prefixes for Id/names. So it is better to use $find with BehaviorId of your popup extender and finding control using that instead of using a $get with id of the control.
Another weird issue, I have seen with popup extender is that, some of my controls dissappear on popup was shown the second time. After a lot of digging and trial and error, I changed the markup to add table to hold the controls…and it started working !!!

    <ajaxToolKit:ModalPopupExtender     TargetControlID="myButton"
    ID="myPopUp" runat="server" PopupControlID="popUpPanel"
    BackgroundCssClass="modalBackground" BehaviorID="myPopUpBehavior"
//to show popup
var modal = $find('myPopUpBehavior');
if (modal!=null) modal.show(); 
//to hide popup
var modal = $find('myPopUpBehavior');
if (modal!=null) modal.hide(); 

Popup Extender requires you to provide a TargetControlID, so if you want to have a popup extender for a control that is dynamically created, you can attach the popup extender to a hidden form field design time, so that your code compiles, and in run time attach to your dynamically created control.