I'm using Ajax.Actionlink's to render partialview in MVC. I'm also using Modernizr datepicker so firefox could be as nice as Chrome with input type=date.
When I click my first Ajax actionlink the datepicker works fine. But when I click on it again it doesn't work at all.
If i reload the page (F5) it works again, first time, not second and later.
How do I fix it so the jQuery code runs every time, even if I switch to another partial view?
My JS:
<script>
$.noConflict();
if (!Modernizr.inputtypes.date) {
$('input[type=date]').datepicker({ dateFormat: 'yy-mm-dd' });
}
</script>
EDIT: I've tried wrapping the JS in $(function () {...}); and the code is inside the partial view. Also tried using the OnSuccess option but the result is the same. It only runs the first time and after that I need to reload the page
EDIT 2:
My Ajax actionlinks:
<div id="createCalcMenu">
@Ajax.ActionLink("Annuity", "Annuity", "Calculation", new AjaxOptions
{
UpdateTargetId = "calcDiv",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST"
})
<br />
@Ajax.ActionLink("Amortization", "Amortization", "Calculation", new AjaxOptions
{
UpdateTargetId = "calcDiv",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST"
})
</div>
<div id="calcDiv"></div>
EDIT 3:
My partialview:
@using (Ajax.BeginForm("ShowDetailAnnuity", "Calculation", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "CalcDetail",
LoadingElementId = "Loader"
}))
{
<input type="date" id="StartDate" name="startdate" title="Please enter start date (YYYY-mm-dd)" class="startDateTextbox" required />
//Rest of the form here...
<input type="submit" id="calcBtn" class="calcBtn" name="SubmitValue" value="Calculate" title="Calculate your calculation" />
}
<script>
$(function () {
$.noConflict();
if (!Modernizr.inputtypes.date) {
$('input[type=date]').datepicker({ dateFormat: 'yy-mm-dd' });
}
});
</script>