Как обрабатывать данные целевого значения с помощью специальных символов? - PullRequest
Новая
       13

Как обрабатывать данные целевого значения с помощью специальных символов?

0 голосов
/ 10 октября 2018

Я реализую одно всплывающее окно начальной загрузки.И я помещаю некоторые значения со специальными символами в data-target.Эти значения поступают из БД, это всплывающее окно, реализующее сквозной цикл.

Я пробовал с w3school.Как открыть всплывающее окно с помощью специальных символов. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Basic Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#my(Modal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="my(Modal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Если удалить (, то это будет работать.Но эти идентификаторы - не моя рука, эти идентификаторы исходят от API.

Ответы [ 3 ]

0 голосов
/ 10 октября 2018

Вы должны экранировать специальные символы, чтобы jQuery знал, что вы хотите использовать этот символ таким, какой он есть, и он не должен рассматриваться как синтаксическая ошибка. 

function escapeString(str) {
    return (str + '').replace(/[\\"')(]/g, '\\$&').replace(/\u0000/g, '\\0')
}
// Add special characters here       ^ -- after \\
// This allows single, and double quotes, 
// opening, and closing parentheses.

Оберните целевое значениес вышеуказанной функцией: 

data-target="+ escapeString(targetValue) +"
0 голосов
/ 10 октября 2018 
<div ng-repeat="rule in ruleDetails">
  <div>{{rule.name}} <i data-toggle="modal" data-target="#{{ rule.name }}"></i>
  </div>
  <div class="modal fade" id="{{ rule.name }}" tabindex="-1" role="dialog"></div> 
</div>

I have special characters in rule.name for example: 'as-copy(1) from test data' 
which is bounded with id attribute of bootstrap modal. By this UI modal or popup 
is not opening and displayed rule name. Please help how to trim or escape 
special characters here?
0 голосов
/ 10 октября 2018

Вам необходимо «экранировать» специальные символы в селекторе.Это: 

data-target="#my(Modal"

Должно быть: 

data-target="#my\(Modal"

Или: 

data-target="#my\000028Modal"

Ваш пример кода только с одним добавленным \: 

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Basic Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#my\(Modal">Open Modal</button>
  <!-- Modal -->
  <div class="modal fade" id="my(Modal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...