The Issue
When using the Google Custom Search Engine control and executing a default query it throws a JavaScript error “Error: ‘this.zd’ is null or not an object”.
The Problem Code
google.load('search', '1');
function OnLoad() {
// Create a custom search control that uses a CSE restricted to code.google.com
var customSearchControl = new google.search.CustomSearchControl('012157912978810372049:-cv6ao3zqua');
// run a query
customSearchControl.execute('ajax api');
// Draw the control in content div
customSearchControl.draw('content');
}
google.setOnLoadCallback(OnLoad); |
The Solution
Sometimes the most obvious mistakes are the hardest to find. After several Google searches it started to seem like no one else ever had this problem. Threre was no obvious connection between this error and the Google CSE. After staring at the examples here http://code.google.com/apis/ajax/playground/#custom_search_control for a while the answer became obvious.
Before executing the default query the control must first be drawn. The last two commands in the OnLoad method in the above code need to be flipped. Here is the correct code:
google.load('search', '1');
function OnLoad() {
// Create a custom search control that uses a CSE restricted to code.google.com
var customSearchControl = new google.search.CustomSearchControl('012157912978810372049:-cv6ao3zqua');
// Draw the control in content div
customSearchControl.draw('content');
// run a query (ONLY AFTER DRAWING THE CONTROL)
customSearchControl.execute('ajax api');
}
google.setOnLoadCallback(OnLoad); |
Scenario
Among the controls on a page is an update panel with a button that when clicked causes a partial postback that takes at least a few seconds. During this time you want to show the user a wait message that will disappear as soon as the postBack completes.
(more…)
Question
Under normal circumstances when a page loads with a tabContainer on it one tab must be selected. The selected tab can be specified via the ActiveTabIndex property. What if the tabContainer needs to default to an empty tab with none of the tabs selected?
Solution
Add a dummy tabPanel to the tabContainer and leave it blank. Use the pageLoad JavaScript function to hide the tab’s header
<cc1:TabContainer ID="TabContainer1" runat="server"
Height="200px" Width="200px" ActiveTabIndex="0">
<cc1:TabPanel runat="server" ID="tpDummy" HeaderText="">
<ContentTemplate>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server" ID="tpName" HeaderText="Name">
<ContentTemplate>
Name:
<asp:TextBox runat="server" ID="txtName" />
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server" ID="tpEmail" HeaderText="Email">
<ContentTemplate>
Email:
<asp:TextBox runat="server" ID="txtEmail" />
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer> |
function pageLoad(sender, e)
{
var objTpDummy =
document.getElementById('<%= tpDummy.ClientID %>' + '_tab');
objTpDummy.style.display = 'none';
} |
The Control
Microsoft recently released version 3.0.30512 of the AjaxControlTookit, available here. One of the new controls is the ComboBox, which “provides a DropDownList of items, combined with TextBox.”
The Issue
Placing the ComboBox in a container that has the style attribute “display: none;” throws the error “Invalid argument.” This is true if the container is a panel with the attribute set explicitly, or a different container such as a TabPanel that implicitly has the display attribute set to none when it is not shown.
(more…)
Scenario
A page has multiple validation groups:
The submit button on the page is a member of vgMain, so automatically it will only run the validation on that group. A solution is needed that will run validation on multiple groups and block the postback if needed.
(more…)
There are several reasons you may want to keep the controls on the page hidden until the page has loaded. If the user enters data before all the controls are loaded it may cause an error, or you may just not want the user to see the page rendering. The example below shows how to hide the controls from the user and instead display a loading message.
(more…)