I am trying to pop a modal, then via javascript, check and uncheck certain boxes and radios. Ive tried to find any similar situations online and on stack, but none of them match this scenario and even trying to make them fit still has no effect. It also fills in some text boxes at the same time. The text boxes all work as expected. However I cannot get the radio nor checkbox items to take any effect. I can set them initially with a checked value (in the html of the modal) or with no checked value as well as with no checked attribute at all. No matter what I do, no amount of effort to effect those checkboxes or radios seems to work. Here is the Modal:
<div class="modal bs-1-modal-lg" id="riskRecoModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg center-text" style="max-width: 900px; min-width: 900px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Edit Risk / Reco Record</h4>
</div>
<div class="modal-body">
<dl class="dl-horizontal">
<dd>
<div class="form-group">
<div class="radio">
<input type="radio" name="RiskRecRadio" id="m_reco" > Recommendation <input type="radio" name="RiskRecRadio" id="m_risk" > Risk
</div>
<div class="checkbox">
<label><input type="checkbox" id="m_active" value=""> Is Active </label>
</div>
</div>
<span class="input-group">
<span class="input-group-addon" style="background-color: whitesmoke; min-width: 160px; max-width: 160px">Description:</span>
<textarea type="textarea" class="form-control" placeholder="ex. Upgrade Windows 2003 Server" id="m_DescriptionTb" style="min-width: 485px; max-width: 485px;"></textarea>
</span>
<span class="input-group">
<span class="input-group-addon" style="background-color: whitesmoke; min-width: 160px; max-width: 160px">Outcome:</span>
<textarea type="textarea" class="form-control" placeholder="ex. Lack of security patches creates vulnerabilities." id="m_outcomeTb" style="min-width: 485px; max-width: 485px;"></textarea>
</span>
<span class="input-group">
<span class="input-group-addon" style="background-color: whitesmoke; min-width: 160px; max-width: 160px">Action:</span>
<textarea type="textarea" class="form-control" placeholder="ex. Upgrade Servers" id="m_ActionTb" style="min-width: 485px; max-width: 485px;"></textarea>
</span>
<span class="input-group">
<span class="input-group-addon" style="background-color: whitesmoke; min-width: 160px; max-width: 160px">Impact Date:</span>
<input type="text" class="form-control datepicker" style="min-width: 485px; max-width: 485px;" id="m_ImpactDateTb">
</span>
<br />
<span class="input-group" style="background-color: white; min-width: 645px; max-width: 645px">
<span class="input-group-addon" style="background-color: whitesmoke; min-width: 160px; max-width: 160px">Priority</span>
<label class="btn_yellow">
<input type="radio" name="PriorityRadio" id="m_PriorCaut" > Caution
</label>
<label class="btn_red">
<input type="radio" name="PriorityRadio" id="m_PriorCrit" > Critical
</label>
</span>
<span class="input-group" style="background-color: white; min-width: 645px; max-width: 645px">
<span class="input-group-addon" style="background-color: whitesmoke; min-width: 160px; max-width: 160px">Affect Future Availability</span>
<label class="btn btn_green">
<input type="radio" name="FutureAvailRadio" id="m_FA1" > No
</label>
<label class="btn_yellow">
<input type="radio" name="FutureAvailRadio" id="m_FA2" > Caution
</label>
<label class="btn_red">
<input type="radio" name="FutureAvailRadio" id="m_FA3" > Critical
</label>
</span>
<span class="input-group" style="background-color: white; min-width: 645px; max-width: 645px">
<span class="input-group-addon" style="background-color: whitesmoke; min-width: 160px; max-width: 160px">Affect Future Capacity</span>
<label class="btn btn_green">
<input type="radio" name="FutureCapRadio" id="m_FC1" checked="checked"> No
</label>
<label class="btn_yellow">
<input type="radio" name="FutureCapRadio" id="m_FC2" checked=""> Caution
</label>
<label class="btn_red">
<input type="radio" name="FutureCapRadio" id="m_FC3" checked=""> Critical
</label>
</span>
<span class="input-group" style="background-color: white; min-width: 645px; max-width: 645px">
<span class="input-group-addon" style="background-color: whitesmoke; min-width: 160px; max-width: 160px">Affect Future Security</span>
<label class="btn btn_green">
<input type="radio" name="FutureSecRadio" id="m_FS1" checked="checked"> No
</label>
<label class="btn_yellow">
<input type="radio" name="FutureSecRadio" id="m_FS2" checked=""> Caution
</label>
<label class="btn_red">
<input type="radio" name="FutureSecRadio" id="m_FS3" checked=""> Critical
</label>
</span>
<span class="input-group" style="background-color: white; min-width: 645px; max-width: 645px">
<span class="input-group-addon" style="background-color: whitesmoke; min-width: 160px; max-width: 160px">Affect Future Continuity</span>
<label class="btn btn_green">
<input type="radio" name="FutureContRadio" id="m_FCont1" checked="checked"> No
</label>
<label class="btn_yellow">
<input type="radio" name="FutureContRadio" id="m_FCont2" checked=""> Caution
</label>
<label class="btn_red">
<input type="radio" name="FutureContRadio" id="m_FCont3" checked=""> Critical
</label>
</span>
<br />
<input class="btn btn-primary" id="m_Submit" type="submit" value="submit" onclick="createRiskReco()" />
</dd>
</dl>
<br />
<p>
<button type="submit" class="btn btn-success" data-dismiss="modal" id="createTicketBtn" onclick="saveRiskEdit('@User.Identity.Name');" style="padding: 0; height: 34px; width: 100%; max-width: 245px">
<span class="glyphicon glyphicon-save-file" aria-hidden="true"></span> Create Ticket
</button>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Here is the JS
function loadEdit(element) {
var id = $(element).closest("tr").find("td:nth-child(1)").text();
var getRuleData = {};
getRuleData.url = "/RiskReco/RiskRecoEditPull";
getRuleData.type = "POST";
getRuleData.data = JSON.stringify({ recordId: id });
getRuleData.datatype = "json";
getRuleData.contentType = "application/json";
getRuleData.success = function (data) {
//strip any " chars
//data.responseText = data.responseText.replace(/^"(.*)"$/, '$1');
$("#riskRecoModal").modal();
document.getElementById('m_DescriptionTb').value = " ";
document.getElementById('m_outcomeTb').value = " ";
document.getElementById('m_ActionTb').value = " ";
document.getElementById('m_ImpactDateTb').value = " ";
document.getElementById('m_DescriptionTb').value = data.description;
document.getElementById('m_outcomeTb').value = data.outcome;
document.getElementById('m_ActionTb').value = data.action;
document.getElementById('m_ImpactDateTb').value = data.impact_date;
//RISK/RECO
if (data.risk) {
document.getElementById('m_risk').checked = data.risk;
} else {
document.getElementById('m_reco').checked = true;
}
//ACTIVE
document.getElementById('m_active').checked = data.active;
//PRIORITY
if (data.pri) {
document.getElementById('m_PriorCrit').checked = data.pri;
} else {
document.getElementById('m_PriorCaut').checked = true;
}
//AVAILABILITY
if (data.avail === "1") {
document.getElementById('m_FA1').checked = true;
} else if (data.avail === "2") {
document.getElementById('m_FA2').checked = true;
} else {
document.getElementById('m_FA3').checked = true;
}
var tester = data.impact_date;
}
$.ajax(getRuleData);
};
Tried
I have tried many variations of changing the elements through jquery and js after the success in the ajax call. I have tried to load and hide the modal on page load ( if for some odd reason that would do anything). The data from the call comes back fine, I can see it is all correct by setting a breakpoint at the end of this block. I have seen when inspecting the page after, that the checkbox and radios will have a "checked" attribute, but still visually displays no check. It is just odd because I have no issue modifying the text field values, but these radios and checkboxes are having no part of it.
Aucun commentaire:
Enregistrer un commentaire