Select value of jQuery select2 not updating correctly
Question
I've been wrangling with this problem for over a week with little to no progress.
I've looked at
- How to set selected value of jquery select2?
- Select2 doesn't work when embedded in a bootstrap modal
- Populating dropdown with JSON result - Cascading DropDown using MVC3, JQuery, Ajax, JSON
- Reset select2 value and show placeholder
- https://github.com/select2/select2/issues/3057
- https://github.com/select2/select2/issues/1436 .
Finally, after looking at https://select2.org/troubleshooting/common-problems
I tried applying both the dropdownParent: $('#myModal') and the
// Do this before you initialize any of your modals
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
Neither of these fixes worked so I'm really at my wits end and ready to give up on using the modal altogether. Basically I'm getting my data back from the server in a JSON object, then using that data to populate the modal. The populating is working correctly on all the elements (several of which are select / combo boxes) except the first combobox.
Thank you in advance for your help and sorry if the answer is posted elsewhere, but I can't find it. Following is the pertinent code:
<!-- Modal to Add / Edit Delay parent div must have same id as value of the data-target attribute used to trigger the modal -->
<div class="modal fade" id="delayAddModal" tabindex="-1" role="dialog" aria-labelledby="delayAddLabel">
<div class="modal-dialog" role="document">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<!-- This "x" button is for dismissing the modal -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="delayAddLabel">Add Delay</h4>
</div>
<div class="modal-body">
<p id="testActualJobTaskIdFunction"></p>
@Html.Partial("_ActualTrainDelayAddEdit", Model.TrainDelay)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- call to js function-->
<button id="delayAddButton" type="button" class="btn btn-primary" data-title="Add Delay">Add Delay</button>
</div>
</div>
</div>
</div>
Partial view nested in the modal defined above (this has been trimmed down so that the elements that are updating correctly are missing). The subdivisionId is not updating correctly, however, locationId is (both are combo boxes):
@model ActualTrainDelayAddEditModel
<form name="delay-form" id="delay-form">
@Html.HiddenFor(m => m.ActualTrainDelayId, new { id = "ActualTrainDelayId" })
@Html.HiddenFor(m => m.ActualJobTaskId)
@*Original:*@
<div class="form-group">
<!-- Renders floating text ("Subdivision") above the select options -->
@Html.LabelFor(m => m.SubdivisionId, new { @class = "field-label always-visible" })
<!-- ID for select element -->
<!-- Renders select class="select" id="SubdivisionId" name="SubdivisionId"><option value="4429faa8-5ad4-4adf-adde-ec7cf88ed9e9" innerHTML "Caltrain"-->
@Html.DropDownListFor(m => m.SubdivisionId, Model.AvailableSubdivisions, new { @class = "select" })
@Html.ValidationMessageFor(m => m.SubdivisionId)
</div>
<!-- Location -->
<div class="form-group">
@Html.LabelFor(m => m.LocationId, new { @class = "field-label always-visible" })
<select id="LocationId" name="LocationId" class="select">
@foreach (var loc in Model.AvailableLocations)
{
<option value="@loc.Id" data-milepost="@loc.Milepost">@loc.Name</option>
}
</select>
@Html.ValidationMessageFor(m => m.LocationId)
</div>
</div>
jQuery function that is updating the modal with the data:
<script>
// Do this before you initialize any of your modals
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
$("#delayAddModal")
.on("show.bs.modal",
function(event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var modal = $(this);
var title = button.data('title'); // get New title from data-title attribute
var delId = button.data("guid");
var name = button.data("name");
var conditionalVariable = 1;
var updateButtonValue = "Save Edit";
//alert(title);
//$("#SubdivisionId").append("<option value='0'>--Select State--</option>");
//If add delay is clicked there will be no guid
if (delId == null) {
modal.find('.modal-title').text(title); // set title to Add Delay
modal.find('#delayAddButton').text("Add Delay"); // set button value to Add Delay
return;
}
modal.find('.modal-title').text(title); // set title to New title
modal.find('#delayAddButton').text(updateButtonValue); // set button value to Edit Delay
// var button = $(event.relatedTarget);
// var delId = button.data("guid");
// var name = button.data("name");
//var modal = $(this);
$.ajax({
type: "GET",
url: "@Url.Action("GetDelayDataForEditing")/" + "?delayId=" + delId,
dataType: 'json',
//data: delId,
success: function(data) {
modal.find('');
//$("#SubdivisionId").change(function () {
var sub = data.SubdivisionId;
//console.log("This is the subId: "+sub);
//changing the subdivision changes the locations available in the location box
$.getJSON('@Url.Action("LocationBySubdivisionList", "TrainActivity")?id=' + sub,
function(locs) {
// the stuff that needs to happen before the parent ajax completes needs to go in here
$('#IncidentNumber').val(data.IncidentNumber);
// alert("In the getJson function");
//$("select#SubdivisionId").empty();
$('select#SubdivisionId').val(data.SubdivisionId);
//$('#SubdivisionId').select2('data', data.SubdivisionId);
//$('select#SubdivisionId').select2('data', data.SubdivisionId);
//$('#SubdivisionId').select2('data', { id: 100, a_key: 'Lorem Ipsum' });
$("#SubdivisionId > [value=" + data.SubdivisionId + "]")
.insertBefore("#SubdivisionId > :first-child");
//$("#SubdivisionId").append(data.SubdivisionId);
$('#StartMilepost').val(data.StartMilepost);
$('#EndMilepost').val(data.EndMilepost);
var list = $('#LocationId');
list.find('option').remove();
$(locs).each(function(index, loc) {
list.append('<option value="' +
loc.Id +
'" data-milepost="' +
loc.Milepost +
'">' +
loc.Name +
'</option>');
});
$('select#LocationId').val(data.LocationId);
$("#LocationId > [value=" + data.LocationId + "]")
.insertBefore("#LocationId > :first-child");
//$("#LocationId").append(data.LocationId);
//nearestMilepost();
$('select#DelayTypeId').val(data.DelayTypeId);
$("#DelayTypeId > [value=" + data.DelayTypeId + "]")
.insertBefore("#DelayTypeId > :first-child");
//$("#DelayTypeId").append(data.DelayTypeId);
$('select#ThirdPartyResponsibleId').val(data.ThirdPartyResponsibleId);
$("#ThirdPartyResponsibleId > [value=" + data.ThirdPartyResponsibleId + "]")
.insertBefore("#ThirdPartyResponsibleId > :first-child");
$('#BeginDelayDateTime').val(parseHoursAndMinutes(data.BeginDelayDateTime));
$('#EndDelayDateTime').val(parseHoursAndMinutes(data.EndDelayDateTime));
$('#ResultingDelay').val(data.ResultingDelay);
$('#TimeInDelay').val(data.TimeInDelay);
if (data.IsServiceFailure) {
$('#IsServiceFailure').iCheck('check');
} else {
$('#IsServiceFailure').iCheck('uncheck');
}
if (data.IsResolved) {
$('#IsResolved').iCheck('check');
} else {
$('#IsResolved').iCheck('uncheck');
}
if (data.IsRootCauseDelay) {
$('#IsRootCauseDelay').iCheck('check');
} else {
$('#IsRootCauseDelay').iCheck('uncheck');
}
$('#Comment').val(data.Comment);
$('#SavedVisible').iCheck('uncheck');
$('#SaveNewComment').iCheck('uncheck');
$('#ActualTrainDelayId').val(data.ActualTrainDelayId);
//delayExists = true;
//$('button#delayAddButton').attr("id", delId);
});
alert("Success " +
"\nunparsed data: " +
data +
"\nStringified data: " +
JSON.stringify(data) +
//"\nNew JS date: " + newJavaScriptDate +
//"\nDate date: " + parsedBeginDateTime +
//"\nFormatted date: " + hoursAndMinutes +
//"\nDisplay time: " + timeToDisplay +
//"\nAJT id: " + data.ActualJobTaskId +
//"\nIncident Number: " + data.IncidentNumber +
"\nLocation ID: " +
data.LocationId +
"\nStart MP: " +
data.StartMilepost +
"\nEnd MP: " +
data.EndMilepost +
"\nDelay Type Id: " +
data.DelayTypeId +
"\nThird Party Resp: " +
data.ThirdPartyResponsibleId +
"\nSubdivision Id: " +
data.SubdivisionId +
"\nbegin Delay time: " +
data.BeginDelayDateTime +
"\nend Delay time: " +
data.EndDelayDateTime +
"\nresulting delay: " +
data.ResultingDelay +
"\ntime in delay: " +
data.TimeInDelay +
"\nis root cause: " +
data.IsRootCauseDelay +
"\nis resolved: " +
data.IsResolved +
"\nis service failure: " +
data.IsServiceFailure +
"\ncomment: " +
data.Comment
);
//$('#delays-grid').data('kendoGrid').dataSource.read();
//$("#delayAddModal").modal("hide");
},
error: function() { alert("error in Delay Edit"); }
});
//modal.find(".modal-body").text("Edit the Delay at " + name + " with id " + delId);
//modal.find(".modal-footer #delayEditButton").data("guid", delId);
});
</script>
2 answers
solution1
3 2018-08-07 14:44:11
Okay, I think I came up with a fix found here:https://select2.org/programmatic-control/add-select-clear-items
I edited my statement from:
$('select#SubdivisionId').val(data.SubdivisionId);
to:
$('select#SubdivisionId').val(data.SubdivisionId).trigger('change');
Sorry for any inconvenience. Hopefully this helps. Cheers.
solution2
0 2020-04-10 21:50:49
Yes To apply change on edit value you should use: .trigger('change'); at the end on setting value This save my day
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Select2 not rendering correctly
jQuery select2 tags without default value
How to set selected value of jQuery Select2?
Select2 return a placeholder value with jquery
Jquery assign value to select2 dropdown
Setting the value of a select2 input with jquery
jQuery Select2: [object Window] in tags value
Can't overwrite Select2 value with jQuery
jQuery Select2 Plugin
jQuery select2 with WordPress
Related Tags