We Keep Coding

How to custom dropdown with js inside loop?

I'm making a forum web site(html+Vue3+php+sql), and there have a post system.
Mostly, when we need to custom dropdown object, it always needs to initial the fake dropdown object with js. (or have the other way that IDK)
for example, I'm using the css framework「Tocas-UI」,and I got the some html objects below:
<div class="ts floating dropdown icon button">
<i class="vertical ellipsis icon"></i>
<div class="menu">
<div class="item">Add</div>
<div class="item">Edit</div>
<div class="item">Share</div>
</div>
</div>
And <div class="ts floating dropdown icon button">...</div> can be used js ts('.ts.dropdown:not(.basic)').dropdown(); to make it be a "dropdown" object.
Although it can only be used once to initial every object which have class .ts.dropdown, but I'm using the js framework Vue3, and when I using v-for to render every post (have one fake dropdown object in every post), it's not working on the object which are be created after I call the function .dropdown().
So I was tried to put ts('.ts.dropdown:not(.basic)').dropdown(); into loop, it stupid and also not working.
Here is the code in the v-for loop:
<template v-for="post in posts">
<div class="item">
<div class="ts mini circular image">
<img src="default.png">
</div>
<div class="content">
<div class="header">{{ post.poster.nickname || post.poster.username }}</div>
<div class="middoted meta">
<a>#{{ post.poster.username }}</a>
<div>{{ Init.timeToStatus(post.datetime) }}</div>
</div>
</div>
<div class="actions">
<div class="ts separated secondary icon buttons">
<div class="ts floating dropdown icon button">
<i class="vertical ellipsis icon"></i>
<div class="menu">
<div class="item">Add</div>
<div class="item">Edit</div>
<div class="item">Share</div>
</div>
</div>
</div>
</div>
</div>
</template>
So the question is... How can I make those fake dropdown object be initial with ts('.ts.dropdown:not(.basic)').dropdown(); even have new post be added after page loaded.

How to make x-data and x-show work inside nested div using alpine js

I have very little JavaScript experience and no vue or react experience, so understanding these answers is proving to be futile. >.<
I found these 2 solutions
Alpine nested x-data
https://github.com/alpinejs/alpine/issues/49
This is the issue I am encountering.
I got the x-data and x-show to work for the collapse sidebar button.
When I added another x-data element in a child div that houses the content, it seems to break everything and nothing works.
Both the sidebar div, and content div are inside the parent div that controls the collapse button.
This is how the layout looks like
This is the code of how it is somewhat layed out
// Div that houses main content and sidebar
<div x-data="{sidebarActive: true}">
// Sidebar button
<div #click="sidebarActive =!sidebarActive"> collapse icon </div>
// kanban content
<div x-data ="{kanbanToggle: 2}">
// toggle buttons
<div>
<div #click="kanbanToggle: 1"> button 1 </div>
<div #click="kanbanToggle: 2"> button 2 </div>
<div #click="kanbanToggle: 3"> button 3 </div>
</div>
// kanban board content
<div>
<div x-show ="kanbanToggle ===1"> timeline view </div>
<div x-show ="kanbanToggle ===2"> card view </div>
<div x-show ="kanbanToggle ===3"> list view </div>
</div>
</div>
<div x-show="{sidebarActive:true}"> sidebar content </div>
</div>
Any help much appreciated! Thanks in advance!

The initial issue I can see with your code is that kanbanToggle: 1 is not valid JavaScript, the correct synax is kanbanToggle = 1.
So replace:
<div #click="kanbanToggle: 1"> button 1 </div>
<div #click="kanbanToggle: 2"> button 2 </div>
<div #click="kanbanToggle: 3"> button 3 </div>
with
<div #click="kanbanToggle = 1"> button 1 </div>
<div #click="kanbanToggle = 2"> button 2 </div>
<div #click="kanbanToggle = 3"> button 3 </div>

Display the same piece of javascript script in bootstrap columns that are col-sm6

I have a javascript script with a function called fuctionone() that displays a graph. I call this script below in a p tag so when 'HERE' is clicked the graph is displayed below each header.
<svg width="480" height="250">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-block">
<h3 class="card-title">Example one</h3>
<p> HERE </p>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-block">
<h3 class="card-title">Example two</h3>
<p> HERE </p>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</svg>
However I want to display the same graph in each column but when I click the HERE link above only one graph is displayed under Example one when I want two graphs displayed for each.
One under Example one and one under Example two.
Is the <svg> tag messing this up somehow?

functionOne has no idea where it's being called from if I had to guess. Next time I'd recommend posting your javascript for clarity. Pass the element to your javascript function, then manipulate the DOM.
functionOne(this)

how to use div to layout page

I am using div to layout a page. The page has two columns. The first column is a map. The second column contains three rows of graphs. I used the code below. The result gives me just one column (instead of two) with four rows. What am I doing wrong?
<!-- This is where the map will live -->
<div id="map-container" style="width:1000px; height:500px"></div>
<!-- CHARTS!!! -->
<div class="row">
<!-- row chart -->
<div class="col-md-1">
<div id="rowchart2" class="dc-chart"></div>
<center><div class="title">Severity</div></center>
</div>
<!-- Histogram-->
<div class="col-md-2 col-md-offset-1">
<div id="rowchart" class="dc-chart"></div>
<center><div class="title">Histogram(Delta Speed)</div></center>
</div>
<!-- row chart -->
<div class="col-md-4 col-md-offset-0">
<div id="rowchart3" class="dc-chart"></div>
<center><div class="title">Direction</div></center>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="col-md-6">
Column 1:
<div id="map-container" class="col-md-12" style="width:100%; height:500px"></div>
</div>
<div class="col-md-6">
OTHER DATA HERE
</div>
</div>
</div>

Assuming you're using Bootstrap here, you need to layout your two columns within a single row so that they will sit side by side. For example, if you want to have two columns that are equal widths, you could use:
<div class="row">
<div class="col-md-6">
<!-- Map Here -->
</div>
<div class=col-md-6">
<div>Chart 1</div>
<div>Chart 2</div>
<div>Chart 3</div>
</div>
</div>
There are always 12 columns in a row, so using "col-md-6" for each column results in two equally sized columns.
Within the second column, you could nest more rows and columns to give you more control:
<div class="row">
<div class="col-md-6">
<!-- Map Here -->
</div>
<div class=col-md-6">
<div class="row">
<div class="col-md-12">Big Chart 1</div>
</div>
<div class="row">
<div class="col-md-6">Small Chart 2</div>
<div class="col-md-6">Small Chart 3</div>
</div>
</div>
</div>
For an example layout, here's a JSFiddle: http://jsfiddle.net/q3vdex96/2/
In your example, you're setting the map to have a width of 1000px. You shouldn't set an explicit width in this way - let Bootstrap handle the sizing using its grid system. Bootstrap's responsive CSS means your charts and map will collapse into a single column on a small screen, and will automatically expand into the correct layout as the screen size increases.

You aren't showing your CSS so part of what I say is just a wild guess.
First, the center element is obsolete. Don't use that.
Second, div elements are block level and will extend the entire width of the page by default. This is why you only get one column but, as I said, without a link or a jsfiddle with the complete markup, it's all a guess.

Bootstrap 3 Collapse events not triggering

I am creating a menu for mobile devices and am trying to use Bootstrap 3's collapse feature.
I already have a collapse working on a different page, so I copied over the structure, gave the panel group a different id, and changed the 'data-parent's and 'panel-collapse' ids appropriately. However, this new accordion just does not work. The 'in' class does not get applied to the target .panel-collapse div, and the hrefs (ex: #navCollapse(x) ) are appearing in the address bar, instead of the normal functionality.
Here is the problematic code. (trimmed to 2 panels for brevity. Still not working as is)
<div class='panel-group' id='accordionNav' >
<div class='panel'>
<div class='panel-heading'>
<a data-parent='#accordionNav' data-toggle='collapse' href="#navCollapse1"> <h3>About</h3></a>
</div>
<div class='panel-collapse collapse in' id='navCollapse1'>
<div class='panel-body'>
<p>Test test ets ejkfbduskfgsalf jydasl</p>
</div>
</div>
</div>
<div class='panel'>
<div class='panel-heading'>
<a data-parent='#accordionNav' data-toggle='collapse' href="#navCollapse2"><h3>Donors</h3></a>
</div>
<div class='panel-collapse collapse' id='navCollapse2'>
<div class='panel-body'>
<p>Test test ets ejkfbduskfgsalf jydasl</p>
</div>
</div>
</div>
</div>