Tab not loading on first click

[Stephen]

I am using a solution from another post to create a click event in order to reload a tab each time you click on it.  I am having one issue though.  Each tab in my tabstrip uses LoadContentFrom to load a partial view.  Each of my partial views are Ajax forms (except for one).  When I add the click even script to the tabstrip, the first time I click on a tab it seems like it is loading it and then it never does.  If I click it a second time then it is fine.  Each time after that it is fine, it is just the first time.  The tab that doesn't have a form on it though does load the first time with no problems.  I am guessing it has something to do with the Ajax form which is calling the Get method on the controller and then the click event performing the same action?

If there is something I am not understanding or simply missing I would appreciate the help.

Here is my view with the tabstrip:

@model PASS.ViewModels.Proposals.UpdateViewModel

@{
    ViewBag.Title = "My Proposal";
}

<h2>My Proposal</h2>

@(Html.Kendo().TabStrip()
    .Name("tsProposal")
    .SelectedIndex(0)
    .Items(items =>
    {
        items.Add().Text("General").LoadContentFrom("_General", "Proposals", new { proposalID = Model.ID });
        items.Add().Text("Required Information").LoadContentFrom("_Required", "Proposals", new { proposalID = Model.ID });
        items.Add().Text("Associates").LoadContentFrom("_Experimenters", "Proposals", new { proposalID = Model.ID });
        items.Add().Text("Research").LoadContentFrom("_Questions", "Proposals", new { proposalID = Model.ID });
        items.Add().Text("Attachments").LoadContentFrom("_Attachments", "Proposals", new { proposalID = Model.ID });
        items.Add().Text("Time Request").LoadContentFrom("_TimeRequests", "Proposals", new { proposalID = Model.ID });
        items.Add().Text("Errors").LoadContentFrom("_Errors", "Proposals", new { proposalID = Model.ID });
    })
)

<script type="text/javascript">
$(document).ready(function () {
    var errorCount = @Html.Raw(Json.Encode(Model.Error_Count));
    var tabStrip = $("#tsProposal").data("kendoTabStrip");

    if (errorCount == 0) {
        $(tabStrip.items()[6]).attr("style", "display:none");
    }

    tabStrip.tabGroup.on('click', 'li', function (e) {
        tabStrip.reload($(this));
    });
})
</script>

And here is one of the partial views that loads into a tab and does not load upoin the first click:

@model PASS.ViewModels.Proposals.GeneralViewModel

@using (Ajax.BeginForm("_General", "Proposals", new AjaxOptions { UpdateTargetId = "generalReturnMsg", HttpMethod = "Post" }))
{

@Html.HiddenFor(model => model.Proposal_ID, Model.Proposal_ID)

<div class="editor-container">
    <div class="editor-label">
        @Html.Label("Title:")
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.Title, new { style = "width: 350px;" })
        @Html.ValidationMessageFor(model => model.Title)
    </div>
    <br class="clear" />
    <br />
    <div class="editor-label">
        @Html.Label("Total hours requested for LIFE of the proposal")
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.Total_Hours_Requested)
        @Html.ValidationMessageFor(model => model.Total_Hours_Requested)
    </div>
    <br class="clear" />
    <br />
    <br />
    <p><input type="submit" value="Save" /></p>

    <div id="generalReturnMsg"></div>

</div>

}

Please let me know if you also need to see the controller code for the Get methods.

Thanks,

Steve

[Stephen]

Here are the Controller methods:

The main Update view get method:

public ActionResult Update(int id)
{
    var context = new PASSEntities();
    int userID = Convert.ToInt32(((Claim)((ClaimsIdentity)Thread.CurrentPrincipal.Identity).FindFirst(a => a.Type.Equals("UserID"))).Value);

    var vm = (from a in context.Proposals
              join b in context.Proposal_Minions on a.ID equals b.Proposal_ID into j
              from pm in j.DefaultIfEmpty()
              join c in context.Proposal_Types on a.Proposal_Type_ID equals c.ID
              where context.Users.Any(u => (a.PI_User_ID == u.ID || a.Creator_User_ID == u.ID || pm.User_ID == u.ID) && u.ID == userID) && a.ID == id
              select new UpdateViewModel()
              {
                  ID = a.ID,
                  Title = a.Title,
                  User_Facility_ID = a.User_Facility_ID,
                  PI_User_ID = a.PI_User_ID,
                  Proposal_Type_Description = a.Proposal_Types.Description,
                  Error_Count = a.Proposal_Errors.Count()
              }).Distinct().SingleOrDefault();

    var PI_Pool_ID = (from a in context.Users where a.ID == vm.PI_User_ID select a.Pool_ID).SingleOrDefault();
    vm.PI_Description = (from a in context.Pools where a.ID == PI_Pool_ID select a.First_Name).SingleOrDefault() + " " + (from a in context.Pools where a.ID == PI_Pool_ID select a.Last_Name).SingleOrDefault();

    return View(vm);
}

And here is the General tab partial view controller methods:

public PartialViewResult _General(int proposalID)
{
    var context = new PASSEntities();

    var vm = (from a in context.Proposals
              where a.ID == proposalID
              select new GeneralViewModel()
              {
                  Proposal_ID = a.ID,
                  Title = a.Title,
                  Total_Hours_Requested = a.Total_Hours_Requested
              }).SingleOrDefault();

    return PartialView(vm);
}

[HttpPost]
public PartialViewResult _General(GeneralViewModel vm)
{
    try
    {
        var context = new PASSEntities();
        var model = context.Proposals.Find(vm.Proposal_ID);

        model.Title = vm.Title;
        model.Total_Hours_Requested = vm.Total_Hours_Requested;

        context.Entry(model).State = System.Data.EntityState.Modified;
        context.SaveChanges();

        // validate proposal
        bool validated = ValidateProposal(vm.Proposal_ID);

        var message = new SystemMessage(Models.eMessageType.SUCCESS);
        message.Message = "Your data has been saved!";
        return PartialView("_SystemMessage", message);
    }
    catch
    {
        var message = new SystemMessage(Models.eMessageType.ERROR);
        message.Message = "Save Failed!";
        return PartialView("_SystemMessage", message);
    }

}

[Daniel]

Hello Steve,

I am not sure if this is causing the problem with the content being loaded, but when you initially click the tab the request will made twice. The first request will be triggered by the tabstrip and the second one by the logic to reload the tab. Could you check if using the reload method only when the content has not yet been loaded:

tabStrip.tabGroup.on('click', 'li', function (e) {
    var item = $(this),
        index = item.index(),
        contentElement = tabStrip.contentElements.eq(index);
    if (!contentElement.is(":empty")) {
        tabStrip.reload(item);
    }
});

resolves the problem? If it persists, then please check what is the response from the server when initially clicking on a tab.

Regards,
Daniel
Telerik

 

 

[Stephen]

This appears to have fixed the problem.  Thanks!

[ajith]

hi Daniel,

       i need to add button in tabstrip. and can pass data to controller.Please show me a demo

[Daniel]

Hello Ajith,

I am not sure if I correctly understand the requirement but it does not seem related to the topic of this thread. Please open a new one with more detailed information on what you are trying to achieve.

Regards,
Daniel
Telerik