I have a webgrid and for each rows I have a link that I use to open a fancybox to modify the row.
Here the webgrid on a partialview :
@model IEnumerable<PDSI.Model.Models.Vaccin>
@{
var gridVaccins = new WebGrid(source: Model);
}
@gridVaccins.GetHtml(
tableStyle: "general_table",
columns:
gridVaccins.Columns(
gridVaccins.Column(
columnName: "Vaccin_Type",
canSort: false,
header: "Type"
),
gridVaccins.Column(
canSort: false,
columnName: "Vaccin_Site",
header: "Site",
format: (item) => item.Vaccin_Site.Site
),
gridVaccins.Column(
canSort: false,
columnName: "Date_Recu",
header: "Date reçue",
format: (item) => item.Date_Recu == null ? "" : item.Date_Recu.Date.ToLongDateString()
),
gridVaccins.Column(
canSort: false,
columnName: "Refuse",
header: "Refusé",
format: (item) => item.Refuse ? @Html.Raw("oui") : @Html.Raw("non")
),
gridVaccins.Column(
canSort: false,
header: "",
format: @<a class="editVaccin" href="/Patient/EditVaccin/@item.Id">Modifier</a>
),
gridVaccins.Column(
canSort: false,
header: "",
format: @<a href="/Patient/DeleteVaccin/@item.Id">Supprimer</a>
)
)
)
<script type="text/javascript">
$('a.editVaccin').fancybox();
</script>
When I click on the link It goes to this controller :
public ActionResult EditVaccin(int id)
{
var model = _vaccinServices.GetVaccin(id);
ViewBag.VaccinSite = _vaccinServices.GetVaccinSite();
return PartialView("VaccinEditor", model);
}
The first time I click it I goes into the controller to get my model, but after I modify the row and save the model from the fancybox and update the table, if i click a second time on the link "Modifier" to modify the same row, it doesn't go into the controller (EditVaccin). The href isn't working on the second click.
The second click only open the fancybox with the model info we got from the first click only.
This only happens in IE 8-9, in Google chrome it's working properly, but I have to use IE. So what I need to do to make it work?
This is the view where my webgrid is :
<div style="width: 100%;">
<a id="addVaccin" href="/Patient/AddVaccin/">Ajouter un vaccin</a>
<br />
<br />
<div id="main_vaccins">@Html.Action("GetVaccins")</div>
</div>
<script type="text/javascript">
$('a#addVaccin').fancybox();
</script>
This is the controller that load the partial view with the webgrid :
public ActionResult GetVaccins()
{
var listVaccins = _vaccinServices.GetVaccinsByPatient(SessionContext.IdPatient);
return PartialView("VaccinsTable", listVaccins);
}
The partialview to edit a row :
@model PDSI.Model.Models.Vaccin
<script src="../../Scripts/jquery.ui.datepicker.js" type="text/javascript"></script>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<legend>Vaccin</legend>
@Html.HiddenFor(model => model.Id_Patient)
@Html.HiddenFor(model => model.Id)
<table>
<tr>
<td>@Html.LabelFor(model => model.Vaccin_Type)
</td>
<td>@Html.TextBoxFor(model => model.Vaccin_Type, new { @maxlength = "20" })
</td>
</tr>
<tr>
<td>@Html.LabelFor(model => model.Vaccin_Site.Site)
</td>
<td>@Html.DropDownList("Vaccin_Site.Id", new SelectList(ViewBag.VaccinSite as System.Collections.IEnumerable, "Id", "Site", Model.Vaccin_Site.Id))
</td>
</tr>
<tr>
<td>@Html.LabelFor(model => model.Date_Recu)
</td>
<td>
@Html.TextBox("Date_Recu", Model.Date_Recu == null ? "" : Model.Date_Recu.Value.ToLongDateString(), new { @class = "date" })
@Html.ValidationMessageFor(model => model.Date_Recu)
</td>
</tr>
<tr>
<td>@Html.LabelFor(model => model.Refuse)
</td>
<td>@Html.CheckBoxFor(model => model.Refuse)
</td>
</tr>
</table>
<p>
<input type="submit" value="Enregistrer" /></p>
</fieldset>
}
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$('.date').datepicker();
});
$('form[action="/Patient/AddVaccin/"]').submit(function (event) {
$.ajax({
url: "/Patient/AddVaccin/",
type: "POST",
dataType: 'html',
data: $('form[action*="/Patient/AddVaccin/"]').serialize(),
success: function (result) {
$.fancybox.close();
$('#main_vaccins').text('');
$('#main_vaccins').html(result);
},
complete: function () {
},
error: function (error) {
alert(error.toString());
}
});
event.preventDefault();
});
$('form[action*="/Patient/EditVaccin/"]').submit(function (event) {
$.ajax({
url: "/Patient/EditVaccin/",
type: "POST",
dataType: 'html',
data: $('form[action*="/Patient/EditVaccin/"]').serialize(),
success: function (result) {
$.fancybox.close();
$('#main_vaccins').text('');
$('#main_vaccins').html(result);
},
complete: function () {
},
error: function (error) {
alert(error);
}
});
event.preventDefault();
});
</script>
The controller (httpost) for the edit :
[HttpPost]
public ActionResult EditVaccin(Vaccin model)
{
_vaccinServices.Edit(model);
return RedirectToAction("GetVaccins");
}
Thank you for the help
Finally this is doing the job!
$("a.editVaccin").fancybox({ajax: {cache: false}});
IE kept the partialview in cache that why the second click on the link only open the partialview without going back to the controller.