0

I am using flask and socket.io to transmit python exceptions, and show the exception strings in an html modal box. The problem is the strings displayed in the modal box has no format, which looks like a long concatenated string with all the exceptions put together,

Traceback (most recent call last): File "/home/user_name/.local/lib/python3.5/site-packages/requests/packages/urllib3/connection.py", line 137, in _new_conn (self.host, self.port), self.timeout, **extra_kw) File "/home/user_name/.local/lib/python3.5/site-packages/requests/packages/urllib3/util/connection.py", line 91, in create_connection raise err File "/home/user_name/.local/lib/python3.5/site-packages/requests/packages/urllib3/util/connection.py", line 81, in create_connection sock.connect(sa) File "/usr/local/lib/python3.5/dist-packages/gevent/_socket3.py", line 301, in connect raise error(err, strerror(err)) ConnectionRefusedError: [Errno 111] Connection refused

and I like it to be displayed like in the python console, 

Traceback (most recent call last):
  File "/home/user_name/.local/lib/python3.5/site-packages/requests/packages/urllib3/connection.py", line 137, in _new_conn
    (self.host, self.port), self.timeout, **extra_kw)
  File "/home/user_name/.local/lib/python3.5/site-packages/requests/packages/urllib3/util/connection.py", line 91, in create_connection
    raise err
  File "/home/user_name/.local/lib/python3.5/site-packages/requests/packages/urllib3/util/connection.py", line 81, in create_connection
    sock.connect(sa)
  File "/usr/local/lib/python3.5/dist-packages/gevent/_socket3.py", line 301, in connect
    raise error(err, strerror(err))
ConnectionRefusedError: [Errno 111] Connection refused

I am wondering how to achieve that in JavaScript.

Update

This is my js code for modal box using <pre>,

function show_modal(row, column) {

  var modal_header = $(".modal-header");
  modal_header.text("header_footer");

  $(".modal-body p").append("<pre>" + "Traceback (most recent call last): File "/home/user_name/.local/lib/python3.5/site-packages/requests/packages/urllib3/connection.py", line 137, in _new_conn (self.host, self.port), self.timeout, **extra_kw) File "/home/user_name/.local/lib/python3.5/site-packages/requests/packages/urllib3/util/connection.py", line 91, in create_connection raise err File "/home/user_name/.local/lib/python3.5/site-packages/requests/packages/urllib3/util/connection.py", line 81, in create_connection sock.connect(sa) File "/usr/local/lib/python3.5/dist-packages/gevent/_socket3.py", line 301, in connect raise error(err, strerror(err)) ConnectionRefusedError: [Errno 111] Connection refused " + "</pre>");

  var modal_footer = $(".modal-footer");
  modal_footer.text("header_footer");

  modal.style.display = "block";
}
davidism
  • 121,510
  • 29
  • 395
  • 339
daiyue
  • 7,196
  • 25
  • 82
  • 149
  • Wrap the string in `
    `. First search result for "html keep formatting": https://stackoverflow.com/questions/36656/how-do-i-keep-whitespace-formatting-using-php-html
     –  May 31 '17 at 10:33
  • @ChrisG the problem is if the error is too long, it will stick out the modal box, so how to wrap the error and display the stick-out part in a new line. – daiyue May 31 '17 at 11:05
  • @ChrisG tried to apply `word-wrap: break-word;` or `text-wrap:normal;` to the `modal-body` didn't seems to wrap the text to the next line. – daiyue May 31 '17 at 11:20

1 Answers1

1

Your test code removes essential formatting.

Here's working code:

var err = "Traceback (most recent call last):\n  File \"/home/user_name/.local/lib/python3.5/site-packages/requests/packages/urllib3/connection.py\", line 137, in _new_conn (self.host, self.port), self.timeout, **extra_kw)\n  File \"/home/user_name/.local/lib/python3.5/site-packages/requests/packages/urllib3/util/connection.py\", line 91, in create_connection raise err\n  File \"/home/user_name/.local/lib/python3.5/site-packages/requests/packages/urllib3/util/connection.py\", line 81, in create_connection sock.connect(sa)\n  File \"/usr/local/lib/python3.5/dist-packages/gevent/_socket3.py\", line 301, in connect raise error(err, strerror(err))\nConnectionRefusedError: [Errno 111] Connection refused ";

function show_modal() {

  var $pre = $("<pre>").html(err);
  $(".modal-body p").append($pre);

}

show_modal();
pre {
    white-space: pre-wrap
}

.modal-body {
  width: 90%;
  margin: 1em auto;
  padding: 0 1em;
  border: 1px solid silver
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
  <p></p>
</div>