We Keep Coding

How to display message Using if-else condition in Vuejs?

<div class="dimension-section no-border-radius margin-top-2">
<div class="dimension-size"></div>
<div>
<ul>
<li v-on:click="display = !display" #click="getPartingCharges('5-10')" :class="{ active: isActiveClass, }" class="product-list">5-10 </li>
<li #click="getPartingCharges('10-22')" :class="{ active: isActiveClass,}" class="product-list">10-22 </li>
<li #click="getPartingCharges('22-27')" :class="{ active: isActiveClass, }" class="product-list">22-27</li>
</ul> <span v-if="display">charges will be applied</span>
</div>
</div>
I have 3 li tags, where i need to display message, on click of selected quantity like 5-10,10-22,22-27.
condition is like if user select (5-10) i need to display message like charges apply, Else need to display if user select (10-22)(22-27) need to display message like no charges apply. using if else coditions.

<span v-if="display">charges will be applied</span>
<span v-else>charges will not be applied</span>
I am not sure what you mean. but in vuejs you can use the if-else statement.
if I can check your code, I will give good answer.
and you should better for "display". this is master boolen value.

MDC Web: mdc-select update hidden input value on change (non-native select box) | JavaScript (JS)

Been doing well so far with MDC Web Components, but I've been hung up here for far too long. (Not strong in JS.)
mdc-select used to be non-native, then used native HTML select, and now once again it's non-native. For a while MDC Web supported a hidden input so that you could pass values to the server.
There's hardly any documentation - mostly just stuck users like me opening issues on GitHub:
Closed: MDC Select - no longer form input compatible #2221
Closed: [MDC Select] Example in README does send values to the web server #5295
Open: [MDCSelect] Add hidden input element to support HTML forms #5428
I need to set/update the value of a hidden input on MDCSelect change for multiple select boxes on the same page... I can get it to do it for ONE select box, but not multiple.
Here is the select box HTML:
<div class="mdc-select mdc-select--outlined region-select">
<div class="mdc-select__anchor demo-width-class">
<i class="mdc-select__dropdown-icon"></i>
<div id="demo-selected-text" class="mdc-select__selected-text" tabindex="0" aria-disabled="false" aria-expanded="false"></div>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch" style="">
<label id="outlined-label" class="mdc-floating-label" style="">Region</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
<ul class="mdc-list">
<li data-value="" disabled="" aria-selected="false" role="option" class="mdc-list-item" tabindex="0"></li>
<li data-value="north" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">North</li>
<li data-value="east" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">East</li>
<li data-value="south" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">South</li>
<li data-value="west" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">West</li>
</ul>
</div>
<!-- THIS IS THE HIDDEN INPUT THANK YOU -->
<input type="hidden" id="name2" name="input_name2" value="" class="my_mdc-select__value" />
</div>
I've tried targeting the hidden input with id, name, and even class. I think I need some sort of integrated function, forEach, or loop - tried adding JS beneath each select with no avail. I've worked the examples (seen below) from other users and no success. JavaScript isn't my thing, I know what it supposed to be happening but don't know the function or loop syntax etc to make this work.
I need to make sure each set/update targets the correct hidden input associated with that particular select box.
Here is my JS that works for ONE select box but not multiple:
// Select Menu
import {MDCSelect} from '#material/select';
const selectElements = [].slice.call(document.querySelectorAll('.mdc-select'));
selectElements.forEach((selectEl) => {
const select = new MDCSelect(selectEl);
select.listen('MDCSelect:change', (el) => {
const elText = el.target.querySelector(`[data-value="${select.value}"]`).innerText;
console.log(`Selected option at index ${select.selectedIndex} with value "${select.value}" with a label of ${elText}`);
// this works but only saves one
document.querySelector('input.my_mdc-select__value').value = select.value;
});
});
Here is some code that others used that I haven't been able to modify/apply (taken from links above):
From nikolov-tmw:
document.querySelectorAll( '[data-mdc-auto-init="MDCSelect"]' ).forEach( function( sel ) {
sel.My_MDCSelect__Value = sel.querySelector('input.my_mdc-select__value');
if ( null !== sel.My_MDCSelect__Value ) {
sel.addEventListener( 'MDCSelect:change', function( a ) {
if ( sel.MDCSelect ) {
sel.My_MDCSelect__Value.value = sel.MDCSelect.value;
}
} );
}
} );
From daniel-dm:
<div class="mdc-select">
...
</div>
<input id="pet-select" type="hidden" name="pets">
<script>
const input = document.querySelector('#pet-select');
const select = document.querySelector('.mdc-select');
select.addEventListener('MDCSelect:change', e => {
input.value = e.detail.value;
});
</script>
Please help! This particular issue has been open since January (people struggling long before) with no clear solution to help non-JS developers implement MDCSelect boxes. Thanks in advance!

The problem is here:
document.querySelector('input.my_mdc-select__value').value = select.value;
Document.querySelector will find the first matching element in the whole document, so in your loop you're always accessing the same input element.
Instead, you should run querySelector method on the parent element of each hidden input, which in your loop will look like:
selectEl.querySelector('input.my_mdc-select__value').value = select.value;

How to attach jQuery pop-up event to dynamically created HTML List

Aspiring developer and first time posting a question to StackOverflow.
Researched the topic but couldn't find an exact answer to my question.
Background:
Modifying this static shopping cart, to accept dynamically created list item.
https://tutorialzine.com/2014/04/responsive-shopping-cart-layout-twitter-bootstrap-3
Trying to insert a new item to the shopping cart via span tag, span tag information will be dynamically provided by another function.
For testing purpose I'm using a button to insert the new item to the shopping list.
The shopping cart has popover event to "Modify / Delete" individual items lists
Question: I can't figure out the exact JavaScript / jQuery command to attach the popover event. All static items in the list have the popover event automatically attached but the dynamically created items do not.
I tried using the addEventListener(); but the jQuery doesn't get attached properly.
My initial assumption was if the dynamically created list items had the same "class" as the static items that the popoever event would be automatically applied to them as well.
Tried these solutions but didn't work out for me, the popover event doesn't get attached properly.
a. Event binding on dynamically created elements?
Event binding on dynamically created elements?
b. Attach event to dynamically created chosen select using jQuery
Attach event to dynamically created chosen select using jQuery
c. Attaching events after DOM manipulation using JQuery ajax
Attaching events after DOM manipulation using JQuery ajax
Here's the HTML and JavaScript:
var qrcodelist = document.getElementById('qrdemo_list');
function myFunction() {
// HTML for testing when device is not connected: comment out when device is connected
var x = document.getElementsByClassName("decode-value-offline")[0].innerHTML;
// Qty and Price text values
var qty_text = 1;
var price_text = '$150';
// Create li
var entry_li = document.createElement('li');
entry_li.setAttribute("class", "row");
// Create quantity span
var qty_span = document.createElement('span');
qty_span.setAttribute("class", "quantity");
qty_span.appendChild(document.createTextNode(qty_text));
// Create price span
var price_span = document.createElement('span');
price_span.setAttribute("class", "price");
price_span.appendChild(document.createTextNode(price_text));
// Create pop btn span
var popbtn_span = document.createElement('span');
popbtn_span.setAttribute("class", "popbtn");
popbtn_span.setAttribute("data-original-title", "");
popbtn_span.setAttribute("title", "");
//popbtn_span.addEventListener( );
// Create a tag inside pop btn
var popbtn_a_span = document.createElement('a');
popbtn_a_span.setAttribute("class", "arrow");
popbtn_span.appendChild(popbtn_a_span);
// Create item span and text node
var item_span = document.createElement('span');
item_span.setAttribute("class", "itemName");
// Append span to li
entry_li.appendChild(qty_span);
entry_li.appendChild(item_span);
entry_li.appendChild(popbtn_span);
entry_li.appendChild(price_span);
// Create text node and insert qr-code result to li span
item_span.appendChild(document.createTextNode(x));
// Get list node and insert
var list_node = document.getElementById("qrdemo_list").lastChild;
// alert(list_node);
qrdemo_list.insertBefore(entry_li, qrdemo_list.childNodes[3]);
// Write x to console log
console.log(x);
}
// Popover JavaScript
$(function() {
var pop = $('.popbtn');
var row = $('.row:not(:first):not(:last)');
pop.popover({
trigger: 'manual',
html: true,
container: 'body',
placement: 'bottom',
animation: false,
content: function() {
return $('#popover').html();
}
});
pop.on('click', function(e) {
pop.popover('toggle');
pop.not(this).popover('hide');
});
$(window).on('resize', function() {
pop.popover('hide');
});
row.on('touchend', function(e) {
$(this).find('.popbtn').popover('toggle');
row.not(this).find('.popbtn').popover('hide');
return false;
});
});
<!-- Shopping Cart List HTML -->
<div class="col-md-7 col-sm-12 text-left">
<ul id="qrdemo_list">
<li class="row list-inline columnCaptions">
<span>QTY</span>
<span>ITEM</span>
<span>Price</span>
</li>
<li class="row">
<span class="quantity">1</span>
<span class="itemName">Birthday Cake</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$49.95</span>
</li>
<li class="row">
<span class="quantity">50</span>
<span class="itemName">Party Cups</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$5.00</span>
</li>
<li class="row">
<span class="quantity">20</span>
<span class="itemName">Beer kegs</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$919.99</span>
</li>
<li class="row">
<span class="quantity">18</span>
<span class="itemName">Pound of beef</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$269.45</span>
</li>
<li class="row">
<span class="quantity">1</span>
<span class="itemName">Bullet-proof vest</span>
<span class="popbtn" data-parent="#asd" data-toggle="collapse" data-target="#demo"><a class="arrow"></a></span>
<span class="price">$450.00</span>
</li>
<li class="row totals">
<span class="itemName">Total:</span>
<span class="price">$1694.43</span>
<span class="order"> <a class="text-center">ORDER</a></span>
</li>
<li class="row">
<!-- QR Code Images -->
<span class="itemName"><img src="img/AppleQRCode.png" width="100" height="100"></span>
<span class="price"><img src="img/OrangeQRCode.png" width="100" height="100"></span>
</li>
<li class="row">
<!-- device offline testing span -->
<span class="decode-value-offline">Unknown</span>
</li>
<li class="row totals">
<!-- Button to insert qr-code result to list -->
<span class="order"><a class="text-center" onclick="myFunction()">Insert</a></span>
<span class="itemName">Insert QR Code Result</span>
</li>
</ul>
</div>
<!-- Popover HTML -->
<!-- The popover content -->
<div id="popover" style="display: none">
<span class="glyphicon glyphicon-pencil"></span>
<span class="glyphicon glyphicon-remove"></span>
</div>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/customjs.js"></script>
Appreciate the great support in advance and please contact me if additional information is needed for clarification.

JSFiddle of Fix: https://jsfiddle.net/0phz61w7/
The issue is that you need to delegate the event. Please do the following:
Change:
pop.on('click', function(e) {
pop.popover('toggle');
pop.not(this).popover('hide');
});
To:
$(document).on('click', '.popbtn', function(e) {
pop.popover('toggle');
pop.not(this).popover('hide');
});
Also, you need to remove the } from line 54, just after console.log(x);. That is throwing an error.
The above modification works, but in the code provided, .popbtn is not visible because the node is empty. So in the jsfiddle provided, I added a CSS rule to include the text POPBTN. Click that and an alert I added to the click event fires.

You need to delegate jquery function to the HTML elements created dynamically like this:
Change your following line
var pop = $('.popbtn');
var row = $('.row:not(:first):not(:last)');
like given here:
var pop = $(document).find('.popbtn');
var row = $(document).find('.row:not(:first):not(:last)');

Multiselect dropdown in Angular js with xeditable

I am using an AngularJS template in my project. In that having so many controls like textbox, dropdown, datepicker etc.. I want to change the drodown to be multiselect.
I am using xeditable.js from the below ones
http://vitalets.github.io/angular-xeditable/
https://github.com/vitalets/angular-xeditable
See part of the templated html sample below
<div ng-controller="CriteriaCtrl" ng-cloak>
<div class="well editable-criteria span12" ng-show="hasKeys()">
<div class="criteria-loading" ng-show="criterialoading"></div>
<ul ng-hide="criterialoading">
<li ng-repeat="criteriaName in criteriaNames" class="{{criteriaName}}">
<div ng-switch on="criteria[criteriaName].type">
{{criteria[criteriaName].displayLabel}}:
<span ng-switch-when="text">
<a href="#" editable-text="criteria[criteriaName].currentValue"
onbeforesave="updatetext($data, criteria[criteriaName].name)"
onshow="hideOtherPopups(criteriaName)">
{{ criteria[criteriaName].currentDisplayValue || ' ' }}
</a>
</span>
<span ng-switch-when="dropdown">
<a href="#" editable-select="criteria[criteriaName].currentValue.currentValue"
e-ng-options="p.currentValue as p.currentValueLabel for p in possible[criteriaName]"
onshow="hideOtherPopups(criteriaName)"
onbeforesave="updatedropdown($data, criteriaName)">
{{criteria[criteriaName].currentValueLabel}}
</a>
</span>
<span ng-switch-when="date">
<a href="#" editable-bsdate=" criteria[criteriaName].currentValue"
e-datepicker-popup="dd-MMMM-yyyy" onshow="makedatepicker(criteriaName)"
onbeforesave="updatedate($data, criteria[criteriaName].name)"
class="editable-date">
{{ ( criteria[criteriaName].currentValue | date:"dd/MM/yyyy") || empty }}
</a>
</span>
</div>
</li>
</ul>
</div>
</div>
Part of the xeditable for dropdown
angular.module('xeditable').directive('editableSelect', ['editableDirectiveFactory',
function (editableDirectiveFactory) {
return editableDirectiveFactory({
directiveName: 'editableSelect',
inputTpl: '<select class="xx" multiple="multiple"></select>',
autosubmit: function () {debugger
var self = this;
self.inputEl.bind('change', function () {
self.scope.$apply(function () {
self.scope.$form.$submit();
});
});
}
});
}]);
Because of project complexity, I am not able to provide entire html and script code.
I just need some idea about how I can go further for multi-select dropdown option.
I am using xeditable.js the same way as in the link provided above. Multiple attributes modify the appearance of dropdown. I want something like need to select multiple items and separated by comma.
Can anyone provide the direction for implementing multi-select dropdown in AngularJS with xeditable?

Add in your xeditable.js
angular.module('xeditable').directive('editableMultiselect', ['editableDirectiveFactory',
function (editableDirectiveFactory) {
return editableDirectiveFactory({
directiveName: 'editableMultiselect',
inputTpl: '<select size="6" multiple></select>',
autosubmit: function () {
var self = this;
self.inputEl.bind('change', function () {
self.scope.$apply(function () {
self.scope.$form.$submit();
});
});
}
});
}]);
In your Form
<span editable-multiselect="user.name" e-name="name" e-ng-options="Status.ID as Status.name for Status in Users">
{{user.name || 'Not Set'}}
</span>

How do I pass back a specific variable of an ng-repeat?

I have an ng-repeat that repeats a dropdown. Each repeated div that holds the dropdown has a unique ID generated by the controller that I can reference.
How can I pass back the selected option for that specific dropdown? Right now, if one dropdown is selected, the value for selectedParameter.name changes for all dropdowns.
<div id="{{ mergeVar.name }}" class="alert {{ selectedParamClass }}" ng-repeat="mergeVar in mergeVars">
<b>merge value: </b> {{mergeVar.name}}
<div class="dropdown pull-right">
<button type="button" class="btn btn-sm btn-control dropdown-toggle" data-toggle="dropdown">
{{selectedParameter.name || 'Match the Paramater'}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="param in availableParams">
<a ng-click="selectParameter(parampass)">{{param.name}}</a>
</li>
</ul>
</div>
</div>
//controller.js
$scope.selectParameter = function(parampass) {
console.log('parameter selected')
$scope.selectedParameter = parampass
$scope.selectedParamClass = 'alert-success'
}

Do this instead to affect only one instance of your object:
$scope.selectParameter = function(parampass) {
console.log('parameter selected')
parampass.selectedParamClass = 'alert-success';
}
What you need is to add the property to the instance "row" object.
You can still store the selected object:
$scope.selectedParameter = parampass
But based on what I see in your code what you probably want do to is to use the ng-class="selectedParamClass" when an item is selected for the object selected.