I've encountered another development issue, which I believe is AJAX-related. I've several controls (views) that are loaded into a multipage upon page Load. These controls are navigated via tabs in a tabstrip. Each view is divided into two parts via ASP update panels:
1. A toolbar (Toolbar_AjaxPanel)
2. Content affected by the toolbar, which contain a series of web user controls (Content_AjaxPanel)
One of these web user controls is a catalog that lists programs. A program in the list can be selected, and this raises the OnCatalogItemSelected event, a custom event which is triggered by the OnSelectedIndexChanged event of the RadGrid within the catalog web user control. The OnCatalogItemSelected event runs a few checks and sets some visibility settings before updating the content panel via Content_AjaxPanel.Update().
Everything appears to work as expected until I click a tab and switch to a different "view." When I do, I receive this client-side error:
Error: Unable to get value of the property 'paste': object is null or undefined
The application does not appear to be adversely affected, otherwise, but this error might confuse users. From what I can tell, it's the Update() call in the OnCatalogItemSelected event that causes this to happen. When I remove or comment it out, I no longer receive the message, but I need that Update() call to refresh the content and display the appropriate controls.
Here is the code that handles the OnCatalogItemSelected in the ProgramView.ascx view:
And if you need it, here is the interface markup:
If you need anything more, please let me know. Thanks.
1. A toolbar (Toolbar_AjaxPanel)
2. Content affected by the toolbar, which contain a series of web user controls (Content_AjaxPanel)
One of these web user controls is a catalog that lists programs. A program in the list can be selected, and this raises the OnCatalogItemSelected event, a custom event which is triggered by the OnSelectedIndexChanged event of the RadGrid within the catalog web user control. The OnCatalogItemSelected event runs a few checks and sets some visibility settings before updating the content panel via Content_AjaxPanel.Update().
Everything appears to work as expected until I click a tab and switch to a different "view." When I do, I receive this client-side error:
Error: Unable to get value of the property 'paste': object is null or undefined
The application does not appear to be adversely affected, otherwise, but this error might confuse users. From what I can tell, it's the Update() call in the OnCatalogItemSelected event that causes this to happen. When I remove or comment it out, I no longer receive the message, but I need that Update() call to refresh the content and display the appropriate controls.
Here is the code that handles the OnCatalogItemSelected in the ProgramView.ascx view:
protected
void
Program_Catalog_OnCatalogItemSelected(
object
sender, ProgramManagement.Controls.ProgramCatalog.CatalogItemSelectedEventArgs e)
{
HtmlControl catalogContainer = CatalogContainer_Panel;
HtmlControl catalogItemContainer = CatalogItemContainer_Panel;
int
selectedId = Program_Catalog.SelectedProgramID;
if
(!e.IsFullPlan)
{
Program_ProgramManager.ViewMode = ProgramManagement.Controls.ProgramManager.View.Quick;
Program_OutcomeManager.Visible =
true
;
Program_OrganizerManager.Visible =
true
;
Program_AudienceManager.Visible =
false
;
Program_BudgetManager.Visible =
false
;
}
else
{
Program_ProgramManager.ViewMode = ProgramManagement.Controls.ProgramManager.View.Full;
Program_OutcomeManager.Visible =
true
;
Program_OrganizerManager.Visible =
true
;
Program_AudienceManager.Visible =
true
;
Program_BudgetManager.Visible =
true
;
}
Program_ProgramManager.Select(selectedId);
Program_AudienceManager.Select(selectedId);
Program_OutcomeManager.Select(selectedId);
Program_OrganizerManager.Select(selectedId);
Program_BudgetManager.Select(selectedId);
//Indicate that an item has been selected.
ItemSelected =
true
;
catalogContainer.Style[
"display"
] =
"none"
;
catalogItemContainer.Style[
"display"
] =
"block"
;
//Update the program content ajax panel
Content_AjaxPanel.Update();
}
And if you need it, here is the interface markup:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProgramView.ascx.cs" Inherits="AZ.SA.RL.App.ProgramManagement.ProgramView" %>
<%@ Register Src="~/Controls/ProgramCatalog.ascx" TagName="ProgramCatalog" TagPrefix="pm" %>
<%@ Register Src="~/Controls/ProgramManager.ascx" TagName="ProgramManager" TagPrefix="pm" %>
<%@ Register Src="~/Controls/OrganizerManager.ascx" TagName="OrganizerManager" TagPrefix="pm" %>
<%@ Register Src="~/Controls/AudienceManager.ascx" TagName="AudienceManager" TagPrefix="pm" %>
<%@ Register Src="~/Controls/OutcomeManager.ascx" TagName="OutcomeManager" TagPrefix="pm" %>
<%@ Register Src="~/Controls/BudgetManager.ascx" TagName="BudgetManager" TagPrefix="pm" %>
<
telerik:RadScriptBlock
ID
=
"ProgramControlScripts"
runat
=
"server"
>
<
script
language
=
"javascript"
type
=
"text/javascript"
>
var programToolbar;
var programCatalogButton;
var programNewButton;
var programQuickButton;
var programFullButton;
var programSeperator1;
var programQuickButton;
var programFullButton;
var programEvalButton;
var programSeperator2;
var programEditButton;
var programCancelButton;
var programSaveButton;
function Program_OnClientLoad(sender, args) {
programToolbar = sender;
programCatalogButton = programToolbar.findButtonByCommandName("CATALOG");
programNewButton = programToolbar.findItemByText("New Program");
programQuickButton = programToolbar.findItemByValue("Quick");
programFullButton = programToolbar.findItemByValue("Full");
programSeperator1 = programToolbar.findItemByValue("Sep1");
programQuickButton = programToolbar.findButtonByCommandName("QUICK");
programFullButton = programToolbar.findButtonByCommandName("FULL");
programEvalButton = programToolbar.findButtonByCommandName("EVAL");
programSeperator2 = programToolbar.findItemByValue("Sep2");
programEditButton = programToolbar.findButtonByCommandName("EDIT");
programCancelButton = programToolbar.findButtonByCommandName("CANCEL");
programSaveButton = programToolbar.findButtonByCommandName("SAVE");
}
function Program_OnClientButtonClicking(sender, args) {
var programButton = args.get_item();
var programCommand = programButton.get_commandName();
if (programCommand == "CANCEL") {
args.set_cancel(!confirm('Are you sure you want to discard any changes?'));
}
}
function Program_OnClientButtonClicked(sender, args) {
var programButton = args.get_item();
var programCommand = programButton.get_commandName();
var programCatalogContainer = $('div[name="catalogContainer"]')
var programCatalogItemContainer = $('div[name="catalogItemContainer"]')
switch (programCommand) {
case "CATALOG":
if (programCatalogButton != null) {
programCatalogButton.set_visible(false);
}
if (programNewButton != null) {
programNewButton.set_visible(true);
}
if (programSeperator1 != null) {
programSeperator1.set_visible(false);
}
if (programQuickButton != null) {
programQuickButton.set_visible(false);
}
if (programFullButton != null) {
programFullButton.set_visible(false);
}
if (programEvalButton != null) {
programEvalButton.set_visible(false);
}
if (programSeperator2 != null) {
programSeperator2.set_visible(false);
}
if (programEditButton != null) {
programEditButton.set_visible(false);
}
if (programCancelButton != null) {
programCancelButton.set_visible(false);
}
if (programSaveButton != null) {
programSaveButton.set_visible(false);
}
programCatalogContainer.fadeIn(500);
programCatalogContainer.css("display", "block");
programCatalogItemContainer.css("display", "none");
break;
}
}
function Program_OnCatalogItemClicked(sender, args) {
var programCatalogContainer = $('div[name="catalogContainer"]');
var programCatalogItemContainer = $('div[name="catalogItemContainer"]');
if (programCatalogButton != null) {
programCatalogButton.set_visible(true);
}
if (programNewButton != null) {
programNewButton.set_visible(false);
}
if (programSeperator1 != null) {
programSeperator1.set_visible(true);
}
if (programQuickButton != null) {
programQuickButton.set_visible(true);
}
if (programFullButton != null) {
programFullButton.set_visible(true);
}
if (programEvalButton != null) {
programEvalButton.set_visible(true);
}
if (programSeperator2 != null) {
programSeperator2.set_visible(true);
}
if (programEditButton != null) {
programEditButton.set_visible(true);
}
if (programCancelButton != null) {
programCancelButton.set_visible(false);
}
if (programSaveButton != null) {
programSaveButton.set_visible(false);
}
programCatalogContainer.slideUp(500);
programCatalogItemContainer.fadeIn(600).delay(800);
programCatalogItemContainer.css("display", "block");
}
</
script
>
</
telerik:RadScriptBlock
>
<
telerik:RadAjaxManagerProxy
ID
=
"Program_AjaxManager"
runat
=
"server"
/>
<
asp:UpdatePanel
ID
=
"Toolbar_AjaxPanel"
runat
=
"server"
UpdateMode
=
"Conditional"
>
<
ContentTemplate
>
<
telerik:RadToolBar
ID
=
"Program_Toolbar"
runat
=
"server"
Skin
=
"Black"
OnClientButtonClicking
=
"Program_OnClientButtonClicking"
OnClientButtonClicked
=
"Program_OnClientButtonClicked"
OnButtonClick
=
"Program_ToolBar_ButtonClick"
OnClientLoad
=
"Program_OnClientLoad"
BorderStyle
=
"None"
BorderWidth
=
"0"
Width
=
"100%"
>
<
Items
>
<
telerik:RadToolBarButton
Text
=
"View Catalog"
Value
=
"Catalog"
CommandName
=
"CATALOG"
PostBack
=
"false"
/>
<
telerik:RadToolBarDropDown
Text
=
"New Program"
DropDownWidth
=
"150px"
>
<
Buttons
>
<
telerik:RadToolBarButton
Text
=
"Quick Plan"
CommandName
=
"NEW"
Value
=
"Quick"
/>
<
telerik:RadToolBarButton
Text
=
"Full Plan"
CommandName
=
"NEW"
Value
=
"Full"
/>
</
Buttons
>
</
telerik:RadToolBarDropDown
>
<
telerik:RadToolBarButton
IsSeparator
=
"true"
Value
=
"Sep1"
/>
<
telerik:RadToolBarButton
Text
=
"Quick Plan"
CommandName
=
"QUICK"
Checked
=
"true"
CheckOnClick
=
"true"
Group
=
"PlanType"
/>
<
telerik:RadToolBarButton
Text
=
"Full Plan"
CommandName
=
"FULL"
Checked
=
"false"
CheckOnClick
=
"true"
Group
=
"PlanType"
/>
<
telerik:RadToolBarButton
Text
=
"Evaluation"
CommandName
=
"EVAL"
Checked
=
"false"
CheckOnClick
=
"true"
Group
=
"PlanType"
Enabled
=
"false"
Visible
=
"false"
/>
<
telerik:RadToolBarButton
IsSeparator
=
"true"
Value
=
"Sep2"
/>
<
telerik:RadToolBarButton
Text
=
"Edit"
CommandName
=
"EDIT"
/>
<
telerik:RadToolBarButton
Text
=
"Cancel"
CommandName
=
"CANCEL"
/>
<
telerik:RadToolBarButton
Text
=
"Save"
CommandName
=
"SAVE"
CausesValidation
=
"true"
ValidationGroup
=
"ProgramValidation"
PostBack
=
"true"
/>
</
Items
>
</
telerik:RadToolBar
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
<
asp:UpdatePanel
ID
=
"Content_AjaxPanel"
runat
=
"server"
UpdateMode
=
"Conditional"
>
<
ContentTemplate
>
<
div
class
=
"ContentContainer"
>
<
div
id
=
"CatalogContainer_Panel"
runat
=
"server"
name
=
"catalogContainer"
>
<
pm:ProgramCatalog
ID
=
"Program_Catalog"
runat
=
"server"
Title
=
"Program Catalog"
OnCatalogItemSelected
=
"Program_Catalog_OnCatalogItemSelected"
OnClientCatalogItemClicked
=
"Program_OnCatalogItemClicked"
/>
</
div
>
<
div
id
=
"CatalogItemContainer_Panel"
runat
=
"server"
name
=
"catalogItemContainer"
style
=
"display:none"
>
<
div
class
=
"LeftColumnContainer"
>
<
pm:ProgramManager
runat
=
"server"
ID
=
"Program_ProgramManager"
OnProgramLoaded
=
"Program_Manager_OnProgramLoaded"
Title
=
"Program Characteristics"
/>
</
div
>
<
div
class
=
"RightColumnContainer"
>
<
pm:OutcomeManager
ID
=
"Program_OutcomeManager"
runat
=
"server"
Title
=
"Goals"
ItemName
=
"Goal"
/>
<
pm:OrganizerManager
ID
=
"Program_OrganizerManager"
runat
=
"server"
Title
=
"Organizers"
ItemName
=
"Organizer"
OrganizerType
=
"Program"
/>
<
pm:AudienceManager
ID
=
"Program_AudienceManager"
runat
=
"server"
Title
=
"Audiences"
ItemName
=
"Audience"
/>
<
pm:BudgetManager
ID
=
"Program_BudgetManager"
runat
=
"server"
Title
=
"Budget Items"
ItemName
=
"Budget Item"
/>
</
div
>
</
div
>
</
div
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
<
div
class
=
"clear"
>
</
div
>
If you need anything more, please let me know. Thanks.