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: "<a class='read-more" + submissionId + "'>Read more</a>" or "<a class='read-more@Sub.'>Read more</a>".replace('@Sub.', submissionId) — Lain
– Lain, Commented Jul 2, 2019 at 6: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
– VLAZ, Commented Jul 2, 2019 at 7:02

Lain · Accepted Answer · 2019-07-02 11:15:32Z

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

edited Jul 2, 2019 at 11:15

answered Jul 2, 2019 at 7:02

Lain

3,7361 gold badge22 silver badges28 bronze badges

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

3 Comments

Pieter Steyn Over a year ago

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 Over a year ago

@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 Over a year ago

Yes submissionId is a numeric variable. Wrt the quotes, makes sense. Thanks.

Uzair Khan · Accepted Answer · 2019-07-02 07:06:45Z

0

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

answered Jul 2, 2019 at 7:06

Uzair Khan

703 silver badges12 bronze badges

Collectives™ on Stack Overflow

Concatenate javascript string and variable in an echo statement

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related