Develop Reference

way to select a div class or id which is dynamically created by jquery

So in my website code, i use jquery to dynamically create div elements, which are basically clones of a template( written HTML in the page, and i am just cloning it depending on data from database). Below I will write the html code I am cloning
<div class="list">
div class="menu"> <button class="accordion">Room 1</button>
<div class="panel">
<div class="exhibits">Exhibit 1</div>
<button id="addnewBtn">Add new Exhibit BTN</button>
and the jquery code i use to clone it is this below
$(template).clone(true).appendTo('.list');
$('.accordion').last().attr('id','accordion'+array[i].id);
$('#accordion'+array[i].id).html("Room"+array[i].id);
so what jquery does, is that it clones the above HTMl code and appends it to class='list' then adds an id, so that i can distinguish each accordion menu, and changed its title. So when there are 4 rooms in my database, you will see Room 1, Room 2, Room 3, Room 4 on the site with ids accordion1,accordion2 etc
the ids are stored in a array, to be used in another function that loads the exhibits inside the rooms
My problem is that I need the website to present the user with some exhibits, based on the room selected. Those exhibits are to be placed in the div class='exhibits' , which is a 'grandchild' of accordion. But i cannot find a way to do that. I found that you can use something like $('#accordion1 #exhibits)(exhibits at the moment is a class, tried it both as a class and an id) and even add '.panel' between them ( a class between those 2 if you check the html) in order to add the data in the right section but the way i am trying to make it work, doesnt work. So below is the code I am currently trying to use to add exhibits to a specific room
$('#'+roomcounter[j+1]+' .exhibits').append(('<br>')+array[i].exhibitname+('<button id="addnewBtn">Add new Exhibit BTN</button></br>'));
where roomcounter[j+1] is the array which stores the id of the dynamically created accordion. So for example it would show 'accordion1'
But on the website, nothing shows up (all arrays, data stored and retrieved work. tested each one of them) So any ideas on that matter?

How to select specific span out of several dynamically generated by Handlebars?

My webpage shows data of several items - I use a handlebars loop (as seen below) to generate and populate the content and divs for each item. I don't have a static number of items, there could be roughly 0 to 50.
Inside each item is a button that, when pressed, starts a timer script that needs to change the text inside the item's div to count down the time using document.querySelector('#runTest'). The button passes the database ID of the 'agent' it's inside to allow the script to do the test.
How would I only change the text of the span of the 'agent' that the button was pressed inside? Could I use handlebars to change the span id?
{{#each agent}}
<div class="controls">
<button id="runTest" onclick="runTest('{{this.id}}')">Run Test</button> <br>
<span id="runTestTimer"></span><br>
</div>
{{/each}}

Deleting previous table when selecting a new table

<div id="dropdown" class="dropdown-content">
Table
</div>
In my program I have a button, where a user will select a table and then that table will be displayed. Currently, when a second selection is made, it just adds a table beneath the first table. I would like to just display the current selection. I have tried this:
<div id="dropdown" class="dropdown-content" syle="clear:both;">
Table
</div>
And it did nothing. I also tried using a clearfix to no avail. Any help would be greatly appreciated.

Using style="display:none" on the table you wish to hide will work.
You could create a function that can easily turn the visibility of just one table on and off depending on the button you click but without your Javascript, I can't really help you.
Feel free to tag me or message me back when you have put in the Javascript and I can try to help you right a function that will do it for you :)

1- Give every table an ID :
<table id="table1">..</table>
<table id="table2">..</table>
2- In the click handler of your button use the id to hide the table, let's say you want to hide table1
document.getElementById("table1").style.display = "none"
You can also use JQuery functions : hide()

You can either use JQuery function .empty() to delete the previously created table, or use .hide() [to hide the table] and .show() [if u ever need to display the table again].
But,if you post your script,it'll be easier to give a correction,instead of a different solution.

Sweetalert - Get div content and show it there as text

So I got an div called cart. JavaScript adds there div's each clicked item on page. So example: Website has Banana, Apple, Car. Then itemcart is empty, if person clicks on Banana then javascript adds <div class=banana>Banana</div>
Then you can click button Purchase which calls function purchase(). I want to add there that, if purchase() function called, then in that it will get content of that itemcart and get all items what are there and display them in sweetalert. Is that possible?
var itemcurt = $("#itemcart");
I tried that, but it just shows Object object..

$("#itemcart") is a object you want its inner content so you may use
var itemcurt = $("#itemcart").text();
.text() will give the inner content in text form even if there are some tags in it then also everything will come in text
For example
<div id="itemcart">
<div>text</div>
</div>
In above html if you use .text() then the div inside it will come in text form like this <div>text</div>
If in case you have html tags inside it and want in html form then use this
var itemcurt = $("#itemcart").html();

How to hide ag-grid if rowData is null?

I have a use case where the ag-grid (Angular Grid) I am using must not appear at all if the rowData is null that is returned from the Model code.
As of now I am unable to find a way to do it at the grid level.
What would be the right way to implement this? If hiding the div element is the way to do it, how does one doit in aright way from JavaScript?

If you want to hide the grid if no rows, then use an ng-if or an ng-show, pointing to the gridOptions.data.
<div ng-grid="gridOptions" ng-show="gridOptions.rowData.length>0"/>
or
<div ng-grid="gridOptions" ng-if="gridOptions.rowData.length>0"/>
If you use show, then the grid will stay there, but Angular will apply css to hide the element.
If you use if, then the grid directive will not be initialised by AngularJS until you have data present in rowData.