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.

• Lain: You concatenation seems wrong: "<a class='read-more" + submissionId + "'>Read more</a>" or "<a class='read-more@Sub.'>Read more</a>".replace('@Sub.', submissionId)
• Itang Sanjana: That echo, is that PHP?
• VLAZ: 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.

Answer 1

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);

• Pieter Steyn: 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.
• Lain: @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.
• Pieter Steyn: Yes submissionId is a numeric variable. Wrt the quotes, makes sense. Thanks.

Answer 2

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.")