0

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

        }
BYG
  • 35
  • 7
  • Did You Link The jQuery library. `` above your javascript? – Adharsh M Jun 04 '17 at 13:47
  • 1
    Possible duplicate of [Uncaught ReferenceError: $ is not defined (ajax)](https://stackoverflow.com/questions/33626519/uncaught-referenceerror-is-not-defined-ajax) – rkosegi Jun 04 '17 at 13:47

0 Answers0