Concatenate javascript string and variable in an echo statement

Question

I want to limit the size of a paragraph of text. The wrapper div has a dynamically created ID and the paragraph text is also dynamically inserted. The HTML and JavaScript are in the same file.

The HTML

echo"
...
   <div id ='subTextWrapper$sub_id' >
      <p>$submission_text</p>
   </div>
...";

The JavaScript:

echo"
<script>
...
var submissionId = $sub_id;

//Limit size of a submission if too long and show a link to read more
var submissionString = $('#subTextWrapper' + submissionId).html();

if (submissionString.split(' ').length > 50) {
   $('#subTextWrapper' + submissionId).html(submissionString.split(' ').slice(0, 50).join(' ') 
   + ' ... '
   + `<a class='read-more' + submissionId>Read more</a>`);
}

$('a.read-more' + submissionId).click(function () {
    $('#subTextWrapper' + submissionId).html(submissionString);
});
...
</script>";

In the if statement above I want to concatenate the class name read-more with ``` the variable submissionId:

`<a class='read-more' + submissionId>Read more</a>`

This doesn't seem to work. I am not an expert in JS, so any help would be appreciated. Just a note, when I remove the variable submissionId then it works, but obviously it expands all my dynamically created submissions.

You concatenation seems wrong: `"Read more"` or `"Read more".replace('@Sub.', submissionId)` — Lain, Jul 02 '19 at 06:58
What is the server-side language - PHP? Please add a tag for it, because you aren't working with pure JS here but you're trying to generate JS/HTML code from the server-side. This would involve reconciliating the server-side syntax with the client-side code required. — VLAZ, Jul 02 '19 at 07:02

Lain · Accepted Answer · 2019-07-02T11:15:32.940

You concatenation seems wrong.

What you are currently inserting is exactly what you see as string:

<a class='read-more' + submissionId>Read more</a>

and not the value of submissionId. Since you are not handling the two different delimiters correctly. You have ` enclosing the whole a element and ' enclosing the class. You are closing the class before adding the submissionId and not closing the main literal to acutally include the value of submissionId .

You can fix it like (if submissionId is a string):

`<a class='read-more` + submissionId.trim() + `'>Read more</a>`

or

`<a class='read-more@Sub.'>Read more</a>`.replace('@Sub.', submissionId.trim())

You could also use an array to build your string to avoid the different delimiters:

//var submissionId = 1234;
var tString = [];
tString.push("<a class='read-more"); //REM: Open the class attribute and not closing it since submissionId  is part of the class
tString.push(submissionId); //REM: Adding the value of submissionId
tString.push("'>Read more</a>"); //REM: Closing the class attribute
console.log(tString.join('')); //-> <a class='read-more1234'>Read more</a>

Since submissionId looks like an id/number to me, please be aware that classnames shall not start with digits.

Furthermore if you want to limit the characters of a string you could use String.prototype.substring() instead:

submissionString.substring(0, 50);

The first solution seems to work (without the trim function). I have to wrap my head around why the mix of single quotes and template literals work like that in this particular case. But I'll have a bit of a read. Thanks. — Pieter Steyn, Jul 02 '19 at 07:36
@Pieter Steyn: So that means `submissionId` is a numeric value? Then a `trim()` wont be available indeed. The quotes do not work because you are not ending the initial one. You have the ` one enclosing the whole tag and the ' enclosing the class attribute and you are not ending/starting those correctly. — Lain, Jul 02 '19 at 11:04
Yes ```submissionId``` is a numeric variable. Wrt the quotes, makes sense. Thanks. — Pieter Steyn, Jul 02 '19 at 11:35

score 0 · Answer 2 · answered Jul 02 '19 at 07:06

would it not work like so.

echo"
<script>
//Limit size of a submission if too long and show a link to read more
var submissionString = $('#subTextWrapper' + submissionId).html();
if (submissionString.split(' ').length > 50) {
$('#subTextWrapper' + submissionId).html(submissionString.split(' ').slice(0, 
50).join(' ') 
+ ' ... '
+ `<a class='read-more' + submissionId>Read more</a>`);
}
$('a.read-more'$sub_id).click(function () {
$('#subTextWrapper'$sub_id).html(submissionString);
});
...
</script>";

or you could also concatenate like so

 $('a.read-more'".$sub_id.")

Concatenate javascript string and variable in an echo statement

2 Answers2