If my status changes, I want to add another text box or text area for additional comments. In the photo provided, this has been implemented but the positioning is not quite right due to issues with the modal.
Below is a snippet of my code where you can take a closer look at (.editView):
<div class="modal fade" id="modalEditMerge" tabindex="-1" role="dialog" aria-labelledby="modalEditMerge" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Edit pipeline</h4>
</div>
<div class="modal-body">
<label class="control-label">Client</label>
@*@Html.DropDownList("client", (SelectList)ViewBag.ClientID, null, new { @class = "form-control" })*@
<label class="control-label">Field of Cooperation</label>
@Html.DropDownList("fco", (SelectList)ViewBag.FCOID, null, new { @class = "form-control" })
<label class="control-label">HR Value</label>
@*@Html.LabelFor("HR Value","null", new {})*@
@Html.TextBox("hrvalue", null, new { @class = "form-control" })
<label class="control-label">Money Value </label>
@Html.TextBox("moneyvalue", null, new { @class = "form-control" })
<label class="control-label">Comment</label>
@Html.TextBox("comment", null, new { @class = "form-control" })
<label class="control-label">Status</label>
@Html.DropDownList("status1", (SelectList)ViewBag.StatusID, null, new { @class = "form-control" })
</div>
<div class="modal-footer">
<button id="EditModalNewMerge" type="button" class="modalEdit">Edit</button>
</div>
</div>
</div>
$(document).ready(function() {
$('.editView').click(function() {
var ID = $(this).data('id');
$("#status1").change(function () //status1 is for my dropDownList Status
{
//hide social worker and sponsor stuff
val = $(this).val();
if (val == '11') //if is my Status changed to 'Lost' then
{
$('#modalEditMerge').append('<input type="aText" id="aText">');
//show social worker stuff
} else {
alert(val); //show sponsor stuff
}
});
editID = ID;
$.ajax({
url: "/MergePipelineStatus/GetDataFromDb",
contentType: 'application/json;',
data: JSON.stringify({ id: ID }),
type: 'POST',
success: function(result) {
if (result.id > 0) {
$("#status1").val(result.statusID);
$("#hrvalue").val(result.hrvalue);
//$("#client").val(result.client);
$("#fco").val(result.fco);
$("#moneyvalue").val(result.moneyvalue);
$("#comment").val(result.comment);
}
},
error: function(valid) {
swal("An error occurred!", "Please try again!", "error");
}
});
});
function loadAjax(reason) {
$.ajax({
url: "/MergePipelineStatus/EditModal",
contentType: 'application/json;',
data: JSON.stringify({ id: editID, status: $("#status1").val(), reason: reason }),
type: 'POST',
success: function(result) {
if (result.boolresponse == true) {
$('#modalEditMerge').modal('toggle');
swal({
title: "Successful Edit",
text: "You have successfully edited the item!",
type: "success",
},
function(isConfirm) {
if (isConfirm) {
window.location.href = "/MergePipelineStatus/Index";
}
});
} else {
swal("Alert!", result.textResponse, "warning");
}
},
error: function(valid) {
swal("An error occurred!", "Please try again!", "error");
}
});
}
});
The gray fields in the code above are placeholders for sensitive data. The white field should be positioned below the Status in the modal. How can I achieve that?