Javascript function not defined error in RadTabStrip + RadMultiPage scenario

[Suchitra]

Hi, I used the code in http://demos.telerik.com/aspnet-ajax/tabstrip/examples/application-scenarios/add-remove-tabs/defaultcs.aspx, with the following differences:
1. within the multipage, there is no RADGrid as I do not want to show any data in the first tab
2. when clicking on the + button, i am loading my user control file using Page.LoadControl. This user control has only 2 textboxes and a button.
Rest everything is the same.

My problem is: i have a javascript function within the ascx which is called on button click. On clicking the button, i am getting the error: ReferenceError: <function> is not defined. The behavior is same for all the javascript / jquery functions defined in the ascx. I enclosed my script block with RadScriptBlock.

My ascx code is below: (actually i developed this test user control to pinpoint the issue as my main user control was giving the same error)

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Testtab.ascx.cs" Inherits="Common_UserControl_Testtab" %>
    <div>
        <label>Name:</label>
        <input name="txtFirstName" type="text" class="actxtbox txtbox" runat="server" id="txtName" size="15"  />
        <label>Age:</label>
        <asp:TextBox ID="txtAge" runat="server" MaxLength="100"></asp:TextBox>
        <input type="button" onclick="javascript: save();" value="save"/>
        <br />
    </div>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> 
 <script type="text/javascript">

     function save() {
         alert('test');
     }
     </script>
</telerik:RadScriptBlock>

I went through the forum posts which talk about similar issue, but none of the suggestions posted work for me. Please provide any pointers to solve the issue.

Thanks
Suchitra

[Shinu]

Hi Suchitra,

Please do the following modification in the RadAjaxManager section of ASPX page which works fine at my end.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Thanks,
Shinu.

[Suchitra]

It worked perfectly. Thanks so much Shinu...you are awesome!

Please do elaborate on why changing the AjaxControlID from RadMultiPage ID to RadTabStrip ID is the key.

Also, now i am getting an error in the firebug console - SyntaxError: An invalid or illegal string was specified - in the line 
if(d[b].indexOf("{")!=-1){e.insertRule(d[b]+"}",e.cssRules.length);

i will also look into it, but thought if you know the clue right away it would help. 

Telerik support team Rocks!! :)

[Shinu]

Hi Suchitra,

In your scenario by clicking on the RadTabStrip a new RadMultiPage is loading. So in that case you have to ajaxify the RadTabStrip. Ajaxifying RadMultiPage and RadTabStrip controls Single PageView could not be added as AJAX initiator or updated control in the AJAX settings. The only possible approach is to add the whole MultiPage in the RadAjaxManager settings or wrap the whole control into RadAjaxPanel. When we set the MultiPage as an updated control, you should also include the TabStrip associated with it in the Ajax settings. As for your second question I am not sure about your requirement. Can you please provide your code for further help.

Thanks,
Shinu,