Develop Reference

Add new boostrap 4 card dynamicly

I would know in js how to add dynamicly a new card. The code below allow to remove a card but not to add new.
I started something like that, but I am blocked.
The html code example
The card
<div class="container">
<div class="row">
<button type="button" class="btn btn-primary" aria-label="Insert" onClick="addAnother()" id="insert">
<span aria-hidden="true">Insert</span>
</button>
</div>
<div class="row">
<ul class="row list-unstyled" id="list">
<li class="col-md-4" id="element1">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title <a class="close" href="#">×</a></h4>
<p class="card-text">Some example text. Some example text.</p>
Card link
Another link
</div>
</div>
</li>
<li class="col-md-4" id="element2">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title <a class="close" href="#">×</a></h4>
<p class="card-text">Some example text. Some example text.</p>
Card link
Another link
</div>
</div>
</li>
<li class="col-md-4" id="element1">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title <a class="close" href="#">×</a></h4>
<p class="card-text">Some example text. Some example text.</p>
Card link
Another link
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
the script>
Remove a card
<script type="text/javascript">
$('.close').click(function(){
var $target = $(this).parents('li');
$target.hide('slow', function(){ $target.remove(); });
})
</script>
Add a card ==> this is element is not correct must be included the card code I think
<script>
addAnother = function() {
var ul = document.getElementById("list");
var li = document.createElement("li");
var children = ul.children.length + 1
li.setAttribute("id", "element"+children)
li.appendChild(document.createTextNode("Element "+children));
ul.appendChild(li)
}
</script>

You could attach a click event using the id #insert, as you have with the close action, rather than referencing a function inline.
$('#insert').click(function(){
$( "ul#list" ).append( "<li>any html here</li>" );
});

Clone one span into another for each group of div

I have many sets of div and I'm trying to copy the content of a specific span into another one and repeat the same operation for all my divs.
Here is my html code:
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>
And my jQuery code is:
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere').clone(true, true).contents().appendTo('span.ContentGoesHere');
});
It almost works, right now what I get in my span.ContentGoesHere is: This is my content 1This is my content 2This is my content 3 - and it's the same content for all but the content needs to be specific to each div.item.
Thank you for your help.

Try The code below
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere')
.clone(true,true).contents()
.appendTo($(this).find('span.ContentGoesHere'));
});
To See The demo in jsFiddle
Click here to see Demo In JsFiddle

Try the code bellow.
$("div.item").each(function(i) {
var content = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(content);
});

If you type your function like this:
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
Then the end result will looks like this:
This is my content 1
This is my content 1
This is my content 2
This is my content 2
This is my content 3
This is my content 3
See snippet for the working code.
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>

See it working
Your way
$("div.item").each(function(i) {
var targetElement = $(this).find('span.ContentGoesHere');
var sourceHtml = $(this).find('span.ContentComesFromHere').clone().contents()
sourceHtml.appendTo(targetElement);
});
Simpler way
$("div.item").each(function(i) {
var contents = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(contents);
});
In your case you need find the source and target both by $(this).find()

Just replace to .appendTo($(this).find('span.ContentGoesHere')); into your JS code and I hope it will be work.

Angular.js multiple TextArea

repeat in my code
<div class="feed-element"ng-repeat="message in messages">
<a href="" class="pull-left">
<img alt="image" class="img-circle" src="{{message.src}}"onerror="this.src='https://cdn2.iconfinder.com/data/icons/transparent-round-icons/512/user.png';">
</a>
<div class="media-body ">
<small class="pull-right"></small>
<strong> {{message.User}} <br>
<small class="text-muted">{{message.Date}}</small>
<div class="well">
{{message.Question}}
</div>
<div class="pull-right">
<div class="well"style="display:{{message.isAnswered}}">{{message.Answer}}</div>
<div class="social-comment"style="display:{{message.isAnswered2}}">
<div class="media-body">
<textarea class="form-control" placeholder="Cevap Yazın..."></textarea>
</div>
</div><br>
<a class="btn btn-xs btn-primary"style="display:{{message.isAnswered2}};width:150px;" ng-click="answer(message.Id)"><i class="fa fa-pencil"></i> Mesaj Gönder</a>
</div>
</div>
</div>
In This code , every message has textarea and a button and every message is unique to any user so when I click one button I want to get text of that's item textarea only, But I couldn't do it how can I do it?
Thanks

Replace your textarea as below ,
yourtextareavalue should be your key name to bind values
<textarea class="form-control" ng-model="message.yourTextAreaValue"
placeholder="Cevap Yazın..."></textarea>

Getting clicked button values jquery

I am trying to find clicked button value.here is my htmlcode,I am not able to get but always getting first one.
<div id="addSentiment" class="dialogs">
<div id="1" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> ki#n.com
</div>
<div id="cat_1" class="text">category : Scheduling
<br>
</div>
<div id="op_1" class="text">ddd word/phrase : providing solutions
<br>
</div>
<div id="feature_1" class="text">ddd word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="1" name="hd">
</div>
<div class="tools"> <a id="edit_1" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="2" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tc#n.com
</div>
<div id="cat_2" class="text">category : Scheduling
<br>
</div>
<div id="op_2" class="text">dddd : providing solutions
<br>
</div>
<div id="feature_2" class="text">ddddddde : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="2" name="hd">
</div>
<div class="tools"> <a id="edit_2" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="3" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tn#nn.com
</div>
<div id="cat_3" class="text">category : Scheduling
<br>
</div>
<div id="op_3" class="text">Opinion word/phrase : providing solutions
<br>
</div>
<div id="feature_3" class="text">Feature word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="3" name="hd">
</div>
<div class="tools"> <a id="edit_3" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
</div>
I tried following code in jquery
$(".dialogs .itemdiv .tools").live("click",function(e){
e.preventDefault();
alert('clicked on edit');
var n = $('.dialogs .itemdiv .tools a').attr('id');
alert(n);
});
I use live here because I am getting above html by using append method in jquery.

live is deprecated in later versions of jQuery - but to solve your issue you need to use an instance of this
$("#addSentiment").on("click", ".dialogs .itemdiv .tools", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});

jQuery selectors catch the first match of their content.
To catch the n-th match, you need to use the n-th child selector, like this:
$(".dialogs .itemdiv .tools:nth-child(2)")

I am not familiar with the live method, but you should be able to do something like the following:
function addHandlers() {
$(".dialogs .itemdiv .tools a").each(function() {
$(this).click(function() {
alert('clicked on edit');
);
});
}
function yourAppendFunction() {
//your append code
//add call to a function that will create your event handlers
addHandlers();
}
The .each method runs through each and every item that fits the selection criteria, and then we use the this keyword within the function to reference what we are working on. Putting it in a function that we don't call until after you append the items ensures the html exists when you try to add the handlers you need.
API references:
each method: http://api.jquery.com/each/
click method: http://api.jquery.com/click/

Using font-awesome in a code

I have the following code in my JSP file
<div class="row-fluid">
<div style="text-align: left;" class="span3 row-fluid">
<label><spring:message code="alert.channels.outbound.lines"></spring:message>: </label>
</div>
<div class = "span3">
<div class="textbox">
<div class="textVal">${alertStatusForm.outboundLines}</div>
<div class="pencil span3 ">
<img src="/static/img/pencil.png" alt="Edit">
</div>
<div class="save span3">
<img src="/static/img/disk.png" alt="Save">
</div>
<div class="close span3">
<img src="/static/img/Cross.png" alt="Close">
</div>
</div>
</div>
</div>
Now I have to use the font-awesome in place of pencil.png , disk.png and Cross.png .
I have the following codes for the above pencil , disk and Cross as
Pencil =  icon-pencil ()
disk = icon-save ()
Cross = icon-remove ()
from the website http://fortawesome.github.io/Font-Awesome/cheatsheet/
Please let me know how to use the above codes in place of

You can write like this by change to <i> tag instead of <img>
<div class="row-fluid">
<div style="text-align: left;" class="span3 row-fluid">
<label><spring:message code="alert.channels.outbound.lines"></spring:message>: </label>
</div>
<div class = "span3">
<div class="textbox">
<div class="textVal">${alertStatusForm.outboundLines}</div>
<div class="pencil span3 ">
<i class="icon-edit"></i>
</div>
<div class="save span3">
<i class= "icon-save"></i>
</div>
<div class="close span3">
<i class= "icon-folder-close"></i>
</div>
</div>
</div>
</div>
Besure that you have link with font awsome css or
add this link in your layout or views
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

You need to change the <IMG> tags with the following:
<i class="icon-pencil"></i>
Setting appropriate class on the <i> element.