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:
And here is one of the partial views that loads into a tab and does not load upoin the first click:
Please let me know if you also need to see the controller code for the Get methods.
Thanks,
Steve
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