JavaScript Hidden characters causing JQuery function to fail

I am trying to understand what causes a simple jquery function to fail. It simply looks for the ID, replaces some content with other data. I have $data1, $data2, $data3 as the replacement test data for "...more". The replace works for $data1 and $data2, but fails for $data3. Unfortunately, all of the data I need to work with comes in $data3 format.

The test code is below:

<?php
  $data1 = '<p>line one text here</p>'; 
  $data2 = '<p>line one text here</p><p>line two text here</p><p>line three text here</p>';
  $data3 = <<<EOF
    <p>line one text here</p>
    <p>line two text here</p>
    <p>line tgree text here</p>
EOF;
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            //To get remainder of article when clicked on "...more"
            $(document).ready(function () {
                $("#more").click(function () {
                    $("#more").html('<?= $data2; ?>');
                    $("#more").css('color', 'black');
                    $("#more").css('cursor', '');
                });
            });
        </script>
    </head>
    <body>
        <p class="card-text"><span id="more" style = "color: blue; cursor:pointer;">...more</span></p>  
    </body>
</html>

Looking at the console, I see that the data in the jquery code shows single continuous lines for $data1 and $data2, however, for $data3, there are clearly line breaks which is what I am suspecting is causing the failure (script does nothing, no change-out occurs). See graphic below:

How would I find out what these hidden characters are that are creating the problem so that I can remove/replace all of them before submitting to the jquery function, or is there a way to process it in the function beforehand? Any other insight is appreciated.

Thanks in advance!

Answer:1

To fix this you will either need to use template literals in your JS code, ie. delimit the string with ` instead of ' or ". This is because they allow line breaks within the string literal, as PHP does:

$("#more").html(`<?= $data2; ?>`);

Note that this is unsupported in IE11 and lower.

Alternatively you will need to replace the line breaks in the string in PHP before it's output to the JS.

Answer:2

fill an array with getElementById

I am trying to fill an array with numbers that I have in my HTML file by using getElementById. For the HTML, I am attempting to do this using: <div id="E1_INV_Funds0">1</div> <div id="...

fill array with random numbers
fill array with zeros
fill array with random numbers c++
fill array with zeros python
fill array with 0
fill array with random numbers python
fill array with zeros c++
fill array with random numbers javascript
fill array with zeros javascript
fill array with values
fill array with numbers java
fill array with same value python
fill array with numbers
fill array with user input java
fill array with values java
fill array with values javascript
fill array with value numpy
fill array with value c++
fill array with same value java
fill array with null c

Remove multiple localStorage items

I have two 'localStorage' items, summaryForm and projectForm. Currently I use two statements to remove them, localStorage.removeItem("summaryForm"); localStorage.removeItem("projectForm"); Is it ...

remove multiple items from localstorage

keep filter after ag-grid update

I'm trying to keep a grid's filter after updating a row. When I click on a row in the grid, I open a dialog where I update the informations for this row, and then I look for the clicked row in the ...

keep rank after filter tableau
keep rows hidden after filter
primefaces datatable keep filter after update

When number reaches every nth value inside nested loop

Purpose: A user can choose a Product Type and variation of that Product Type. I need to track every Product Type added and how many variations were added. For Example, item 1: Shirt > Long Sleeve (1) ...