I am a beginner in using bootstrap modals and JavaScript, and I need assistance in resolving the following issue.
Desired Outcome:
1. When the parent screen opens the modal window, it should display a form to find a username:
<div class="form-group">
@Html.LabelFor(model => model.ManagerName, htmlAttributes: new { @class = "control-label col-md-2" })*
<div class="col-md-10">
@Html.EditorFor(model => model.ManagerName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.ManagerName, "", new { @class = "text-danger" })
<button type="button"
class="btn btn-default"
data-toggle="modal"
data-target="#findByName"
id="findManagerDetails">
Find
</button>
</div>
</div>
<div class="modal" id="findByName" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
@{ Html.RenderPartial("../Admin/Find"); }
</div>
</div>
</div>
<div id="validationSummary" class="validation-summary">
<ul></ul>
</div>
$("#findManagerDetails").click(function () {
type = "Manager";
var searchName = $("#ManagerName").val();
console.log(searchName);
document.getElementById("Search").value = searchName;
document.getElementById("SearchBtn").click();
});
2. The Modal Dialog will display a list of user IDs based on the searched username:
$(document).ready(function () {
$("#clear").click(function () {
document.getElementById("Search").value = "";
var SetData = $("#DataSearching");
SetData.html("");
});
$("#SearchBtn").click(function (event) {
event.preventDefault();
event.stopImmediatePropagation();
var SearchValue = $("#Search").val();
var SetData = $("#DataSearching");
SetData.html("");
$.ajax({
type: "get",
url: "@HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority)@Url.Content("~/")Admin/GetByIFName?name=" + SearchValue,
contentType: "html",
success: function (result) {
console.log(result);
$("#DataSearching").empty();
if (result.length == 0) {
SetData.append('<tr style="color:red"><td colspan="3">No Match Data</td></tr>')
} else {
$.each(result, function (index, value) {
var Data = "<tr>" +
"<td><a href=?id=" + value.UserID + "# onclick='SetName();'>" + value.UserID + "</a></td>" +
"<td>" + value.UserName + "</td>" +
"<td>" + value.Email + "</td>" +
"</tr>";
SetData.append(Data);
});
}
}
});
});
3. Upon selecting one of the rows in the Modal dialog, the selected userid, username, and email will be returned to the parent screen:
function SetName() {
const urlParams = new URLSearchParams(window.location.search);
userid = urlParams.get('id');
console.log("Selected ID:" + userid);
if (type == "Manager") {
document.getElementById("ManagerID").value = userid;
document.getElementById("btnValidateManagerID").click();
}
if (type == "Interviewer") {
document.getElementById("InterviewerID").value = userid;
document.getElementById("btnValidateInterviewerID").click();
}
if (type == "Interviewer1") {
document.getElementById("Interviewer1ID").value = userid;
document.getElementById("btnValidateInterviewer1ID").click();
}
$("#findByName").modal("hide");
}
Question: How can I transition from step 2 to step 3?
Thank you.