Tab not loading on first click

6 posts, 1 answers
  1. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 01 Apr 2014 Link to this post

    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









  2. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 01 Apr 2014 in reply to Stephen Link to this post

    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);
        }
     
    }




  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 03 Apr 2014 Link to this post

    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.

     
  5. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 03 Apr 2014 in reply to Daniel Link to this post

    This appears to have fixed the problem.  Thanks!
  6. ajith
    ajith avatar
    21 posts
    Member since:
    Apr 2015

    Posted 19 May 2015 in reply to Daniel Link to this post

    hi Daniel,

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

  7. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 20 May 2015 Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready