Thursday, April 28, 2011

Ajax Collapsible Panel / Modal Popup Flicker on pageload fix

The Modal Popup Extender and the Collapsible Panel Extender sometimes cause the screen to flicker on page load. To solve for this do the following.

Modal Popup
Set the style property display to 'none'


Collapsible Panel Extender
Make sure the extender has SuppressPostBack="True", and on the panel itself set the Height="0px" and a style property overflow:hidden;







Visualforce component basic examples (more to come)

This is a collection of different basic visualforce components for getting started with developing in salesforce. Also a few examples of components that are similar to someone coming from a .NET background into salesforce developing. Hopefully eliminating wasted time searching all over for samples of these different controls.

Live demo available here.


Ajax Modal Popup Extender

Problem/Challenge:
Call on a Modal Popup represented in the Master Page's code behind from a content page in order to display the Magic 8 Ball project I created using the techniques from week 2 fundamentals of C# at Centriq. To do this I originally just re-created the entire project on the Project page. However I did not like having such a large amount of duplicate code.

Solution:
Using the Master Find Control Method allows full use of any control on the master page on all content pages with full functionality.

protected void magic8BallMPE_Click( object sender, EventArgs e) 
{ 
   ModalPopupExtender mpe8Ball = 
          Master .FindControl("mpe8Ball") as ModalPopupExtender;
   mpe8Ball.Show(); 
}


Image button causes validation

Problem/Challenge:
While creating my Contact form page I had several textboxes and a submit button all with various required entry validation assigned to them. This validation intended to prevent the submission of an incomplete form when clicking the submit button. The rest of the Contact page had additional buttons, represented on my master page, and when testing further realized these buttons when clicked from the Contact page, caused validation of the whole page to fire, preventing those buttons action from being executed due to the Contact form being incomplete.

Ajax Collapsible Panel Right Border

Problem/Challenge:
When using the ajax control toolkit, I first added a ajax collapsible panel for my Social Media/Extra tab at the top of my website I noticed an unusal behavior of the panel's 'border-right' not showing up when expanded.

Solution:
To solve this I was able to wrap the collapsible panel in a 'wrapper div' with the border-right property on this instead. I used this solution again on my Theme Switch collapsible panel when it displayed similar behavior with the 'border-right' property not showing up in any browser.

Theme Swap

Problem/Challenge:
For my page theme swap project, I created four different color scheme layouts for the websites overall look and feel, so when the theme button was clicked the corresponding color theme would switch throughout the website. However in order to switch the theme on button click the page required a postback to fire the Page_PreInit method which assigned the selected theme in the session. I wanted the postback to switch the theme but stay on the current page the theme was switched from.