[jQuery] Exception is thrown when using a jQuery dialog

[Michiel]

Hello,

I'm currently facing a problem with the RadCombobox by using the jQuery dialog. When I make use of the modalpopupextender of the AjaxControlToolkit I don't have any problems. Let me explain what I've done.

I have a usercontrol with two RadComboBoxes on it. This usercontrol is loaded via the codebehind via the code: var ctl = LoadControl("MyCustomUserControl"); When I have loaded this control I add it to a asp.net Panel via the Controls.Add function. Quite easy and nothing special on it, but now the magic begins.

There are two situations:

1) I do not call the jQuery popup and I navigate to a new page
2) I do call the jQuery popup but press cancel (to destroy the popup) or ok (to destroy the popup and start the process clientside)

What happens in both situations?

In the first situation no exceptions are thrown and nothing happens really which is the desired effect. In the second situation I get an exception thrown in javascript which I will show in a second. When I make use of a modalpopupextender no exceptions are thrown. So my question is how can I resolve this issue? Is this even possible to resolve? Anyway let me post my findings and hopefully you can see what is happening here.

General:

- Visual Studio 2010 Ultimate
- .NET Framework 4.0
- Telerik controls version: 2011.1.315.40
- Exception thrown in: Internet Explorer 8, Internet Explorer 9
- Works in: Firefox, Chrome, Safari, Opera

The radcombobox settings:

<telerik:RadComboBox ID="cbTest" runat="server" Width="100%"
                            AllowCustomText="True" EmptyMessage="CustomText"
                            EnableEmbeddedScripts="False" Filter="Contains" MarkFirstMatch="True"
                            RegisterWithScriptManager="False" RadComboBoxImagePosition="Right" ZIndex="100101"></telerik:RadComboBox>

I have included all javascripts in my masterpage and works good because all other comboboxes (so without the jQuery dialog) works perfectly.

The panel where the combobox resides in:

    <asp:Panel ID="pTest" runat="server" style="display: none;">
        <asp:Panel ID="pTestData" runat="server">
             // Usercontrol is inserted here
        </asp:Panel>
    </asp:Panel>

The jQuery dialog call:

        // Get the dialog box
        var popup = $("[id $= 'pTest']");

        //Add the localized buttons
        var buttonsArray = {};
        buttonsArray[rmLoader().GetResource(1)] = function () { $(this).dialog('destroy'); DoWork(); };
        buttonsArray[rmLoader().GetResource(2)] = function () {
            $(this).dialog('destroy');
        };

        // Show it
        popup.dialog({
            width: 'auto',
            title: rmLoader().GetResource(3),
            buttons: buttonsArray,
            resizable: false,
            modal: true,
            close: function () {
                $(this).dialog('destroy');
            }
        });

And now the exception that is thrown:

In my findings I see when the page gets unloaded the controls are also trying to remove any handlers on them. This is where the problem occurs. In the RadComboBoxScripts.js the method $telerik.removeHandler(c,"focus",this._onFocusDelegate) is called to remove the handler of the RadComboBox. It seems to be that it passes the control (HTML element), the event that needs to be removed and the function to apply the changes.

The next step it calls the following function in the ScriptResource (which means it is now in the ScriptManager of Microsoft itself) $telerik._removeHandler(c,b,a). If I validate the c, b and a they are all filled in so I continue the process. At the line var c=a._events[f]; it is trying to obtain the event? When I validate the a._events it tells me that _events is null or not defined. I have attached the screenshots how I currently see it in my visual studio environment.

I think that my clientside object is gone by calling the jQuery.dialog("destroy"). I've also tried "Close" and other options that are available. All result in this exception in Javascript.

I hope someone can provide with an answer.

Best regards,
Michiel Peeters

NOTE: I've also tried to create an example project but somehow it works then but that didn't gave me the answer about this situation.

[Kalina]

Hi Michiel,

I’ve noticed that you have already opened a support ticket regarding this issue, and you have resolved it.
Let me suggest you continue our communication within this ticket.

Best wishes,
Kalina
the Telerik team

[Brian]

Is there anyway to find out the results of the the OP's ticket?  We are having a similar issue.

Thanks,

Brian

[Michiel]

Hello Brian,

Somehow jQuery destroys all related connections to the object when you don't register your control to the RadScriptManager. So you need to put the RegisterWithScriptManager to true.

Best regards,
Michiel Peeters

[Rod]

Hey,

I'm experiencing this exact issue. Here's what I have:

I use a modal dialog to display a page that contains a dynamically created rad combo box. In the code behind I do the following steps:

   

- Create a RadPanelItem

selectionItem = new RadPanelItem();
parent.Items.Add(selectionItem);

 

- Assign the RadPanelItem a HeaderTemplate

selectionItem.HeaderTemplate = new MyTemplates.MyHeaderTemplate("foo",

selection);
selectionItem.ApplyHeaderTemplate();

 

- The HeaderTemplate contains a RadComboBox

<telerik:RadComboBox ID="RadComboBoxSelection" runat="server"
  OnClientSelectedIndexChanged="selection_onClientSelectedIndexChanged"
  NoWrap="true"
  Width="225"
  DropDownWidth="250"
  AllowCustomText="false"
  RegisterWithScriptManager="true"
  EnableTextSelection="false"
  EnableLoadOnDemand="false">
</telerik:RadComboBox>

 

I've added the line to set RegisterWithScriptManager to true, but I still get the jScript error when the modal dialog window is disposed. Is there anything else I need to do or other help you can provide?

Thanks,
Rod

[Cat Cheshire]

How do you create the RadPanelBar (within which page event handler) and how do you load the combo within the header template?
Can you paste here some more parts of your code?