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

Tab not loading on first click

5 Answers 112 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 01 Apr 2014, 01:44 PM
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









5 Answers, 1 is accepted

Sort by
0
Stephen
Top achievements
Rank 1
answered on 01 Apr 2014, 01:48 PM
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);
    }
 
}




0
Accepted
Daniel
Telerik team
answered on 03 Apr 2014, 10:59 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Stephen
Top achievements
Rank 1
answered on 03 Apr 2014, 01:37 PM
This appears to have fixed the problem.  Thanks!
0
ajith
Top achievements
Rank 1
answered on 19 May 2015, 05:20 AM

hi Daniel,

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

0
Daniel
Telerik team
answered on 20 May 2015, 03:39 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
TabStrip
Asked by
Stephen
Top achievements
Rank 1
Answers by
Stephen
Top achievements
Rank 1
Daniel
Telerik team
ajith
Top achievements
Rank 1
Share this question
or