This is a migrated thread and some comments may be shown as answers.

[Solved] Razor: in ajax pop-up, controls freeze

0 Answers 105 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Kko
Top achievements
Rank 1
Kko asked on 08 Jul 2011, 10:38 AM
Hello,

I'm trying to implement a [grid/pop-up detail] u.i. model using mvc3/Razor and Telerik 2011.1.315 mvc controls. The pop-up window should load any Partial View specified in corresponding Controller method, which it successfully accomplish.
Problem that I'm having is that in the pop-up window any Telerik controls are loaded (with data in) but not functional(for example a drop down does not drop nor autocomplete), together with the validations.
As per my current status, I have observed that javascript files for controls like [telerik.list.min.js] etc are not loaded.
In Firebug error is (for drop down):
[Uncaught exception: TypeError: 'jQuery('#ParentCategoryId').tComboBox' is not a function]
I have added this script group to my Partial View file, which loads the files correctly for normal GET calls but is ignored on Ajax call:
@{Html.Telerik().ScriptRegistrar().Scripts(s =>
            s.AddGroup("UIAndValidationGroup", group =>
              group
              .Add("telerik.list.min.js")
              .Add("jquery.validate.min.js")
              .Add("jquery.validate.unobtrusive.min.js")
            .Combined(false).Compress(false)));}
In grid I'm using this kind of declaration to create the link for opening the modal pop-up:
Html.ActionLink("Open", "Edit", "Categories", new { id = t.Id}, new { @class = "openDialog", data_dialog_id = "editCategoryDialog", data_dialog_title = "Edit Category" })
Pop-up window is defined with jquery as follows, and included for now in _Layout.cshtml header:
<script type="text/javascript">
    $.ajaxSetup({ cache: false });
    $(document).ready(function () {
 
      $('.openDialog').live('click', function (e) {
          e.preventDefault();
        $('<div id="dlg"></div>')
                    .addClass('dialog')
                    .attr('id', $(this)
                    .attr('data-dialog-id'))
                    .appendTo("body")
                    .dialog({
                      title: $(this).attr('data-dialog-title'),
                      close: function () { $(this).remove() },
                      modal: true,
                      closeOnEscape: true,
                      minWidth: 400,
                      buttons: { 'Close': function () { $(this).dialog('close'); } }
                    })
                    .load(this.href);
      });
 
      $('.close').live('click', function (e) {
        e.preventDefault();
        $(this).closest('.dialog').dialog('close');
      });
    });
  </script>

Any help or ideas are greatly appreciated.

Thank you!
Tags
General Discussions
Asked by
Kko
Top achievements
Rank 1
Share this question
or