When I submit the form the first time, everything works perfectly and I get back to the same page with a success message. The problem is when I press the submit button again, the page gets reloaded but the JavaScript does not get loaded. This is part of the container page:
<div id="tabs">
<ul>
<li>
<a href="#project-details">Project Details</a>
</li>
<li>
<a href="#client-pricing-container">Client Pricing</a>
</li>
<li>
<a href="#vendor-pricing-container">Vendor Pricing</a>
</li>
<li>
<a href="#status">Status</a>
</li>
</ul>
<div id="project-details">
@Html.Partial("Partial/ProjectDetails")
</div>
<div id="client-pricing-container">
@Html.Partial("Partial/ClientPricing")
</div>
<div id="vendor-pricing-container">
@Html.Partial("Partial/VendorPricing")
</div>
<div id="status">
@Html.Partial("Partial/ProjectStatus")
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
});
@if (Model.Project?.ProjectPricings != null)
{
@:numberOfPricings = @Model.Project.ProjectPricings.Count;
}
sourceCodeList = '@Html.Raw("<option></option>" + string.Join("", Model.SourceCodeList.Select(x => "<option value=\"" + HttpUtility.JavaScriptStringEncode(x.SourceCode) + "\">" + HttpUtility.JavaScriptStringEncode(x.SourceCode) + "</option>")))';
targetCodeList = '@Html.Raw("<option></option>" + string.Join("", Model.TargetCodeList.Select(x => "<option value=\"" + HttpUtility.JavaScriptStringEncode(x.TargetCode) + "\">" + HttpUtility.JavaScriptStringEncode(x.TargetCode) + "</option>")))';
unitTypeCodeList = '@Html.Raw("<option></option>" + string.Join("", Model.UnitTypeCodeList.Select(x =>"<option value=\"" + HttpUtility.JavaScriptStringEncode(x.UnitTypeCode) + "\">" + HttpUtility.JavaScriptStringEncode(x.UnitTypeCode) + "</option>")))';
currencyList = '@Html.Raw("<option></option>" + string.Join("", Model.CurrencyList.Select(x =>"<option value=\"" + HttpUtility.JavaScriptStringEncode(x.CurrencyCode) + "\">" + HttpUtility.JavaScriptStringEncode(x.CurrencyCode) + "</option>")))';
serviceCodeList = '@Html.Raw("<option></option>" + string.Join("", Model.ServiceCodeList.Select(x => "<option value=\"" + HttpUtility.JavaScriptStringEncode(x.ServiceCode) + "\">" + HttpUtility.JavaScriptStringEncode(x.ServiceCode) + "</option>")))';
frequencyList = '@Html.Raw("<option></option>" + string.Join("", Model.VolumeFrequencyList.Select(x => "<option value=\"" + HttpUtility.JavaScriptStringEncode(x.VolumeFrequency.ToString()) + "\">" + HttpUtility.JavaScriptStringEncode(x.VolumeFrequencyDescription) + "</option>")))';
var form = $('#client-pricing-form');
form.submit(function(e) {
e.preventDefault();
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(data) {
$("#client-pricing-container").html(data);
},
error: function(data) {
$("#client-pricing-container").html("<h1 style='color:red'>Ajax Error!</h1>");
console.log('An ajax error occurred.');
console.log(data);
}
});
});
</script>
This is part of the Partial View:
<div style="text-align: center;">
<input type="submit" id="submit-price-button" value="SAVE">
</div>
</div>
}
<script type="text/javascript">
$('#submit-price-button').button();
var selectedSourcesArray = @Html.Raw("{" + string.Join(",", Model.Project?.ProjectPricings?.Select((x, i) => i + ":\"" + HttpUtility.JavaScriptStringEncode(x.SourceCode) + "\"") ?? new List<string>()) + "}");
var selectedTargetsArray = @Html.Raw("{" + string.Join(",", Model?.Project?.ProjectPricings?.Select((x, i) =>i + ":\"" + HttpUtility.JavaScriptStringEncode(x.TargetCode) + "\"") ?? new List<string>()) + "}");
var selectedUnitTypeCodeArray = @Html.Raw("{" + string.Join(",", Model?.Project?.ProjectPricings?.Select((x,i) =>i + ":\"" + HttpUtility.JavaScriptStringEncode(x.UnitTypeCode) + "\"") ?? new List<string>()) + "}");
var selectedUnitTypePriceArray = @Html.Raw("{" + string.Join(",", Model?.Project?.ProjectPricings?.Select((x, i) => i + ":\"" + x.UnitTypePrice + "\"") ?? new List<string>()) + "}");
var selectedUnitTypePriceCurrencyArray = @Html.Raw("{" + string.Join(",", Model?.Project?.ProjectPricings?.Select((x, i) => i + ":\"" + HttpUtility.JavaScriptStringEncode(x.UnitTypePriceCurrency) + "\"") ?? new List<string>()) + "}");
var selectedUnitTypePriceDescriptionArray = @Html.Raw("{" + string.Join(",", Model?.Project?.ProjectPricings?.Select((x, i) => i + ":\"" + HttpUtility.JavaScriptStringEncode(x.UnitTypePriceDescription) + "\"") ?? new List<string>()) + "}");
var selectedUnitTypePriceEffDate = @Html.Raw("{" + string.Join(",", Model.Project?.ProjectPricings?.Select((x, i) => i + ":\"" + x.UnitTypePriceEffDate.ToString() + "\"") ?? new List<string>()) + "}");
var selectedUnitTypePriceExpDate = @Html.Raw("{" + string.Join(",", Model?.Project?.ProjectPricings?.Select((x, i) => i + ":\"" + x.UnitTypePriceExpDate.ToString() + "\"") ?? new List<string>()) + "}");
var selectedServicesArray = @Html.Raw("{" + string.Join(",", Model?.Project?.ProjectPricings?.Select((x, i) =>i + ":\"" + HttpUtility.JavaScriptStringEncode(x.ServiceCode) + "\"") ?? new List<string>()) + "}");
var selectedActualUnitTypeVolumeArray = @Html.Raw("{" + string.Join(",", Model?.Project?.ProjectPricings?.Select((x, i) => i + ":\"" + HttpUtility.JavaScriptStringEncode(x.ActualUnitTypeVolume) + "\"") ?? new List<string>()) + "}");
var selectedVolumeFrequencyArray = @Html.Raw("{" + string.Join(",", Model?.Project?.ProjectPricings?.Select((x, i) => i + ":\"" + x.VolumeFrequency + "\"") ?? new List<string>()) + "}");
$(document).ready(function() {
for (var i = 0; i < numberOfPricings; i++) {
AddPricing(i);
}
});
</script>
This is the controller:
[HttpPost]
public ActionResult UpdateProjectPricing(ProjectDetailsViewModel projectViewModel)
{
if (!ModelState.IsValid)
{
projectViewModel.ReturnMessage = @"Error! Update Failed.";
projectViewModel.ReturnClass = "error-message";
return PartialView("Partial/ClientPricing", projectViewModel);
}
var success = ProjectDataAccess.UpdateClientPricingDetails(projectViewModel.Project);
projectViewModel.ReturnMessage = success ? @"Pricing Updated Successfully!" : @"Error! Undate Failed";
projectViewModel.ReturnClass = success ? @"success-message" : @"error-message";
return PartialView("Partial/ClientPricing", projectViewModel);
}