Как я могу удалить текст из модального?Я сделал модуль, который показывает отношения между 2 флажками.Если я поставлю myModal.find('.modal-body').text("Not related"); и выберу 2 данных, которые не связаны друг с другом, модальное сообщение показывает, что они не связаны.Но если я выберу 2, которые связаны друг с другом, модал показывает, что они тоже не связаны.Но я хочу напечатать «Не связано», когда данные не связаны друг с другом.Как я могу решить эту проблему?
Мой код
var nodes = [];
var edges = [];
$(function() {
var checkBoxes = $("input[name=case]");
var myModal = $("#model4temp");
var relations = {},
users = {};
checkBoxes.each(function() {
relations[this.dataset.name] = this.dataset.connect;
users[this.dataset.name] = this.dataset.user;
});
$('#checkBtn').click(function() {
var checkedBoxes = checkBoxes.filter(":checked");
if (checkedBoxes.length !== 2) {
alert("You must check 2 checkbox!");
return false;
}
var current = checkedBoxes[0].dataset.name,
end = checkedBoxes[1].dataset.name;
var id = 1;
while (current) {
nodes.push({id: id, label: current, shape: 'box'});
var next = relations[current];
// If not related
if (!next) {
// Update modal
//myModal.find('.modal-body').text("not related");
break;
}
var label = users[current] || "";
edges.push({from: id, to: id + 1, label: label,font: {align: 'top'}, arrows: {to: true}});
if (next === end) {
nodes.push({id: id + 1, label: next, shape: 'box'});
break;
}
current = next;
id++;
}
myModal.modal('show');
});
});
function drawNetwork() {
var container = document.getElementById('network-container');
var data = {
nodes: nodes,
edges: edges
};
var width = 600;
var height = 500;
var options = {
width: width + 'px',
height: height + 'px',
edges: {
smooth: false
},
physics: false,
interaction: {
hover: true,
dragNodes: true,
zoomView: false,
dragView: false
}
};
nodes = [];
edges = [];
var network = new vis.Network(container, data, options);
}
$('#model4temp').on('shown.bs.modal', function() {
drawNetwork();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Connect to</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="case" data-name="Data1" data-connect="Data2" data-user="Description1"></td>
<td>Data1</td>
<td>Data2</td>
<td>Description1</td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Data2"></td>
<td>Data2</td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Data3" data-connect="Data4" data-user="Description3"></td>
<td>Data3</td>
<td>Data4</td>
<td>Description2</td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Data4"></td>
<td>Data4</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Input button -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<input type="button" id="checkBtn" value="View" class="btn btn-info">
</div>
</div>
</div>
<div class="modal fade" id="model4temp" tabindex="-1" role="dialog" aria-labelledby="basicModal">
<div class="modal-dialog">
<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" id="myModalLabel">Sample Network in modal</h4>
</div>
<div class="modal-body">
<div id="network-container" style="height:500px;width:600px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>