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

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}}

Related

Strange results from document.getSelection

I am working on an application that keeps track of edits in a contenteditable section of an HTML page. When something is inserted, this content is wrapped inside a span with class inserted. So far, so good. But I need to keep track of where the text cursor is inside the contenteditable area (which might have multiple spans inside).
Here is a small section of html that I am using to test my code (only the relevant portion of the page is shown here):
<p id="p1">
<span id="p1s1">This manual is about</span>
<span id="p1s2" class="inserted"> product X</span>
<span id="p1s3" class="deleted"> something</span><span id="p1s4">.</span>
</p>
When I click right after the word 'product' the result is as expected: the anchorNode is identical to the focusNode and shows the ID 'p1s2' with an offset 8. Clicking after the p of product shows offset 2. But clicking in front of the 'p' gives me an offset of 1 but an ID 'p1' - which is the parent of the node in which I clicked.
I tested this with the latest versions of Chrome and Safari and both browsers show the same result. Is this intended behaviour and why do I not get the ID of the span if I clearly click inside its content ?

With AMP HTML, is it possible to get ID or other properties from clicked element, append them and create URL for an anchor tag?

I have a set of check input. Each one contains a unique ID. On checking box (on click) I want to get this ID and create a string of type '/some/path/?myids=checkOne,checkTwo (where checkOne and checkTwo are IDs of two different check input that have been clicked.
I understand that I can use state management - but my issue is: how can I limit how many checkboxes to create custom string for? For example, I want to have a limit of 5 comma separated IDs. Since AMP logic is limited I am not sure how to do complex logic with it.
Here are the steps:
show set of checkboxes.
user can click any of these checkboxes
as user clicks on a checkbox, an achor tag href=... needs to be updated by appending the substring ?myids=checkOne.
if user clicks on another checkbox then the href tag needs to be updated to this: ?myids=checkOne,checkTwo and so on until at the most 5 checkboxes are clicked.
Is this at all possible? Thanks
Documentation is not very clear on how to approx complex logic and not much found on searching.
One option is to use amp-selector and then limit the number of selected items when binding using .slice():
<amp-state id="selected">
<script type="application/json">[]</script>
</amp-state>
<amp-selector layout="container" multiple on="select:AMP.setState({selected: event.selectedOptions})">
<div option="1">First</div>
<div option="2">Second</div>
<div option="3">Third</div>
</amp-selector>
<div hidden [hidden]="selected.length < 3">You can only select two options.</div>
Click me
This limits the number of selected IDs to two and displays a warning if the user selected all three.

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?

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();

Angular display images when field set to 1

I have an angular app in this plunker
In the app.js I have a JavaScript array named $scope.degrees. This variable has fields like
{DegreeID:"1",DegreeCategoryID:"1",Degree:"Accounting AAS ",DegreeTypeID:"2",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""}
When the + next to the My academic course is clicked, it opens a new panel to get a list of courses to select from. Here when we click 'Academic' it shows a new panel with all its children and similarly even for the 'Applied Sciences'. When you click on one of the elements of the list, it gives another list with its subcategories.
I would like to know how to display images when we have fields like BHC,CVC, etc that are set to "1". ie. I have png files for the field named BHC, CVC etc.. and i want to display those images when their respective values are "1" (few fields are also "", in this case I do not want to display them).
You can use ng-show to archive this:
<!-- when $scope.degrees.BHC is truthy (element is visible) -->
<div ng-show="degrees.BHC">
<img src="your_image" />
</div>
Angular will treat "0" as false.

Categories

Resources