My problem on this the contact fields is not appending on the modal. Based on the console.log I have 2 values of contacts. What’s wrong in the javascript why the fields is not showing up?
I want to show up the details of the contacts of the user.
The process is i have an table with the list of users then there is a View button of each users to view all the details of that user. Now when the user clicks the view button it displays the details in the modal. Now the problem in the modal the contact details is not appending the contactdetails
User.js
$(document).ready(function () {
$('#usersModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var users = button.data('users');
$('.view-users-btn').click(function () {
var usersData = $(this).data('users');
console.log(usersData);
// Set resident information
$('#modalUserID').val(usersData.UserID);
$('#modalFirstName').val(usersData.FirstName);
$('#modalMiddleName').val(usersData.MiddleName);
$('#modalLastName').val(usersData.LastName);
$('#modalEmail').val(usersData.Email);
$('#modalPassword').val(usersData.Password);
// Set dropdown value based on Status
$('#modalStatus').val(usersData.Status);
// Handle contacts
var contacts = usersData.Contacts || [];
var contactList = $('#modalContacts');
contactList.empty(); // Clear previous contact inputs
contacts.forEach(function (contact, index) {
// Create input fields for each contact
var contactInput = '<div class="row">';
// Create dropdown options from ViewBag.AddressTypes
var contactTypeDropdown = $('#contactType' + index); // This line might not be necessary
contactInput += '<div class="col-md-6 mb-3">';
contactInput += '<label for="contactType' + index + '">Contact Type:</label>';
contactInput += '<select id="contactType' + index + '" class="form-control">';
ViewBag.ContactTypes.forEach(function (contactType) {
var option = $('<option>');
option.val(contactType.CODE_VALUE);
option.text(contactType.Description);
$('#contactType' + index).append(option);
});
contactInput += '</select>'; // Added closing tag
contactInput += '</div>';
contactInput += '<div class="address-group col-md-6 mb-3">';
contactInput += '<label for="contactNumber' + index + '">Contact Number:</label>';
contactInput += '<input id="contactNumber' + index + '" class="form-control" type="text" value="' + contact.ContactNumber + '" readonly>';
contactInput += '</div>';
contactInput += '</div>';
contactList.append(contactInput);
$('#modalContacts').append(contactInput);
});
});
});
});
This is the form in Modal design
<div class="modal fade" id="usersModal" tabindex="-1" role="dialog" aria-labelledby="usersModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="usersModalLabel">User Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container mt-5">
<form id="residentForm" asp-controller="User" asp-action="Update" method="post">
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="form-group col-md-2 mb-3">
<label for="modalUserID">User ID:</label>
<input for="modalUserID" type="text" id="modalUserID" class="form-control" readonly>
</div>
</div>
<div class="row">
<div class="form-group col-md-4 mb-3">
<label for="modalFirstName">First Name:</label>
<input for="modalFirstName" type="text" id="modalFirstName" class="form-control" readonly>
</div>
<div class="form-group col-md-4 mb-3">
<label for="modalMiddleName">Middle Name:</label>
<input for="modalMiddleName" type="text" id="modalMiddleName" class="form-control" readonly>
</div>
<div class="form-group col-md-4 mb-3">
<label for="modalLastName">Last Name:</label>
<input for="modalLastName" type="text" id="modalLastName" class="form-control" readonly>
</div>
</div>
<div class="row">
<div class="form-group col-md-4 mb-3">
<label for="modalEmail">Email:</label>
<input for="modalEmail" type="text" id="modalEmail" class="form-control" readonly>
</div>
<div class="form-group col-md-4 mb-3">
<label for="modalPassword">Password :</label>
<input for="modalPassword" type="text" id="modalPassword" class="form-control" readonly>
</div>
<div class="form-group col-md-4 mb-3">
<label for="modalStatus">Status:</label>
<select id="modalStatus" class="form-control">
<option value="1">Unlocked</option>
<option value="2">Locked</option>
</select>
</div>
</div>
</div>
</div>
<!-- Contacts -->
<h5>Contacts</h5>
<div id="modalContacts"></div>
<button type="submit" class="btn btn-success" id="submitButton" disabled>Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
UserController
public async Task<IActionResult> Manage()
{
//DataTable users = sqldb.SPCreateTable(allSP.spGetUsers);
var getAccountStatus = sqldb.SPCreateTable(allSP.sp_GetAccountStatus);
var additional = new Additional();
var getContactType = sqldb.SPCreateTable(allSP.sp_getContactType);
var additionalType = new Additional();
foreach (DataRow row in getContactType.Rows)
{
var contactTypeModel = new ContactTypeModel
{
CODE_VALUE = Convert.ToInt32(row.Field<string>("CODE_VALUE")),
Description = row.Field<string>("Description")
};
additionalType.ContactTypes.Add(contactTypeModel);
}
// Pass the Additional instance to the view
ViewBag.ContactTypes = additionalType;
foreach (DataRow row in getAccountStatus.Rows)
{
var accountStatusTypeModel = new AccountStatusTypeModel
{
CODE_VALUE = Convert.ToInt32(row.Field<string>("CODE_VALUE")),
Description = row.Field<string>("Description"),
IsLockedOut = row.Field<string>("CODE_VALUE") == "2"
};
additional.AccountStatus.Add(accountStatusTypeModel);
}
// Pass the Additional instance to the view
ViewBag.AccountStatus = additional;
var users = await _context.WMS_User
.Include(r => r.Contacts)
.Include(r => r.UserDetails)
.ToListAsync();
//var viewUserModel = new UserViewModel
//{
// Users = SQLDB.ConvertDataTableToList<UserView>(users)
//};
var viewUserModel = users.Select(r => new UserView
{
UserID = r.UserID,
FirstName = r.UserDetails.FirstName,
MiddleName = r.UserDetails.MiddleName,
LastName = r.UserDetails.LastName,
Password = r.Password,
Role = r.Role,
Status = r.Status,
Email = r.UserDetails.Email,
CreatedDate = r.CreatedDate,
ModifiedBy = r.ModifiedBy,
ModifiedDate = r.ModifiedDate,
Contacts = r.Contacts.Select(c => new UserContact
{
UserContactID = c.UserContactID,
UserID = c.UserID,
ContactType = c.ContactType,
ContactNumber = c.ContactNumber,
CreationDate = c.CreationDate,
ModifiedBy = c.ModifiedBy,
ModifiedDate = c.ModifiedDate
}).ToList()
}).ToList();
return View(viewUserModel);
}
