Develop Reference

How do I add dropdown menu to JavaScript template literal

I am trying to add a feature whereby when the user clicks on another user's name a dropdown menu appears with some options. The username is dynamically created using AJAX and template literals. The drop down menu appears to append when I check in dev tools but it doesn't physically appear in the UI. I'm not sure if I am going about it in the right manner. Here is my code:
`
[...]
<div class=card-text">
<p class="venue-text">${venueDescription}</p>
<h6 class="venue-source card-subtitle" id="${source}-adder" data-idtext="${source}-adder">-${source}</h6>
</div>
<div id="o"></div>
</div>
</div>
`);
venueCard.appendTo(myCol);
myCol.appendTo('#venueCard');
document.getElementById(source + "-adder").addEventListener('click', function(e) {
if (e.target && e.target.matches("h6.venue-source")) {
let sourceDropdown = document.getElementById('o');
let dropdown = $(`
<div class="dropdown">
<div class="user-options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></div>
<div id="${source}-dropdown" class="venue-card-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton">
<a id="share ${source}" data-idtext="share-${source}" class="dropdown-item" href="#">Share</a>
<a id="add ${source}" data-idtext="${source}" class="dropdown-item add" href="#">Add to List</a>
</div>
</div>
`)
console.log(`dropdown for ${source}`)
dropdown.appendTo(sourceDropdown)
};
});

Vue select style functionality on a boostrap dropdown

I've just started using Vue, (which seems really nice) and I've run into an issue.
I have a bootstrap4 dropdown that I'm using to populate a hidden form (clicking on a dropdown-item saves the data value to the form below).
This is only done as I can't style the normal select/option dropdown as I would like.
This was all working fine, until I tried implementing vue, as I'm not using a select component directly the solutions offered in the vue select documentation don't seem to work.
Any help would be much appreciated.
Thanks in advance
html
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle device-dropdown" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
All Devices
</button>
<div class="dropdown-menu" aria-labelledby="device-dropdown">
<a class="dropdown-item" href="#" data-value="all">All Devices</a>
<a class="dropdown-item" href="#" data-value="imac">iMac</a>
<a class="dropdown-item" href="#" data-value="macbook">MacBook</a>
<a class="dropdown-item" href="#" data-value="ipad">iPad</a>
<a class="dropdown-item" href="#" data-value="iphone">iPhone</a>
</div>
<select name="device" class="hidden-device-dropdown">
<option></option>
</select>
</div>
js
// copies the selected dropdown element into a hidden select in the form
$('.dropdown-menu').click(function (e) {
e.preventDefault();
// change button text to selected item
var selected = $(e.target);
$(".device-dropdown").text($(selected).text());
// change option value (inside select) to selected dropdown
var form = $("select.hidden-device-dropdown").children("option");
$(form).val(selected.data("value"));
});
Edit: looks like v-on:click="device = '...'" might get me the functionality I'm after, is this a good way of doing it? seems to be duplicating a lot of code

I would suggest a component.
Vue.component("bs-dropdown",{
props:["options", "value"],
template:`
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle"
:class="id"
ref="dropdown"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
{{selected.text}}
</button>
<div class="dropdown-menu" :aria-labelledby="id">
<a class="dropdown-item"
href="#"
v-for="option in options"
#click="selected = option">
{{option.text}}
</a>
</div>
</div>
`,
computed:{
selected:{
get() {return this.value},
set(v){this.$emit("input", v)}
},
id(){
return `dropdown-${this._uid}`
}
},
mounted(){
$(this.$refs.dropdown).dropdown()
}
})
This component wraps the bootstrap functionality, which is what you typically want to do when integrating with external libraries.
Use it like so:
<bs-dropdown :options="devices" v-model="selected"></bs-dropdown>
Here is a codepen demonstrating it in action.
If/when you need the value, instead of copying it to a hidden select, the value is a data property bound with v-model. You can use that however you like.

Bootstrap Collapse - close other on click

I am using Bootstrap/Collapse for these 3 buttons. You can see it live here - those 3 yellow buttons. When I click on the first button and then on the second button, I want to close the first div by clicking the second. Can you help me how can I do it?
here's some supporting code:
<a class="btn btn-primary btn-sm" data-toggle="collapse" href="#price" aria-expanded="false" aria-controls="price">Podle ceny</a>
<a class="btn btn-primary btn-sm" data-toggle="collapse" href="#manufacturers" aria-expanded="false" aria-controls="manufacturers">Podle značky</a>
<a class="btn btn-primary btn-sm" data-toggle="collapse" href="#13" aria-expanded="false" aria-controls="13">Podle velikosti</a>
<ul>
<li data-type="price" data-base-type="price" data-id="price" data-seo-name="price" data-inline-horizontal="0" data-display-live-filter="0" data-display-list-of-items="" class="mfilter-filter-item mfilter-price mfilter-price collapse" id="price">
...
</li>
<li data-type="checkbox" data-base-type="manufacturers" data-id="manufacturers" data-seo-name="manufacturers" data-inline-horizontal="0" data-display-live-filter="0" data-display-list-of-items="" class="mfilter-filter-item mfilter-checkbox mfilter-manufacturers collapse" id="manufacturers">
...
</li>
<li data-type="checkbox" data-base-type="option" data-id="13" data-seo-name="13o-velikost" data-inline-horizontal="0" data-display-live-filter="0" data-display-list-of-items="" class="mfilter-filter-item mfilter-checkbox mfilter-option mfilter-options collapse" id="13">
...
</li>
</ul>

One of the way to achieve the desired output would be by using jquery. I have implemented the similar feature by using script written here. You can run on your system and look for the effect.
`<script>` `src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js</script>`
`<script>
$(document).ready(function(){
$("#button1").click(function(){
$('#button1').html("<p>"+"hello"+"</p>");
})
$("#button2").click(function(){
$('#button2').html("<li>"+"hello"+"</li>");
$('p').hide();
})
$("#button3").click(function(){
$('#button3').html("<li>"+"hello"+"</li>");
$('#button2').find('li').hide();
})
})
</script>`
Attach three button with id button1 ,button2 and button3 inside body tag of html code .
Now to get the exact functionality replace the class name and id to achieve the exact feature.

Drop down menu selection ditactes what form will display

I'm currently working on a project that saves details of different types of objects to a database e.g. book, webpage and journal article. To save the different attributes of these objects I am trying to get different forms to display that depend on the selection in a drop down menu.
Here's the dropdown menu:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Select Reference Type...
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="book.php">Book</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="journal.php">Journal</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="webpage.php">Webpage</a></li>
</ul>
</div>
How to I get a different form to load on screen without redirecting to a different page. I've been trying to do this in php but I get the feeling that php isn't the right way of going about doing this. Also, apologies in advance as I have no previous experience in Javascript, AJAX or jQuery.

Okay, so without knowing the rest of your code, I would suggest that the best option would be to have the different forms in separate documents.
For example
HTML
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Select Reference Type...
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a onclick="bookinclude()" role="menuitem" tabindex="-1" href="book.php">Book</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="journal.php">Journal</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="webpage.php">Webpage</a></li>
</ul>
</div>
<div id="contentwrapper">
Some Initial Content Here
</div>
Javascript
function bookinclude(){
$("#contentwrapper").fadeOut(400);
setTimeout(function(){$("#contentwrapper").load("book.php").fadeIn();}, 400);
};
And remember to include Jquery!In the head of your HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Basically, on the click of the book link, it will load the book.php into the contentwrapper div.
I think this is what you want? All you need to do is replicate the function, and the link, but replace the book with journal, and with webpage.
Hope this helps!

you can also keep all the 3 forms on the same page and can hide or show them on the basis of the dropdown selection.
Lets say there are 3 forms:
1. book
2. webpage
3. journal
Create forms for all three in html, and by default keep all of them hidden(for that we will use a class "display-none"), after that detect change in the dropdown on basis of whom the form populates and do action as required. Please look at the following peace of code, it might help:
<style type="text/css">
.display-none {
display: none;
}
</style>
<select id="dropdown" onchange="myFunction()">
<option value="-1">-- Select --</option>
<option value="book">Book</option>
<option value="webpage">Webpage</option>
<option value="journal">Journal</option>
</select>
<form id="book" class="display-none" method="post" action="where-you-want-to-post/book">
<input type="submit" value="Submit Book" />
</form>
<form id="webpage" class="display-none" method="post" action="where-you-want-to-post/webpage">
<input type="submit" value="Submit Webpage" />
</form>
<form id="journal" class="display-none" method="post" action="where-you-want-to-post/journal">
<input type="submit" value="Submit Journal" />
</form>
<script type="text/javascript">
function myFunction() {
var allForms = document.getElementsByTagName('form');
var dropdown = document.getElementById("dropdown");
if (dropdown.value != "-1") {
var form = document.getElementById(dropdown.value);
for (var i = 0; i < allForms.length; i++) {
allForms[i].setAttribute("class", "display-none");
}
form.setAttribute("class", "");
}
}
</script>
Demo: http://jsfiddle.net/oynjj3jn/

In order to accomplish your goal, you would need the following
A menu in your HTML page like this one. Let's say that the values of the select-list will be your PHP files, just as it's shown below
<!-- HTML -->
<p>Select reference type...</p>
<!-- This is the menu -->
<select id="menu">
<option value="book.php">Book</option>
<option value="jurnal.php">Jurnal</option>
<option value="webpage.php">Webpage</option>
</select>
<!-- This is the container for your HTML content -->
<div id="content"></div>
You'll need this snippet to make AJAX requests to your server
// JavaScript
var s = document.getElementById('menu'); // reference to the <select> menu
var c = document.getElementById('content'); // reference to the content <div>
s.onchange = function(){ // hook the change event on <select>
xhr = new XMLHttpRequest();
var url = 'your-domain/' + this.value; // here we're passing the selected value
xhr.open("GET", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) { // wait for the response
c.innerHTML = xhr.responseText; // here it comes; populate the <div>
}
};
xhr.send();
};
And these are your PHP files on the server-side; they may contain any valid PHP / HTML code
// PHP
// book.php or jurnal.php or webpage.php
echo 'anything';

How to do a foreach binding using KnockoutJS in Bootstrap-themed dropdown

I'm developing a small notifications-like module, where the user can see his 5 latest activities that are logged in the DB (MSSQL). The values that I need are all there, but for some reason knockout binding is not working. Here are code snippets:
<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
<h3 style="border: none;">Recent activities:</h3>
<!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: layoutLogsModel.notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-book" style="color: orange;"></i>
Some text
</a>
<br>
Some text #2
</div>
</ul>
</div>
For now, I only want to display random text for every item that is in the observableArray.
ViewModel is the following:
var layoutLogsModel = {
notification: ko.observableArray()
};
function getLastFiveActivities() {
get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {
layoutLogsModel.notification(data);
});
}
And every time I call this function, the list is empty (IMAGE)
(the function is called on click, and absolutely no errors are shown in the console).
What is it that I am doing wrong?
EDIT:
The thing was, I forgot to execute ko.applyBindings for that viewModel. Then, I changed the HTML to look like this:
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-user" style="color: green;"></i>
<span data-bind="text: $data"></span>
</a>
</div>
</ul>
Aslo, I modified the get function slightly, like this:
function getLastFiveActivities() {
get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {
layoutLogsModel.notification(data.Notification);
});
}
(changed data to data.Notification based on the MVC model property that contains the array)
After all that, the data was available immediately.

try removing the layoutLogsModel from the foreach, you are already using it with the binding "with", so eveything in that div will be part of layoutLogsModel.
<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
<h3 style="border: none;">Recent activities:</h3>
<!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-book" style="color: orange;"></i>
Some text
</a>
<br>
Some text #2
</div>
</ul>
</div>