Formatting Javascript ouput

Question

I have the following code inside a bootstrap modal - the data is being pulled from a button (that triggers the modal)

<script> 
  $('#myFavorites').on('show.bs.modal', function (event) { 
    // Heart Icon triggers 
    var heart = $(event.relatedTarget) 
    // Button that triggered the modal 
    // List of variables 
    var user = heart.data('user') 
    var title = heart.data('track') 
    var artist = heart.data('artist') 

    // Print to screen 
    var modal = $(this) modal.find('.modal-title').html('User: ' + user + '<p>Song: ' + title + '</p><p>Artist: ' + artist) 
    // modal.find('.modal-body input').val(title) 
  }) 
</script>

This all prints out on one line. How can I format it like so (with simple breaks to a new line):

User: 01
Song: Title Here
Artist: Artist Name Here
Source: URL Here
Poster: Poster Here

I injected the \n in several places but it broke the code?

Use Bootstrap's output formatting classes like col-md3, or create an HTML table. — Barmar
– Barmar, Commented May 25, 2017 at 21:25
As stated below - the HTML is not being recognized or a simple BR would work, as others have suggested. So even though this is a great suggestion, if a BR doesn't work, then table tags wont... hmmm — Davo
– Davo, Commented May 25, 2017 at 21:32

Scott Marcus · Accepted Answer · 2017-05-25 21:31:25Z

2

Use <br/> for new line break and use html function instead of text function:

modal.find('.modal-title').html('User: ' + user + '<br/>Song: ' + title + '<br/>Artist: ' + artist + '<br/>Source: ' + source + '<br/>Poster: ' + poster)

edited May 25, 2017 at 21:31

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

answered May 25, 2017 at 21:21

Mohammad Hamedani

3,3543 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Davo Over a year ago

I tried that but the output is: User: 2<br/>Song: After Midnight<br/>Artist: Blink 182<br/>Source: youtu.be/H86730HjLVA<br> --- the breaks are not recognized...?

Scott Marcus Over a year ago

While XHTML syntax (<br />) is legal, there really is no good reason to use it unless you will need to treat your HTML as XML (which these days would be very rare). If anything, it causes confusion and results in users using that self-terminating syntax in places where they shouldn't (i.e. <script src="..." />).

Mohammad Hamedani Over a year ago

Are you using html function instead of text? @Davo

Davo Over a year ago

Here is the complete script:

Davo Over a year ago

|

Collectives™ on Stack Overflow

Formatting Javascript ouput

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related