We Keep Coding

Javascript way to create multiple HTML containers?

I've been following this tutorial: http://mariechatfield.com/tutorials/firebase/step5.html
But I wanted to spice it up and instead of printing the last database object, I want to print all of them.
I've tried printing off the database, which works fine. I just need to edit the Html. I tried using a line break, but nothing either. It keeps appending to the starting string instead of making a new line/container.
recommendations.limitToLast(10).on('child_added', function(childSnapshot) {
// Get the recommendation data from the most recent snapshot of data
// added to the recommendations list in Firebase
recommendation = childSnapshot.val();
console.log(recommendation);
// Update the HTML to display the recommendation text
$("#title").append(recommendation.title)
$("#presenter").append(recommendation.presenter)
$("#link").append(recommendation.link)
var x = '\n';
x;
// Make the link actually work and direct to the URL provided
$("#link").attr("href", recommendation.link)
});
I hope to be able to have an individual container for each database element.

Per request, posting comment as answer:
Great job! The only change you have to make is to change \n to <br>. HTML removes whitespace (like your newline). So to replicate that line break you have to use the HTML BR element. Then you'll need to append that to your existing HTML of-course.

Prevent user from pasting line break

I'm currently having an issue with a code. In my code, I've got a textarea where the user can enter the title of an article and I would like this article to be only in one row. That's why I wrote a script to prevent users to press the return key. But they could bypass this security, indeed if they copy/past the line break they could enter a line break. So, is there a way to detect line break ? I suppose we can do this with regular expressions and with \n or \n. However I tried this:
var enteredText = $('textarea[name="titleIdea"]').val();
var match = /\r|\n/.exec(enteredText);
if (match) {
alert('working');
}
and it doesn't work for an unknown reason. I think the var enteredText = $('textarea[name="titleIdea"]').val(); doesn't work because when I try to alert() it, it shows nothing. But something strange is that when I do an alert on $('textarea[name="titleIdea"]').val(); and not on the enteredText variable it shows the content.
Have a great day. (sorry for mistakes, I'm french)

if they copy/past the line break they could enter a line break
That's why you shouldn't even worry about preventing them from entering it - just don't save it. Remove it on the blur and input events if you really want to, but the only time it actually matters is before you save it to the database (or whatever you are using).
$('textarea[name="titleIdea"]').on('blur input', function() {
$(this).val($(this).val().replace(/(\r\n|\n|\r)/gm,""));
});
And, as other people have already mentioned, if they can't do line breaks, you shouldn't be using a textarea.

I assume your problem is with the paste event.
If i guessed this is my snippet:
$(function () {
$('textarea[name="titleIdea"]').on('paste', function(e) {
var data;
if (window.clipboardData) { // for IE
data = window.clipboardData.getData('Text');
} else {
data = e.originalEvent.clipboardData.getData('Text');
}
var match = /\r|\n/.exec(data);
if (match) {
alert('working');
console.log(data);
}
})
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<textarea name="titleIdea">
</textarea>

This needs to be handled in the backend. Even if you use the recommended appropriate HTML input type of text (instead of textarea), you still do not remove the possibility of return chars getting saved.
The two other answers use Javascript - which technically is the domain of this question. However, this can not be solved with Javascript! This assumes that the input will always come from the form you created with the JS function working perfectly.
The only way to avoid specific characters being inserted into your database is to parse and clean the data in the backend language prior to inserting into your database.
For example, if you are using PHP, you could run a similar regex that stripped out the \n\r chars before it went into processing.
Javascript only helps the UX in this case (the user sees what they will be saving). But the only way to ensure you have data integrity is to validate it on the server side.

Convert mail merge variable to sting with quotes in Javascript

I'm working in a proprietary system that has the ability to add HTML and Javascript to create custom pages. The system has the ability to insert user profile fields into the HTML/Javascript a mail merge like tag. In a project I'm working on I'm using a value from one of the users fields (User_Region) to append to a URL and create a personalized link to another system for each user.
I have been able to append the URL successfully when the value is numeric (12345) but not when it is text or alphanumeric. For example neither "Florida" nor "123456a" work.
Here's the code that I am using:
<script>
(function() {
var originalURL = "https://www.mywebsite.com/index.php";
var userRegion = {User_Region};
document.write("NewURL = " + originalURL + "?id=" + userRegion);
})();
</script>
In the code {User_Region} is the mail merge tag that I use to insert the variable from the user profile field. If the region variable is numeric like 123456 it works perfectly and it will output a URl like this:
https://www.mywebsite.com/index.php?id=123456
However if the region variable is text or alphanumeric like Florida or 123456a then the script does not work. Document.write does not output anything. It seems like the function either stops or breaks. I'm guessing this has to do with a data type issue, but I can't seem to figure it out.
If I hard code the variable as a string like this the function works perfectly.
<script>
(function() {
var originalURL = "https://www.mywebsite.com/index.php";
var userRegion = 'Florida';
document.write("NewURL = " + originalURL + "?id=" + userRegion);
})();
</script>
The above code will output a correct URL like this:
https://www.mywebsite.com/index.php?id=Florida
I have tried numerous ways to add the single-quote marks to the {User_Region} variable without success.
Does anyone have a suggestion for how I can make this work?
Thanks in advance for your assistance!

Have you tried encapsulating it in quotes as such:
var userRegion = '{User_Region}';
Because I guess your framework just replaces the {User_Region} with something else, please inform me if I got it wrong. I didn't quite get what this tag is. You see, in JS, curly braces are used to define Objects.

Javascript detect variable as Hyperlink and display it as a Link

I have a variable in javascript returned by AJAX which may contain a simple string or a href code like EXAMPLE. I have to detect whether it is a link or simple string and display accordingly.
i.e. if it is a link then a hyperLink is to be displayed with text as EXAMPLE or if it is a simple string then it has to be displayed as it is.
I can able to do it in angular using
<span ng-bind-html-unsafe="name_of_variable">
How can I do it in javascript code with javascript variable?

If the variable data contains the response from AJAX, do:
document.getElementById('where_to_put_it').innerHTML = data;
If data looks like a hyperlink, the HTML will be parsed and it will be clickable. If it's plain text, it will just be put into the document that way.
Maybe something like this is what you're looking for with your calendar plugin:
var match = data.match(/<a\s+href=['"](.*?)['"]\s*>(.*?)<\/a>/i);
if (match) {
event = { title: match[2],
url: match[1]
};
} else {
event = { title: data };
}

U need to check the string of data contains url , i believe think below url will help u out.. Check if a Javascript string is a url Regular Expression to find URLs in block of Text (Javascript) How to find if a text contains url string

How to edit what is inside a textarea using code in the url?

I'm not sure what the terminology is - but what I would like to do is this:
Using PHP, I would create a dynamic link for users to click that would indicate where they clicked it from. (I know how to do this)
I just don't know what the URL needs to look like to change the contents of a textarea on the target page.
So something like: http://website.com?document.getElementByName'your-message'.innerHTML='test'
Except clearly this doesn't work. Should I instead just put a variable in the URL (I don't know how to do that either) and have the javacript on the actual target page change the textarea content?
Basically I just need it to put one line of text in it. "I came from page x" I'm also willing to change the textarea to an input field if that makes things easier.

That's called a Query String website.com?variable1=value1&variable2=value2&...
Here's an example with just plain ole Javascript: http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx
Also see: How can I get query string values in JavaScript?

You can format your url like this:
www.example.com/?name=john%20blah&age=27&something=meh
then you can parse out the parameters with javascript
var parameterArray = location.search.slice(1).split("&");
var parameterObject = {};
for(i in parameters) {
parameterObject[parameters[i].split("=")[0]] = parameters[i].split("=")[1]
}
then you can populate the fields with the data
nameTxtBox.value = parameterObject.name;