We Keep Coding

How can I use jquery to append a div for me which also includes all of it's nested divs as well?

When a user creates a product, I want that product to be broadcasted to all other users and dynamically added to their screens. So far the broadcast aspect works amazingly.
But how can I dynamically add in this '.product' class, as well as all of a nested divs in an easy way? At the moment the only thing I can think of is copying and pasting all of it's divs in a jquery variable and adding it that way- there must be an easier way.
Here is where products are first loaded in when the page loads
<div class="product" id="{{$product->id}}">
<div class="product-image"><img src="/imgs/products/{{$product->type_id}}.png"></div>
<div class="product-content">
<div class="product-title" id="product-title">
{{ strtoupper(\App\ProductType::where('id', $product->type_id)->first()->name)}}
</div>
<div class="product-price">PRICE PER UNIT: <div class="price-value" id="price">{{$product->price}}</div> EXENS</div>
<br/>
QUANTITY: <div class="quantity-value" id="quantity">{{$product->quantity_available}}</div>
#if(strpos(\App\Group::where('id', $player->group_id)->first()->options, "\"showName\":true") !== false)
<br/>
SELLER: <div class="seller" id="seller">{{\App\User::where('id',$product->seller_id)->first()->name}}</div>
#endif
<br/>
PRICE: <div class="total-price" id="total-price">{{$product->price * $product->quantity_available}}</div>
<form class="buy-product-form" action="/UoE/buy-product/{{$product->id}}" method="POST">
{{csrf_field()}}
<button class="pull-right btn btn-primary">BUY NOW</button>
</form>
</div>
</div>
When the event is received the only way I can think of doing it as:
var productToAdd="<div class='buy-product-form'><div id='price'></div> " +
"" +
"" + //insert a massive string here containing all the other aforementioned sub-divs
"" + //And populate with json data
"" +
"</div>";
$('.content').append(productToAdd);

My solution was to take the entire code posted in the question and do make it as a one big HTML tag. That way my JS function can append the page with a HTML product div and it will already be bound with the necessary event listeners.

How to show only one ul at a time in angular using ngFor

I have the above image which has Add Person button, on click of Add person, Person 1 row gets created and so on. On the right end of each row, I have a share icon, on click of an icon, I wanted to open a ul element. The problem is the number of popups that gets displayed depends on the number of rows. If 5 rows are added, then 5 popups are displayed. Ideally, I need only one popup to be displayed, for Person 4 row it should be the popup with 33( basically the popup the is present for that particular row). I tried to add *ngIf = i> 1 condition, but the popup with 00 is only displayed every time which is not correct because the popup position will always be in parallel to Person 1 position.
<div>
<div *ngFor="let person of persons; let i = index">
<div>
<div class="userIcon">
<div>
<img class="person-img" src="assets/images/person.png" alt="My Profile">
</div>
<div>
<input id="form3" class="form-control" type="text">
<label for="form3" class="">{{person.name}}</label>
</div>
</div>
</div>
<div>
<div>
<input id="form5" class="form-control" #enteramount type="text">
<a class='dropdown-trigger sharebtn' href='#' data-target='dropdown{{i}}' (click)="shareIconClicked($event, i, enteramount)"></a>
{{i}}
<ul id='dropdown{{i}}' [ngClass]="{'popupShare': showPopup == true}" class='dropdown-content sharebtn-content'>
<li> {{i}}
Copy Message
</li>
<li>Whatsapp</li>
<li>Email</li>
</ul>
</div>
</div>
</div>
</div>
Below image represents the single popup after adding ngIf = 'isFirst'. I have clicked the Person 4 share icon. If I click the Person 3 share or Person 5 share icon, the popup is always positioned on the first row.

Just add check for first using *ngFor like this -
<div *ngFor="let person of persons; first as isFirst">
....
<ul id='dropdown{{i}}' *ngIf='first' [ngClass]="{'popupShare': showPopup == true}" class='dropdown-content sharebtn-content'>
...</ul>
</div>
For more in details refer official docs -
https://angular.io/api/common/NgForOf

You should try angular Mat-menu feature like this.
<div *ngFor="let person of persons; first as isFirst">
.... code
<button mat-button [matMenuTriggerFor]="menu">Share</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="sharteWithFacebook(person)">Facebook</button>
<button mat-menu-item (click)="shareWithWhatapp(person)">Whatsapp</button>
</mat-menu>
</div>

referencing jQuery created element, to register a click (with fiddle)

I'm working on a project which would require the user to be able to add, and edit tags.
On the page, is: a div container, containing the tags, a textbox (newTag) and a button (add tag) that will add a tag to the container. Another textbox (editTag) and a button (update tag) that will update the tag information typed in by the user. There is also a select list that will, in realtime - keep track of all the changes made.
Wen a user clicks on a tag that was already rendered, to edit it - all works well. The tag name goes into the edit textbox, and the tag is selected in the list.
The problem arises when a user created tag gets clicked... nothing happens. I have a feeling it has to do with the fact the object is in the DOM, but isn't rendered HTML. But I have no clue as to how to resolve this issue - how to reference a click of a dom object.
Here's my code:
HTML:
<!-- tags container -->
<div class="container_12">
<div class="grid_2"><img src="images/spacer.png" /></div>
<div id="content" class="grid_8">
<button name="PHP" class="tag-button">PHP</button>
<button name="CSS" class="tag-button">CSS</button>
</div>
<div class="grid_2"><img src="images/spacer.png" /></div>
</div>
<!-- tags container end -->
<!-- action buttons container -->
<div class="container_12 action-bar">
<div class="grid_4"><img src="images/spacer.png" /></div>
<div id="action-add">
<input type="text" name="newTag" id="newTag" />
<input type="button" id="add" value="Add tag" />
</div>
<div class="grid_4"><img src="images/spacer.png" /></div>
<div id="action-edit">
<input type="text" name="editTag" id="editTag" />
<input type="button" id="update" value="Update tag" />
</div>
<!-- action buttons container end -->
</div>
<!-- Real Time list container -->
<div class="container_12">
<div class="grid_4"><img src="images/spacer.png" /></div>
<select id="insertString">
<option value="0">PHP</option>
<option value="1">CSS</option>
</select>
</div>
<!-- real time list container end -->
jQuery:
//button add click
$('#add').click(function() {
//creating a new tag for the tag bar
var tag = $('#newTag').val();
var tagHTML=$('<button name= "' + tag + '" class="tag-button">'+ tag + '</button>');
var qString = "";
// adding the tag to the bar
$("#content").append(tagHTML);
//get last value in the list
var lastValue = $('#insertString option:last-child').val();
if (! lastValue) {lastValue = 0;}
else {lastValue = ++ lastValue; }
//add new option for the new tag
$('<option value="' + lastValue + '">' + tag + '</option>').appendTo("#insertString")
})
//tag button click
$(".tag-button").click(function(){
var name = $(this).attr('name');
//add the tag name to the editTag textbox
$('#editTag').val(name);
$('#insertString option:contains("'+ name + '")').attr('selected', true);
});
Also, here's my fiddle:
http://jsfiddle.net/Lm3ab/
Help would be appreciate, and thank you for your time.

You need to use Event Delegation. You have to use .on() using delegated-events approach.
Use
$("#content").on("click", ".tag-button", function() {
DEMO

just add another click, thus
$("#content").on("click", ".tag-button", function(){});
http://jsfiddle.net/Lm3ab/1/

Event delegation, since these tags weren't on the page at the time of the click events being binded, they have no listeners. Bind the click event to the container and target the elements:
$("#content").on("click", ".tag-button", function() {

Making div contents persistant

I have an interesting problem, which I would like some help with if possible.
I have the following segments of HTML:
<div id="main_">
<ul class="unstyled">
<ui:repeat var="adultPassenger" varStatus="adult" value="#{bean.adultPassengers}">
<li>
<div id="adult#{adult.index}" class="hitbox_">
<div id="passengerTitle">Adult #{passengerDetailsBean.getPassengerCount(adult.index)}</div>
</div>
<div class="hide">
<div id="adult#{adult.index}_form">
<div>
<div>
<div class="pull-left" style="width: 50%;">
<div><h:inputText value="#{adultPassenger.firstName}" class="pasFirstName_adult#{adult.index}" label="First Name"></h:inputText></div>
</div>
<div class="button-container">
<h:commandButton value="Continue" styleClass="btn btn-warning btn-large btn-block" onclick="handleDetailsClick('adult#{adult.index}')"></h:commandButton>
</div>
</div>
</div>
</div>
</div>
</li>
</ui:repeat>
</ul>
</div>
and
<div id="secondary_" class="hide">
<table>
<tbody>
<tr>
<td">
<h:commandButton id="secondaryBack" value="Back" styleClass="btn btn-warning">
</h:commandButton>
</td>
<td class="secondaryTitle">
<h3 class="page-title orange-title-big">Passenger Details</h3>
</td>
</tr>
</tbody>
</table>
<div id="secondaryContents">
</div>
</div>
They're both on the same page, and when the one div is visible the other is invisible. Thing is. Here's the JS I'm currently using:
$(".hitbox_").click(function() {
var round = Math.round;
var id = $(this).attr("id");
window.alert(id);
var f = $("pasFirstName_"+id).get();
console.log("name " + f.value);
// set contents of secondary div
var passengerDetails = $("#" + id + "_form").html();
$("#secondaryContents").html(passengerDetails);
$("#main_").toggleClass("hide");
$("#secondary_").toggleClass("hide");
});
function handleDetailsClick(index) {
var passengerDetails = $("#" + index + "_form").html();
$("#secondaryContents").html(passengerDetails);
$("#main_").toggleClass("hide");
$("#secondary_").toggleClass("hide");
}
What I want(and have tried, unsuccessfully, to achieve):
When the first div is clicked, it is hidden and the second div is shown after being populated with the hidden form in the first div. I do this to preserve class names etc, since there could be more than one such form.
When "Continue" is clicked, the second div is hidden, and it's contents passed back to the first div - I do this to preserve the details that were entered on the form.
My problem is that the details don't persist. When the same div is clicked again after having filled in the form before, it should should the form with the details that were previously entered.
This is where something goes wrong because there are never details in the form.
Does anyone know what I could be doing wrong?

The problem is in the following lines
var passengerDetails = $("#" + id + "_form").html();
$("#secondaryContents").html(passengerDetails);
Here, you are taking HTML of one div and adding it to another. While this will surely create the same html in target div, it will not retain any user entered values as well as any events bound on elements.
You should, instead, take the element and append it to target
var passengerDetails = $("#" + id + "_form").children();
$("#secondaryContents").append(passengerDetails);

Toggling the background image of div on click using Javascript

Hi there I am trying to use Javascript to toggle the background image of a div when clicked
This is what I have done to try and achieve this:
My code is as follows
HTML:
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" id="Accordion1Title" onselectstart="return false;" onclick="changeArrow(1);" >
Instructions
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<p>Enter in your search parameters by clicking on the title of... </p>
</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle" id="Accordion2Title" onselectstart="return false;" onclick="changeArrow(2);" >
Colour
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
[wpv-control field="cultivar-category" type="checkboxes" values="Dark Red" url_param="cultivar-category"]
</div>
</div>
</div>
Javascript:
function changeArrow(index)
{
var arrowID = "Accordian" + index + "Title";
document.getElementById(arrowID).style.background="url(./img/accordian-title-up.png) no-repeat scroll 0 0 transparent";
}
However nothing happens when I click on a div that contains onclick="runAccordion(index);"
What am I missing here?

runAccordion is maybe overriding or blocking changeArrow, depending on the structure of your HTML. Try combining them in the same onclick listener (runAccordion(1);changeArrow(1);) and see what happens there.
Also, if you've fixed this, check your image path.
EDIT
You have a typo:
var arrowID = "Accordian" + index + "Title";
should be:
var arrowID = "Accordion" + index + "Title";