I have a cshtml view which, in the head, declares an js doc and in the body loads a partial
<head>
<script src="~/js/Project/doc.js"></script>
</head>
and the partial
<div class="panel" id="panelDoc">
<partial name="_docInformation" model=Model.Doc />
</div>
This partial loads up a partial view which has various tables and a dropdown. The doc.js has the following function which simply gets the information on the page again in correspondence to the document type the user has selected, replacing the html in panelDoc to the partial with the new information:
$(document).ready(function () {
$('#docType').change(function () {
debugger;
// Get the selected document type from the dropdown via ID
var docType = $('#docType option:selected').val();
var form = {
ProjectID: $('#ProjectID').val(),
DocType: docType
};
$.ajax({
url: '/Project/LoadDocumentPartial',
type: 'POST',
data: form,
success: function (result) {
if (result.success != undefined && !result.success) {
// Show error stuff
}
else {
// Replace the current html in id with new html
$('#panelDoc').html(result);
}
}
});
});
});
This works the first time the partial is loaded as I can change the dropdown and it hits this function, replacing the contents with the new information. However, if I then change the dropdown again, it never hits this function.
From my understanding, we include the js file in the parent view and this should be hit every time the dropdown changes? Or is there something I’m missing here?
Answer
Try to use different syntax for a top of javascript function:
$(document).on("change", "#docType", (function (e) {
e.preventDefault();
e.stopImmediatePropagation();
......