We Keep Coding

Note taking feature, line break and no content

I'm building the feature to take notes on my web app. I'm running into two problems:
I can't figure out how to recognize line breaks. I can hardcore text with line breaks, but when user clicks Edit it shows on the text the <br> and if he saves it just shows <br> in plain text.
Also if the user deletes all the text and clicks save it doesn't work and just prints <textarea>.
Any help is greatly appreciated!
$('#edit').click(function() {
$('#edit').hide();
$('#note').each(function() {
var content = $(this).html();
$(this).html('<textarea style="width:inherit">' + content + '</textarea>');
});
$('#save').show();
});
$('#save').click(function() {
$('#save').hide();
$('textarea').each(function() {
var content = $(this).val(); //.replace(/\n/g,"<br>");
$(this).html(content);
$(this).contents().unwrap();
});
$('#edit').show();
});
#note {
word-wrap: break-word;
max-width: 40rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<h5 class="card-tittle">Note</h5>
<hr>
<div class="container index">
<div class="row">
<div class="jumbotron col-md-12" id="note">
Test Text.
</div>
<div class="col-md-12">
<button class="btn btn-primary" id="edit"><span class="glyphicon glyphicon-edit"></span>Edit</button>
<button class="btn btn-primary" id="save"><span class="glyphicon glyphicon-save"></span>Save</button>
</div>
</div>
</div>
</div>

I think you want to do something like this...
$('#edit').click(function() {
$('#edit').hide();
$('#note').each(function() {
var content = $(this).html().replace(/<br>/g,"\n");
$(this).html('<textarea style="width:inherit">' + content + '</textarea>');
});
$('#save').show();
});
$('#save').click(function() {
$('#save').hide();
$('textarea').each(function() {
var content = $(this).val().replace(/\n/g,"<br>"); //.replace(/\n/g,"<br>");
$(this).html("");
$(this).append(content);
$(this).contents().unwrap();
});
$('#edit').show();
});
Demo: https://www.codeply.com/go/hAL9pWWUFk

Filter users by data-attribute Jquery

I am trying to filter users by its data attribute , I have main div called user-append which contains users that I get from ajax get request , there can be 3 users or 100 users, its dynamical , this is my div with one user for the moment
<div id="user-append">
<div class="fc-event draggable-user" data-profesion="'+user.profesion+'" id="user_'+user.id+'" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
<div class="row" style="justify-content: center;">
<div class="col-xs-3 avatar-col">
<div class="innerAvatarUserLeft">
<img src="'+getUserImage(user.avatar)+'" width="100%" style="margin: 0 auto;">
</div>
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText">'+user.fullName+'</p>
<p class="usr_Gender dataText">Male</p>
<div style="position: relative">
<li class="availableUnavailable"></li>
<li class="usr_profesion dataText">AVAILABLE</li>
</div>
<p class="user_id" style="float:right;margin: 3px">'+user.employee_id+'</p>
</div>
</div>
</div>
</div>
</div>
as you can see I have data-profesion attribute from which I am trying to filter users depend on the profession that they have , I get the ajax request like this
$.ajax({
url: "/rest/users",
success: function (users) {
var options = [];
$user = $("#append_users");
$.each(users, function (i, user) {
options.push({
'profession': user.prof.Profession,
'gender': user.prof.Gender
});
userArr.push({
'id': user.id,
'firstName': user.prof.FirstName,
'lastName': user.prof.LastName,
'fullName': user.prof.FirstName + ' ' + user.profile.LastName,
'email': user.email,
'avatar': user.prof.Photo,
'profesion': user.prof.Profession
});
$('#filterByProfession').html('');
$('#filterByGender').html(''); // FIRST CLEAR IT
$.each(options, function (k, v) {
if (v.profession !== null) {
$('#filterByProfession').append('<option>' + v.profession + '</option>');
}
if (v.gender !== null) {
$('#filterByGender').append('<option>' + v.gender + '</option>');
}
});
});
});
and now I am trying to filter the users by its data-profesion, on change of my select option which I populate from the ajax get request , It should show only the users that contain that data-profesion value , something like this
$('#filterByProfession').change(function () {
var filterVal = $(this).val();
var userProfVal = $(".fc-event").attr("data-profesion");
if (filterVal !== userProfVal) {
}
});

You can use a CSS selector to find those users, and then hide them:
$('#filterByProfession').change(function () {
// first hide ALL users
$('.draggable-user').hide()
// then filter out the ones with the correct profession:
// (you need to escape the used quote)
.filter('[data-profesion="' + $(this).val().replace(/"/g, '\\"') + '"]')
// ... and show those
.show();
});

You're trying to get the userProfVal throughout a className selector which can return more than one element.
var userProfVal = $(".fc-event").attr("data-profesion");
^
Use the jQuery function .data() to get data attributes.
Look at this code snippet using the .each to loop over all elements returned by this selector .fc-event:
$('#filterByProfession').change(function() {
var filterVal = $(this).val();
$(".fc-event").hide().each(function() {
if ($(this).data("profesion") === filterVal) {
$(this).show();
}
});
});
Example with static data
$('#filterByProfession').change(function() {
var filterVal = $(this).val();
$(".fc-event").hide().each(function() {
if ($(this).data("profesion") === filterVal) {
$(this).show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='filterByProfession'>
<option>-----</option>
<option>Developer</option>
<option>Cloud computing</option>
</select>
<div id="user-append">
<div class="fc-event draggable-user" data-profesion="Developer" id="user_1" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="1" id="user_1_value" class="userId">
<div class="row" style="justify-content: center;">
<div class="col-xs-3 avatar-col">
<div class="innerAvatarUserLeft">
<img src="'+getUserImage(user.avatar)+'" style="margin: 0 auto;">
</div>
</div>
<div class="col-xs-9 data-col">
Developer
<p class="fullName dataText">Ele</p>
<p class="usr_Gender dataText">Male</p>
<div style="position: relative">
<li class="availableUnavailable"></li>
<li class="usr_profesion dataText">AVAILABLE</li>
</div>
<p class="user_id" style="float:right;margin: 3px">11</p>
</div>
</div>
</div>
</div>
</div>
<div id="user-append">
<div class="fc-event draggable-user" data-profesion="Cloud computing" id="user_2" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="2" id="user_2_value" class="userId">
<div class="row" style="justify-content: center;">
<div class="col-xs-3 avatar-col">
<div class="innerAvatarUserLeft">
<img src="'+getUserImage(user.avatar)+'" style="margin: 0 auto;">
</div>
</div>
<div class="col-xs-9 data-col">
Cloud computing
<p class="fullName dataText">Enri</p>
<p class="usr_Gender dataText">Male</p>
<div style="position: relative">
<li class="availableUnavailable"></li>
<li class="usr_profesion dataText">AVAILABLE</li>
</div>
<p class="user_id" style="float:right;margin: 3px">11</p>
</div>
</div>
</div>
</div>
</div>
See? the sections are being hidden according to the selected option.

Try using this
$(".fc-event[data-profesion='" + filterVal + "']").show();
$(".fc-event[data-profesion!='" + filterVal + "']").hide();

How to copy and paste all the html of the clicked element into a textarea?

At the moment I am doing this:
var $items = $('<div class="grid-item col-xs-12 col-md-6"><img class="img-responsive" src="' + item.link + '"></div>');
$(".grid-item").on("click", function(){
var $imageSelected = $(this).html();
alert($imageSelected);
$('#usp-custom-4').append($imageSelected);
});
But that alert gives me only the img element
<img class="img-responsive" src="...
And it is not adding the html to the textarea anyway.
UPDATE
jsFiddle working with first answer now using outerHTML yet not pasting into the textarea

Problems:
The function .html() will return inner HTML, you need to use outerHTML property using .prop().
remove # from id attribute in HTML
use .val() method to set the value of textarea element
code
$(".grid-item").on("click", function() {
var $imageSelected = $(this).prop('outerHTML');
$('#usp-custom-4').val(function(_, currentValue) {
return currentValue + $imageSelected
});
});
$(".grid-item").on("click", function() {
var $imageSelected = $(this).prop('outerHTML');
$('#usp-custom-4').val(function(_, currentValue) {
return currentValue + $imageSelected
});
});
.grid-item {
width: 100px;
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="grid-item">
<span>1</span>
</div>
<div class="grid-item">
<span>2</span>
</div>
<div class="grid-item">
<span>3</span>
</div>
<div class="grid-item">
<span>4</span>
</div>
<div class="grid-item">
<span>5</span>
</div>
<div class="grid-item">
<span>6</span>
</div>
<textarea id="usp-custom-4"></textarea>

Toggle multiple divs one at a time with 1 button using Jquery

I have four divs which i want to toggle one at a time with a single button. I want to toggle them one after the other and not randomly. I have tried something like below.
$(document).ready(function() {
$('#toggle').click(function() {
$('#1').hide();
});
$('#toggle').click(function() {
$('#2').hide();
});
$('#toggle').click(function() {
$('#3').hide();
});
$('#toggle').click(function() {
$('#4').hide();
});
});
.divs {
border: 1px solid;
height: 30px;
}
<div id='1' class='divs'></div>
<div id='2' class='divs'></div>
<div id='3' class='divs'></div>
<div id='4' class='divs'></div>
<button id='toggle'>
toggle
</button>

Save the state on each click.
$(document).ready(function() {
var state = 1;
$('#toggle').click(function() {
if(state==1){
$('#1').hide();
state=2;
}
else if(state==2){
$('#2').hide();
state=3;
}
else if(state==3){
$('#3').hide();
state=4;
}
else if(state==4){
$('#4').hide();
state=1; //back to state
}
});

$(document).ready(function() {
$('#toggle').click(function() {
$('.divs:visible:first').hide();
});
});

Try this one
var count = 1;
$(document).ready(function () {
$('#toggle').click(function(){
$('.divs').show();
if(count == 4)
count = 1;
$('#' + count).hide();
count++;
});
});

First of all, keeping numeric ids is not good, so considering you will change them after wards, I am writing both the answers with numeric ids and without numeric ids.
With Numeric Ids, it is easy to do.
Suppose you have button to toggle the other four divs then it would look like this:
var state = 1;
$("#toggleButton").click(function(){
$("#"+state++).slideToggle();
if(state===5){state=1;}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id='1' >1</div>
<div id='2' >2</div>
<div id='3' >3</div>
<div id='4' >4</div>
<button id="toggleButton">
toggle
</button>
Now coming to the non numeric ids.
var state = 1;
$("#toggleButton").click(function(){
$("#div"+state++).slideToggle();
if(state===5){state=1;}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id='div1' >1</div>
<div id='div2' >2</div>
<div id='div3' >3</div>
<div id='div4' >4</div>
<button id="toggleButton">
toggle
</button>
FYI:In my opinion you should not use numeric ids.
Further adding more in to the code.
If you don't know how many div would be there but you are having a clear cut rule that the div's follow the sequence whether or not they are having numeric/non numeric ids then you can change the code slightly to incorporate that as well like this.
var state = 1;//first button id to be toggled
var total = 4;//this will be the total number of divs to be handled by the button
$("#toggleButton").click(function(){
$("#"+state++).slideToggle();
if(state===(total+1)){state=1;}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id='1' >1</div>
<div id='2' >2</div>
<div id='3' >3</div>
<div id='4' >4</div>
<button id="toggleButton">
toggle
</button>
Happy coding.

Use class instead of Id for using many times
var i = 1;
$('#toggle').click(function(){
$('.divs').show();
$('#' + i).hide();
i++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1' class='divs'>dsgsdg</div>
<div id='2' class='divs'>64636</div>
<div id='3' class='divs'>46y</div>
<div id='4' class='divs'>4373477</div>
<button id='toggle'>
toggle
</button>

loop through each element and use toggle. This gives the effect that you desire.
$('button').click(function(){
$('.divs').filter(function(index,item){
$(item).toggle('slow')
})
})
Have a look at this demo -
https://jsfiddle.net/ukw5wcmt/

var i = 1;
$('#toggle').click(function(){
$('.divs').show();
$('#' + i).hide();
if(i==4)
{
i=1;
}else{
i++;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1' class='divs'>dsgsdg</div>
<div id='2' class='divs'>64636</div>
<div id='3' class='divs'>46y</div>
<div id='4' class='divs'>4373477</div>
<button id='toggle'>
toggle
</button>
Try this

.hide{ display: none; }
$(document).ready(function(){
$(".click-btn").click(function(){
var fid = $(".hide:first").prop("id");
$("#"+fid).removeClass("hide");
});
$(".remove-tag").click(function(){
$(this).parent().addClass("hide");
});
});
<div id="cart-1" class="hide">
<div class="remove-tag">x</div>
<h5>1</h5>
</div>
<div id="cart-2" class="hide">
<div class="remove-tag">x</div>
<h5>2</h5>
</div>
<div id="cart-3" class="hide">
<div class="remove-tag">x</div>
<h5>3</h5>
</div>
<div id="cart-4" class="hide">
<div class="remove-tag">x</div>
<h5>4</h5>
</div>
<div id="cart-5" class="hide">
<div class="remove-tag">x</div>
<h5>5</h5>
</div>
<button class="click-btn">click</button>

How to add values on existing parameter using Jquery?

I have a jquery code that is almost complete. I want the new values of the existing parameter to be added on the <a href> using jquery but my code only adds the value at the end of the href.
Sample case:
My parameters in the href are food-option AND talent-option.:
<a href="food-option=0&talent-option=0">
Then I have new values to be added for food option.
values: 123,456
My href should be like this:
<a href="food-option=0,123,456&talent-option=0">
This is my code that adds the value:
$(this).closest(".option-container").find("a.food-form-select-food").each(function () {
var _href = $(this).attr("href");
$(this).attr("href", _href + ',' + addnid);
});
But the result is like this:
<a href="food-option=0&talent-option=0,123,456">
Which is wrong.
Here is a JSfiddle/Demo of my work
Can somebody please help me?
Thank you very much in advance!

You are almost there.
Try this:
$(this).closest(".option-container").
find("a.food-form-select-food").each(function () {
var _href = $(this).attr("href").split("&");
_href[0] += ',' + addnid;
$(this).attr("href", _href.join("&"));
});

i think your looking for something like this:
$(this).closest(".option-container").find("a.food-form-select-food").each(function () {
var _href = $(this).attr("href");
var n = str.indexOf(",");
var output = _href.substr(0, position) + addnid + _href.substr(position);
});
and if you want more answers look at this:
Inserting string at position x of another string

try this, JSFIDDLE
$(document).ready(function () {
$(".select-addon").click(function () {
var addtitle = $(this).closest('.optionlist').find('.option-title').html();
var addnid = $(this).closest('.optionlist').find('.option-nid').html();
var html = '<li class="option-list">' + addtitle + '<div class="addnid2">' + addnid + '</div><span class="remove-addons"> Remove</span></li>';
$(this).closest(".option-container").find('#your-addons').append(html);
$(this).closest(".option-container").find("a.food-form-select-food").each(function () {
var _href = $(this).attr("href");
var splited = _href.split('&');
$(this).attr("href", splited[0] + ',' + addnid+'&'+splited[1]);
});
});
$(document).on('click', '.remove-addons', function () {
var addnid2 = $(this).closest('.option-list').find('.addnid2').html();
$(this).closest(".option-container").find("a.food-form-select-food").each(function () {
var href = $(this).attr('href');
$(this).attr('href', href.replace("," + addnid2, ""));
});
$(this).closest('li').remove()
});
});
.option-nid {
display: none;
}
.addnid2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="option-container" style="width:200px; float:left">
<div class="optionlist">
<div class="option-title">Food Set A</div>
<span class="select-addon">SELECT </span>
<div class="option-nid">132</div>
</div>
<div class="optionlist">
<div class="option-title">Food Set B</div>
<span class="select-addon">SELECT </span>
<div class="option-nid">133</div>
</div>
<div class="optionlist">
<div class="option-title">Food Set C</div>
<span class="select-addon">SELECT </span>
<div class="option-nid">134</div>
</div>
<br/>
<br/>
<br/>
<ol id="your-addons"></ol>
LINK
</div>
<div class="option-container col-md-6">
<div class="optionlist">
<div class="option-title">Food Set A</div>
<span class="select-addon">SELECT </span>
<div class="option-nid">132</div>
</div>
<div class="optionlist">
<div class="option-title">Food Set B</div>
<span class="select-addon">SELECT </span>
<div class="option-nid">133</div>
</div>
<div class="optionlist">
<div class="option-title">Food Set C</div>
<span class="select-addon">SELECT </span>
<div class="option-nid">134</div>
</div>
<br/>
<br/>
<br/>
<ol id="your-addons"></ol>
LINK
</div>