Develop Reference

Breaking a string into multiple lines inside a javascript code

I am trying to format (beautify, tidy, clear up.. you name it) a snippet of HTML inside my javascript code or, in other words, spread it out on multiple lines rather than having it written on one line so it can be read easily.
Basically, it's a piece of html code that I am trying to append to the page by calling the jQuery's .append(); method.
And here's what I am trying to do:
$('.videos').append('<li>
<span>' + count + '</span> -
<a href="' + vList[i].player + '">
<span class="title">' + videoTitle + '</span>
</a>
</li>');
Appearantly, it won't work that way. I am getting Uncaught SyntaxError: Unexpected token >
When It is written as follows, everything works fine.
$('.videos').append('<li><span>' + count + '</span> - <span class="title">' + videoTitle + '</span></li>');
It's kind of weird that when I tried to do the exact thing here,
var albumURL = API + '/video.get?=owner_id=' + userID +
'&album_id=' + aList[i].album_id +
'&access_token=' + accessToken;
I had no problem at all.
I know this issue is not that big of a deal but I am trying to get around with it just for the sake of simplicity.
Any suggestions?

If you have a multiline string, you need to use the multiline string syntax.
However, it's better to store your HTML in templates and not code :) That makes them more readable, more reusable and more maintainable.
What about something like - in your HTML:
<script type="text/template" id="videoTemplate">
<li>
<span>{{count}}</span>
<a href="{{videoURL}}">
<span class="title">{{videoTitle}}</span>
</a>
</li>
</script>
Then in JavaScript
var template = $("#videoTemplate").html();
$(".videos").append(template.replace("{{count}}",count).
replace("{{videoURL}}",vList[i].player).
replace("{{videoTitle}}",videoTitle));
That way, you get a clearer separation of the template you're using and your code. You can change the HTML independently and reuse it in other parts of code more easily.
The code does not have to even be aware of template changes and a designer can change the design without knowing JavaScript.
Of course, if you find yourself doing this often you can use a templating engine and not having a .replace chain.
ES2015 also introduces template strings which are also kind of nice and serve the same purpose in principle:
const videoTemplate = `<li>
<span>${count}</span>
<a href="${vList[i].player}">
<span class="title">${videoTitle}</span>
</a>
</li>`;

If you want to write a multiline string you should use the "\":
example:
$('.videos').append('<li> \
<span>' + count + '</span> - \
<a href="' + vList[i].player + '"> \
<span class="title">' + videoTitle + '</span> \
</a> \
</li>');

New answer:
With ES6 you can actually use string concatenation that is line-break insensible:
var html = `
<li>
${count}
</li>
`;
and the line breaks will not be a problem. Prior to ES6 I used mostly arrays and concat them. Its faster:
var html = [
'<li>',
count
'</li>'
].join('');
Old answer:
In javascript you cannot break lines without concatenating them with a + or using \. Try this:
$('.videos').append('<li>' +
'<span>' + count + '</span> - ' +
'<a href="' + vList[i].player + '">' +
'<span class="title">' + videoTitle + '</span>' +
'</a>' +
'</li>');

If you simply want to split rendered output onto new lines then append \n where you want the newline to appear, like this...
$('.videos').append('<li>\n<span>' + count + '</span> -\n\n<span class="title">' + videoTitle + '</span>\n\n</li>\n');
And if you want your JS to look nice you could try this, which will also ensure that your rendered HTML is indented.
var item = '';
item += '<li>\n';
item += ' <span>' + count + '</span> -\n';
item += ' <a href="' + vList[i].player + '">\n';
item += ' <span class="title">' + videoTitle + '</span>\n';
item += ' </a>\n';
item += '</li>\n';
$('.videos').append(item);

you can try like this
$('.videos').append( ['<li>',
'<span>' + count + '</span> - ' ,
'<a href="' + vList[i].player + '">' ,
'<span class="title">' + videoTitle + '</span>' ,
'</a>' ,
'</li>'].join('') );

From New Perspectives on HTML5, CSS, and JavaScript 6th Edition, Chapter 9 Getting Started with JavaScript:
"If you want to break a text string into several lines, you can indicate that the text string continues on the next line by using the following backslash \ character.
Example of proper line break:
      window.alert("Welcome \
      to Tulsa");

If you are rendering HTML using backticks and want to pass a variable inside it's very easy just add the backticks around the variable and concatenate it. let's take an eye on the below example
var x = 1;
$(wrapper).append(`
<div class="card">
<div class="card-body">
<h5 class="card-title">Plot `+ x +` </h5>
</div>
</div>
`);

Prestashop product image using javascript

How would you get a product image using javascript in Prestashop? I already know in tpl and php you can use this
$imagePath = Link::getImageLink($product['link_rewrite'], $product['id_product'], 'home_default');
{$link->getImageLink($product.link_rewrite, $product.id_product, 'home_default')}`
Is this possible to do this in javascript?

You can use : $('img#ID-of-your-img').attr('src')
this will return you the link to the image ;) .

If you use your javascript file in the same tpl than you can write this.
{$link->getImageLink($product.link_rewrite, $product.id_product, 'home_default')}
If you want to get product image from external file than you can find the product image by using the product_image class
like.
.product_image img
and it will help you to get the images of product.

Had the same question thats why i entered this 'stack'
Challenge: Wanted image with different sizes then default product.image size in #layer_cart
Solution:
Made an image with name popup_default in the BO of prestashop.
In /themes/theme_name/modules/blockcart/blockcart-json.tpl added the following at line 36
"image_popup": {$link->getImageLink($product.link_rewrite, $product.id_image, 'popup_default')|json_encode},
Then in /themes/theme_name/js/modules/blockcart/ajax-cart.js
made the following change at line 737
$('.layer_cart_img').html('<img class="layer_cart_img img-responsive" src="' + product.image + '" alt="' + product.name + '" title="' + product.name + '" />');
into
$('.layer_cart_img').html('<img class="layer_cart_img img-responsive" src="' + product.image_popup + '" alt="' + product.name + '" title="' + product.name + '" />');
Now i use an image with 'popup' sizes

jQuery append trouble with url parameter

I've been working for hours trying to get the single and double quotes nested correctly in order for this search result display to work, with having a dynamically appended "uniqueId" in part of the URL string on output.
Basically, the part of the JS code that is giving me trouble is this:
$('#results-list').append("<li rel='" + this.uniqueId + "'>" + this.dateTimeStamp + " — " + this.message + " — " + "<a class='iframeSmaller' href='commentDetails.php?uniqueId='" + this.uniqueId + "''>XXX</a>" + "</li>");
I want to have the "this.uniqueId" after the equal sign so that it generates a dynamic URL, which I then am going to link to a "details" page for that unique ID.
Can anyone please help me with the "this.uniqueId" syntax to get this correctly inserted into the URL for output?
Sorry if I am being unclear, I am learning all of this by the day :)
thanks!
ps... this does work, but it has a hardcoded uniqueID... what I want is a dynamic one based on the row, which is working as far as the "rel" part goes, just not the anchor part...
$('#results-list').append("<li rel='" + this.uniqueId + "'>" + this.dateTimeStamp + " — " + this.message + " — " + "<a class='iframeSmaller' href='commentDetails.php?uniqueId=32'>XXX</a>" + "</li>");
thanks again for any help with this syntax (or if there's a better way to go about what I'm trying to do)...

The quoting in your HTML for the anchor isn't quite right. You have this:
+ "<a class='iframeSmaller' href='commentDetails.php?uniqueId='" + this.uniqueId + "''>XXX</a>" +
I think it should be this (fix quoting on the link URL):
+ "<a class='iframeSmaller' href='commentDetails.php?uniqueId=" + this.uniqueId + "'>XXX</a>" +
You could see what's going on better if you build the string into a variable and then do a console.log() on the string of HTML you've built or look at its contents in the debugger.

Replace this part of your code:
... uniqueId='" + this.uniqueId + "''>XXX</a>" + "</li>");
for this one:
... uniqueId=" + this.uniqueId + "'>XXX</a>" + "</li>");

Jquery multi-line text problem

I have a div with text inside:
<div>A description of dreamstill. It is a music site that is social and other stuff where you cando this and that and pretty much anything that your heart allows. This is probably as long as the description will get.</div>
Then I extract the text and stick it as a data-url attribute on an image:
var desc = div.text();
div.replaceWith('<img class="center" src='+url+' data-desc=' + desc + ' />');
The problem is that the image is being generating like this:
<img class="center" src="http://featherfiles.aviary.com/2011-09-09/aae3b22a952841cd9c0d6a26a5867325.png" data-desc="A" description="" of="" dreamstill.="" it="" is="" a="" music="" site="" that="" social="" and="" other="" stuff="" where="" you="" cando="" this="" pretty="" much="" anything="" your="" heart="" allows.="" probably="" as="" long="" the="" will="" get.="">
What am I doing wrong here?

The issue is that you are missing quotes around the value in the tag, but you can't just add quotes because that will still break if the description text has quotes in it.
Instead, try this.
var desc = div.text();
div.replaceWith(
$('<img />', {
"class": "center",
"src": url,
"data-desc": desc
})
);

The other answers are correct, in that you're missing quotes, but the next problem you'll have will be when a description contains a quote and it breaks the HTML. My recommendation is to append the image, then set the data-desc.
div.replaceWith(
$('<img class="center" src="' + url + '"/>').attr('data-desc', desc)
);

div.replaceWith('<img class="center" src="'+url+'" data-desc="' + desc + '" />');
forgot the " on either side of the desc

You missing quotes. All attributes values should be in " quotes
div.replaceWith('<img class="center" src='+url+' data-desc="' + desc + '" />');
and for url to
src="'+url+'"
from w3c
Attribute values should always be enclosed in quotes
http://www.w3schools.com/html/html_attributes.asp
live demo: http://jsfiddle.net/pzC7b/8/

This will replace quotes with character entity
desc.replace(/\"/g, '"')
Result + encode url:
div.replaceWith('<img class="center" src="' + encodeURI(url) + '" data-desc="' + desc.replace(/\"/g, '"') + '" />');
Example on jsfiddle

Blinking page title

I'm trying to get some notifications working for AJAXChat. To do this all I want to do is get the title of the page to blink until focused. To do this I'm using the jquery-titlealert plugin. The problem is the html that is generated for the onload event is generated inside a js file shown here
return '<div id="'
+ this.getMessageDocumentID(messageID)
+ '" class="'
+ rowClass
+ '">'
+ this.getDeletionLink(messageID, userID, userRole, channelID)
+ dateTime
+ '<span class="'
+ userClass
+ '"'
+ this.getChatListUserNameTitle(userID, userName, userRole, ip)
+ ' dir="'
+ this.baseDirection
+ '" onload="$.titleAlert('New Message');">'
+ userName
+ '</span>'
+ colon
+ this.replaceText(messageText)
+ '</div>';
return
When I use this, it breaks the page. If I replace ('New Message') with (New Message) the page loads again but the notification isn't working. I think this is because its displaying a Javascript function inside Javascript. Anyone see anything here I'm missing?

Have you tried escaping your quotes? I.e.:
+ '" onload="$.titleAlert(\'New Message\');">'
Any single quote (') inside a single quoted string (or double quote (") inside a double quoted string) needs a backslash (\) before it. See the MDN String Literals documentation for more information about strings and proper character escaping.

You need to escape the quotes.
Change this
'" onload="$.titleAlert('New Message');">'
to this
'" onload="$.titleAlert(\'New Message\');">'

Try escaping the apostraphe's correctly:
+ '" onload="$.titleAlert(\'New Message\');">'