WhatIWantMost More ASP.NET AJAX fun

Rather than focus on fixing the AJAX things that are still broken because of the RTM release tonight, I chose to jump even further into the abyss by adding even more AJAX-based controls to the page. This time it is a search results box that pops up and displays product search results (from Amazon, Yahoo, and Ebay) when the user takes advantage of my offer to “Shop Now” while viewing a wishlist. I was thinking that a tabbed interface would be the perfect choice for displaying the results from different searches.

I read last week that one of the new additions to the AJAX Control Toolkit is a tabs control. Here is what it looks like on their sample page:

Very spiffy. Of course I immediately ran into trouble when trying to implement it myself. The control seems to work fine when used on a page like this:

But when used in a div with runat=server and visible=false and then later changed to true after a button click I got this instead:

The tabs were not displaying correctly! A search through the HTML source and DOM (with the help of Firebug) showed that for some reason the stylesheet references pointing to webresource.axd were not rendered when using the tab control in this way. I thought about defining the styles myself, but I was having some other issues that seemed to have something to do with my use of the updatepanel so I decided to take the manual route. I changed my server-side div that contained the control to be client-side and rolled up my sleeves and wrote some javascript (gasp!) to handle the showing and hiding of the popup div myself. This way the div and the tab control are actually part of the page when it is initially rendered (with a style of display:none) so the dynamic stylesheet references for the tab control are rendered properly. I still needed an update panel inside the tabs for the repeaters used to display the search results and to make a long story short I ended up changing from one big updatepanel used on the whole page to a bunch of little updatepanels used where I needed them. That seemed to fix a whole bunch of little issues I was running into and will hopefully be the answer to the problems that I described running into last night as well.

Now when the user clicks on the “Shop Now” button they get a nice little popup window with search results to a bunch of online sites that I have affiliate accounts with. If they decide to buy something then Dan gets paid. Oh yeah, and it’s a nice little feature for the users as well.

My list of things to do for this project is getting shorter. It looks like I am somewhere between 2/3 to 3/4 of the way completed (as far as number of tasks goes not size of tasks) as long as I don’t add any more features.