We Keep Coding

How to have jquery add a panel inside a panel in Bootstrap v3

I am running through a loop, and appending text from an array into a main panel, but I want so that each "chunk" of text is inside it's own panel.
Here's the HTML:
<div class="panel no-overflow">
<p id="fromTweets"> imported text goes here</p>
</div>
My JQUERY:
for (i = 0; i < result.statuses.length; i++) {
//Print out username and status
$("#fromTweets").append('<b>' + "Username: " + '</b>' + result.statuses[i].user.screen_name + '<br/>');
$("#fromTweets").append('<b>' + "Tweet: " + '</b>' + result.statuses[i].text + '<br/>');
}
Also, I guess I'm more generally confused with using css and jquery with the "append" way. Notice how I'm bolding text using <b>, is this bad practice, is there a better way to do this? Same question for the <br> tag.

You are probably best to create a div to which you can append panels. For instance:
<div class="panel-holder">
You can then use the append to append not just text, but a div tag with the class 'panel'.
Here's a fiddle with a quick demonstration:
https://jsfiddle.net/oq2bfyam/1/

selecting a html link with a particular id and a html tag value

I have a HTML code snippet like this:
<div class="chartPeriodChangeOptions" id="id1">
D
W
</div>
<div class="chartPeriodChangeOptions" id="id2">
D
W
</div>
I am trying to add a class="active", to link with id="id1" and data-period="day".
With the following code, I am able to choose the one with particular data value
$("a[data-period='" + someMethod() + "']").addClass("active");
How can I add id selection part to this as well.

Try this:
$("#id1 > a[data-period='" + someMethod() + "']").addClass("active")

If you want this to be extensible use the 'starts with' selector:
$("div[id^='id'] > a[data-period='" + someMethod() + "']").addClass("active");
This will accept id="id1", id="id2", id="id3", ... etc

use this:
$(document).ready(function(){
$("#id1 a[data-period='" + someMethod() + "']").addClass("active");
});

append text with html formatting to textarea with jQuery

How could i append some text to html textarea with help of jQuery library, so, that html tag's are not as text, but as formatted html tag's (see result of div tagging, not text ). now i have such js:
...
var currentVal = $('#article_comment_text').val();
$('#article_comment_text').val(currentVal + '<div class="quote-heading">' + comment_author + " " + comment_date + '</div>' + '<div class="comment-quoted">' + comment_text + '</div>');
...
is it real? and how could i do, that text, which append to textarea is styled, not just views as text etc?

Edit:
You cannot render HTML inside textarea, you need to use contenteditable div:
<div class="textarea" contenteditable="true">This is a test</div>
Then you can do something like:
$('.textarea').html(function() {
return '<strong>' + $(this).html() + '</strong>';
});
Fiddle Demo

If i get your question right ?
So,
There is noway to insert HTML inside <textarea></textarea> so it isn't formated !
You have to make a clone of textarea,with a property of contenteditable;

Replace a <div> with another (in Jquery)

Currently i have this (in a function):
$('#Ligne' + Ligne_Doublons).remove(); //Remove the Div
$('#Panier').append('<div id=\'Ligne' + Ligne_Doublons + '\'><div class="ABC">' + Qte + '</div><div class="ABC">' + Nom + '</div></div>'); //Add de New Div
Example :
I have 3 div :
<div 1>
<div 2>
<div 3>
After the function who change the "div 2", the code make this:
<div 1>
<div 3>
<New div 2>
But i want this :
<div 1>
<New div 2>
<div 3>
Do you know how i can make this?
Thanks ;)

http://api.jquery.com/replaceWith/
$('#Ligne' + Ligne_Doublons)
.replaceWith('<div id=\'Ligne' + Ligne_Doublons + '\'><div class="ABC">' + Qte + '</div><div class="ABC">' + Nom + '</div></div>')

You need to use the after() method:
$('selector_to_div_1').after('div_2');

I think you need to replace div 2 with another one.
Let's say you have the following HTML code
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-3"></div>
Then the jQuery code should be as following:
$('element-2').replaceWith($('<div class="new-element-2"></div>');
Hope that helps.

If you want to preserve the contents and data/events attached to the contents then try
$('#d2').replaceWith(function(){
return $('<div />').append($(this).contents())
})
Demo: Fiddle

I think that the problem is you're removing a div, then trying to append a new div after the one you've just removed.
Therefore, if you append the new div to the old one, then remove the old one it should be in the right place.

Span doesn't get updated within div

Hello I'm trying to update div span text from ajax call, here is my html structure :
<div id="23" class="message product error">
<strong>
<br>
<strong>Unique id Id:</strong>
<span class="uniqueId" style="color: #000; font-weight: bold;">job_201208311928_78749</span>
<br>
<strong>Job Status:</strong>
<span class="status" style="color: #000; font-weight: bold;">IN PROGRESS</span>
</div>
I'm trying to update status IN PROGRESS to SHIPPED
But my jquery fails to do it :
function update (item){
$('#' + item.id + "span.status").text(item.CurrentStatus);
}
Item.id and item.CurrentStatus both have right values when I alert.

You need to include a space before your span:
function update (item){
$('#' + item.id + " span.status").text(item.CurrentStatus);
}

Gotta insert a space there.
$('#' + item.id + ' span.status').text(item.CurrentStatus);
Or to make it even clearer:
$('#' + item.id).find('span.status').text(item.CurrentStatus);

I believe that you need a space in your selector:
function update (item){
$('#' + item.id + " span.status").text(item.CurrentStatus);
}

I think you missed a space in selector
Try this
$('#' + item.id + " .status").text(item.CurrentStatus);

As already pointed out, you need to insert a space. This space indicates, that the <span> element with the class status is a descendant of the element with the given id.
Without the space, you're saying give me the element with the id <id>span (e.g. 23span) with the class status.
function update (item){
$('#' + item.id + " span.status").text(item.CurrentStatus);
}