Как удалить текст из модального окна? Я сделал модуль, который показывает отношения между двумя флажками. Если я поставлю 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>


![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Было 2 проблемы:
related, чтобы не рисовать сеть, если нет связи.myModal.find('.modal-body').text("Not related");, вы удаляете свой #network-container. Поэтому, если вы попытаетесь нарисовать другую сеть, вы получите сообщение об ошибке, так как контейнера больше нет.Я исправил оба:
- добавление диапазона #message, содержащего сообщение "Не связано"
- отображение #message и скрытие #network-container при отсутствии связи
- скрытие #message и отображение #network-container при наличии связи
var nodes = [];
var edges = [];
var related = false;
$(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('#message').show();
myModal.find('#network-container').hide();
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'});
myModal.find('#message').hide();
myModal.find('#network-container').show();
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">
<span id = "message">Not related</span>
<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>В этом случае модальное окно пусто.
Спасибо @RogerC, вы очень помогли!
Если я выберу 2, которые не подключены, все будет работать нормально. Но затем, когда я выбираю 2 подключенных друг к другу, отображается: «Не связаны».