CODEWITHSUNDEEP
jquerytextnewline
Lázár Antal
Lázár Antal

Reputation: 13

Adding new line in JQuery

I am looping trough a table with jquery, and trying to get the text from TD's. Once I have the TD values, I'm concatenating them into a single text:

table.find('tr').each(function (i) {
        var $tds = $(this).find('td'),
            order_num = $tds.eq(1).text(),
            row_id = $tds.eq(2).text(),
            accnt_id = $tds.eq(3).text(),
            status_cd = $tds.eq(4).text(),
            sub_status = $tds.eq(5).text();

row = row+"\n"+order_num+"  "+row_id+"  "+accnt_id+""+status_cd+"   "+sub_status;
    });

    $("#dialog").text(row);
    $("#dialog").dialog("open");
    copyToClipboard(row);

The problem is, that I am not able to add new line to the end of each tr line. I've tried the following but non of them was successful:

row = row+"\n"+order_num+"  "+row_id+"  "+accnt_id+"    "+status_cd+"   "+sub_status;

row = row+"\u000A"+order_num+"  "+row_id+"  "+accnt_id+"    "+status_cd+"   "+sub_status;

When I add the text to the dialogue or to clipboard, the new line is missing, and all I have is a text snake. Dou you have any idea how to properly add a new line to the text in JQuery? Thanks

Upvotes: 1

Views: 21709

Answers (3)

Lázár Antal
Lázár Antal

Reputation: 13

Problem solved.

This is the method I've used for pushing the text to the clipboard

function copyToClipboard(element) {
            var $temp = $("<input>")
            $("body").append($temp);
            $temp.val(element.join("\n")).select();
            document.execCommand("copy");
            $temp.remove();
        }

Changing the input to textarea solved my problem, the text was inserted to the clipboard with the new lines in place. Hopefully it can be useful for others as well.

Upvotes: 0

sabithpocker
sabithpocker

Reputation: 15566

By default HTML Elements(except pre,code) collapse white-space(collapse to one) and line breaks. You have to use <br> to have line breaks.

You can replace line breaks to <br> just for display.

var text = "my line1 \nMyline 2";
$('#dialog').html(text.replace("\n", "<br>"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dialog"></div>

You can also use white-space CSS to make your element show pre-formatted text.

var text = "My line1\nMyline2";
$('#dialog')
  .css({'white-space': 'pre'})
  .text(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dialog"></div>

The approach that you should follow depends on what you are trying to accomplish.

Upvotes: 2

toomanyredirects
toomanyredirects

Reputation: 2002

I think you should be trying to add <br />, not \n to generate a new line. That will probably help.

As you're also copying to the clipboard, you should probably store the rows as an array, which you join with <br /> for the dialog box, but \n for the clipboard.

You could also look at simplifying your code a little; if you're just getting the text from all the individual TDs, you can use the Node.textContent method instead on the TR (documentation). This may yield unexpected results though depending on the white space, so sticking with TDs still may be a better option.

Also take a look at using method chaining in your jQuery code, so you're not using two lines to write the $('#dialog') code.

For example:

var rowContent = [];
table.find('tr').each(function(i) {
  rowContent.push($(this).get(0).textContent);
});

$('#dialog').html(rowContent.join('<br />')).dialog('open');
copyToClipboard(rowContent.join("\n"));

N.B. This is untested as at the time of writing I do not have the HTML for your table.

Upvotes: 0

Related Questions