[Solved] Refresh tab's partial view after jquery post

[Donna Stewart]

I am trying to refresh the view of my tab strip after I call back to the server using jquery post.  I have tried incorporating the code I found in the thread - Reload a tab on click, but I am getting a javascript error that I see when I use Firebug.  The error is e.contentElement.html is not a function.  I am using a tabstrip within a tabstrip.  Here is the code:

Outer Tab strip - Index.aspx:

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of GMC_Hub_and_Spoke.IndexViewModel)" %>

 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <div id="header">
        <span style="color:#719501; font-family:Arial Narrow; font-size:2em;">Green Mountain Consulting</span>
        <% Html.RenderPartial("LogOnUserControl")%>
      </div>
      <div>
            <%: Html.Telerik.TabStrip.Name("MainMenu").HtmlAttributes(New With {.style = "height:800px;"}) _
                                                    .Items(Function(parent) parent.Add().Text("Web Permissions").LoadContentFrom("Index", "Permissions").Enabled(Request.IsAuthenticated).ContentHtmlAttributes(New With {.style = "height:750px;"})) _
                                                    .Items(Function(parent) parent.Add().Text("GMC Messaging").Enabled(False))
            %>
      </div>
</asp:Content>

Inner Tab Strip (where I am having the problem) - Permissions/Index.ascx:

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of GMC_Hub_and_Spoke.IndexViewModel)" %>
    <script language="javascript" type="text/javascript">
        function onSelect(e) {
            var $item = $(e.item);
            var $link = $item.find('.t-link');
            var contentUrl = $link.data('ContentUrl');
            if (contentUrl) {
                //reload the content tab if the contentUrl is available
                $.get(contentUrl,
                    function (data) {
                        e.contentElement.html(data);
                    });
            }
        }
    </script>

    <div id="companyselection">
        <% Html.RenderPartial("CompanySelectionUserControl")%>
    </div>
    <div>
        <%: Html.Telerik.TabStrip.Name("PermissionsMenu").HtmlAttributes(New With {.style = "height:690px;"}).ClientEvents(Function(evt) evt.OnSelect("onSelect")) _
                            .Items(Function(parent) parent.Add().Text("Users").LoadContentFrom("Index", "User").Enabled(Request.IsAuthenticated).ContentHtmlAttributes(New With {.style = "height:640px;"})) _
                            .Items(Function(parent) parent.Add().Text("Links").LoadContentFrom("Index", "WebTask").Enabled(Request.IsAuthenticated)) _
                            .Items(Function(parent) parent.Add().Text("Reports"))
        %>
    </div>

The partial view to be refreshed within the "Users" tab - Users/Index.ascx:

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of GMC_Hub_and_Spoke.UserIndexViewModel)" %>
<%@ Import Namespace="GMC_Hub_And_Spoke" %>
<%@ Import Namespace="com.gmcps" %>
  <div>
        <div class="userindexleft">
            <span class="listbox-label">Users</span><br />
                <%= Html.Telerik().TreeView().Name("Users").ShowCheckBox(True).HtmlAttributes(New With {.style = "font-size:1em; height:550px;"}) _
                                                                            .ClientEvents(Function(evt) evt.OnSelect("loginWebsiteAsUser")) _
                                        .BindTo(CType(Model.userList, IEnumerable(Of UserClass)),
                                                Sub(mappings)
                                                    mappings.For(Of UserClass)(
                                                    Sub(binding)
                                                        binding _
                                                            .ItemDataBound(
                                                                Sub(item, usr)
                                                                    item.Text = usr.userDisplayName
                                                                    item.Value = usr.userKey
                                                                    item.LoadOnDemand = True
                                                                End Sub)
                                                    End Sub)
                                                End Sub) _
                                        .DataBinding(Function(dataBinding) dataBinding.Ajax().Select("GetGroupsForUser", "User"))
                %>
            <br />
            <a href="#" id="newUser">New</a>
            <a href="#" id="editUser" onclick = "editUser()">Edit</a>
            <a href="#" id="deleteUser" onclick = "deleteUser()">Delete</a>
            <div class="error" id="UserError"></div>
            <%  Html.Telerik().Window().Name("CreateWindow") _
                .LoadContentFrom("Create", "User") _
                .Buttons(Function(buttons) buttons.Refresh().Maximize().Close()) _
                .Draggable(True) _
                .Height(575) _
                .Width(550) _
                .Resizable() _
                .Title("Create User") _
                .Visible(False) _
                .Render()
             %>
            <%  Html.Telerik().Window().Name("EditWindow").ClientEvents(Function(events) events.OnClose("onEditUserClose")) _
                .Buttons(Function(buttons) buttons.Refresh().Maximize().Close()) _
                .Draggable(True) _
                .Height(575) _
                .Width(550) _
                .Resizable() _
                .Title("Edit User") _
                .Visible(False) _
                .Render()
             %>
            <%  Html.Telerik().Window().Name("ErrorWindow") _
                .Buttons(Function(buttons) buttons.Refresh().Maximize().Close()) _
                .Draggable(True) _
                .Height(150) _
                .Width(450) _
                .Resizable() _
                .Title("Error") _
                .Visible(False) _
                .Render()
             %>

        </div>

        <div class="userindexright">
            <div class = "innerindexright">
            <span class="listbox-label">User Groups</span><br />
            <%= Html.Telerik().TreeView().Name("UserGroupNames").ShowCheckBox(True).HtmlAttributes(New With {.style = "font-size:1em; height:550px;"}) _
                                                                .BindTo(CType(Model.userGroupList, IEnumerable(Of SelectListItem)),
                                                                            Sub(mappings)
                                                                                mappings.For(Of SelectListItem)(
                                                                                Sub(binding)
                                                                                    binding _
                                                                                        .ItemDataBound(
                                                                                            Sub(item, userGroup)
                                                                                                item.Text = userGroup.Text
                                                                                                item.Value = userGroup.Value
                                                                                                item.LoadOnDemand = True
                                                                                            End Sub)
                                                                                End Sub)
                                                                            End Sub) _
                                                               .DataBinding(Function(dataBinding) dataBinding.Ajax().Select("GetUsersForGroup", "User"))
            %>
            <br />
            <a href="#" id="newUserGroup">New</a>
            <a href="#" id="editUserGroup" onclick = "editUserGroup()">Edit</a>
            <a href="#" id="deleteUserGroup" onclick = "deleteUserGroup()">Delete</a>
            <a href="#" id="toggleFlag" onclick="toggleEmailFlag()">Toggle Send Email</a><br />
            <div id="UserGroupError"></div>
            <%  Html.Telerik().Window().Name("CreateUGWindow") _
                .LoadContentFrom("CreateUserGroup", "User") _
                .Buttons(Function(buttons) buttons.Refresh().Maximize().Close()) _
                .Draggable(True) _
                .Height(450) _
                .Width(500) _
                .Resizable() _
                .Title("Create New User Group") _
                .Visible(False) _
                .Render()
             %>
            <%  Html.Telerik().Window().Name("EditUGWindow").ClientEvents(Function(events) events.OnClose("onEditUserGroupClose")) _
                .Buttons(Function(buttons) buttons.Refresh().Maximize().Close()) _
                .Draggable(True) _
                .Height(450) _
                .Width(500) _
                .Resizable() _
                .Title("Edit User Group") _
                .Visible(False) _
                .Render()
             %>
             <%  Html.Telerik().Window().Name("UserGroupAssocWindow") _
                 .Buttons(Function(buttons) buttons.Refresh().Maximize().Close()) _
                 .Draggable(True) _
                 .Height(450) _
                 .Width(500) _
                 .Resizable() _
                 .Title("Set Email Flag") _
                 .Visible(False) _
                 .Render()
             %>
             </div>
        </div>

        <div class="userindexmiddle">
            <img id="addUsers" alt="Add User(s) To Group(s)" src="~/Content/Images/RightArrow.png" runat="server" onclick="askEmail()"/>
            <br />
           <img id="removeUsers" alt="Remove User(s) From Group(s)" src="~/Content/Images/LeftArrow.png" runat="server" onclick="removeUsersFromGroups()"/>

        </div>
    </div>
    <%  Html.Telerik().ScriptRegistrar().OnDocumentReady("$('#newUser').bind('click', function openWindow(e){ $('#CreateWindow').data('tWindow').center().open().refresh();})") _
       .OnDocumentReady("$('#newUserGroup').bind('click', function openWindow(e){$('#CreateUGWindow').data('tWindow').center().open().refresh();})")
    %>

The javascript function I am calling in which I would like to refresh the tab after the jquery post:

function toggleEmailFlag() {
    var grouptreeview = $('#UserGroupNames').data('tTreeView');
    var groupCheckedNodes = $('#UserGroupNames :checked').closest('.t-item');
    var groupsAndUsers = [], parent;
    $('#UserGroupNames :checked').closest('.t-item')
    .each(function (index, node) { // first arg: index, second arg: node
        parent = $(node).parent().closest('.t-item'); // get parent item
        if (!parent.length) { // if there is a parent item
        } else {
            groupsAndUsers.push({ 'userKey': grouptreeview.getItemValue(node), 'userGroupKey': grouptreeview.getItemValue(parent) });
        }
    });
    $.ajax({ url: '<%= Url.Action("ToggleSendEmail", "User") %>',
        type: 'POST',
        dataType: 'json',
        data: $.toJSON(groupsAndUsers),
        contentType: 'application/json; charset=utf-8',
        success: function (result) {
            if (result.StatusCode != 1) {
                $("#UserGroupError").replaceWith('<div class="display-field" style="color:#FF3366; font-size:small;">' + result.MessageString + '</div>');
            }
            else {
                var tabstrip = $("#MainMenu").data("tTabStrip");
                var item = $("li", tabstrip.element)[0];
                tabstrip.select(item);
            }
        }
    });
}

I need to be able to do this in several areas, so if I can get this one to work, I can use it everywhere.  You all have been so very helpful.  I hope you can help me with this.  Thank you so much!!
Donna

[Atanas Korchev]

Hi Donna Stewart,

Try this:

$(e.contentElement).html(data);

If this does not help please attach a runnable sample project which we can test with.

Regards,
Atanas Korchev
the Telerik team