Удалить текст из модального окна

Как удалить текст из модального окна? Я сделал модуль, который показывает отношения между двумя флажками. Если я поставлю 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">&times;</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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Было 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">&times;</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>

Если я выберу 2, которые не подключены, все будет работать нормально. Но затем, когда я выбираю 2 подключенных друг к другу, отображается: «Не связаны».

user9484230 18.05.2018 17:55

В этом случае модальное окно пусто.

user9484230 18.05.2018 18:23

Спасибо @RogerC, вы очень помогли!

user9484230 18.05.2018 18:34

Другие вопросы по теме