We Keep Coding

How to retrieve shopping cart items, implementing LocalStorage

How do I retrieve information stored in a js file? I assume I am labelling my node elements in HTML incorrectly
I'm hoping to gain a better understanding of how to retrieve a function node from localStorage
Below are the key factors I am trying to get using getElementById into local storage from post HTML.
This is not everything in my listing.html document, I have excluded everything but what I think are essential elements
<div class="listing">
<div class="container-form">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img class="img" value(src)="1" id="img" src="images/4.JPG" alt="img1">
</div>
<div class="infoBox">
<h5 post="weight" id="weight" value="7.00">7.00 : Under - 16 oz</h5>
</div>
<div class="column-bottom">
<div class="add-button">
<div class="add-button" method="post">
<p><input type="submit" onclick="addListing()" class="btn"></input></p>
<div class="buy-button">
<span class="price" post="price" id="price" value="60">$60</span>
<button type="button" class="btn" onclick="window.location.href='cart.html'" onclick="addListing()"
;>BuyMe</button>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to use the function below to store each element from the post HTML
function addlisting() {
let listing = ['listings'];
if (localStorage.getItem('listings')) {
listing = JSON.stringify(localStorage.getItem('listings'));
alert("added!");
}
listing.push({ 'listingId': listingId + 1, image: '<imageLink>' });
listingsId = listingsId + 1;
var listingsName = document.getElementById('name').innerHTML;
var listingsPrice = document.getElementById('price').getAttribute('data- value');
var listingsImage = document.getElementById("img").src;
var listingsWeight = document.getElementById('weight').getAttribute('data- value');
value = parseFloat(listingsPrice, listingsWeight).toFixed(2);
localStorage.getItem('name', 'price', 'img', 'weight', JSON.stringify(listingsName, listingPrice, listingsImage, listingsWeight));
}
here is the $(document).ready(function(){ function I'm hoping to implement into my code, I got this from another Stack Overflow page as it was the most fitting however I am yet to understand each component.
$(document).ready(function () {
$('#Btn').load(function () {
let listings = [];
if (localStorage.getItem('listings')) {
listings = JSON.parse(localStorage.setItem('listings'));
}
listings.push({ 'listingId': 1, image: '<imageLink>' });
});
});
my question again is how do I then execute this function using onload Onto a separate HTML, called cart.html. I did not display my cart.html file because there is nothing pertaining to this question on it. And furthermore how to go about styling Onload events that retrieve information from localStorage.
P.S.
There is an alert function within my first .js excerpt addListing(), that does not fire when clicked. probably a sign of bad programming. I've just never found a straightforward answer

How to set default session and dropdown values in meteor?

I have a collection which store default values according to the logged in user. I have a setting menu where default can be set for the application by the user. How can we set the dropdown of that setting menu to the default value set previously by user every time and how can we set the default session value. I'm using semantic UI and isron router, I'm trying to get the default values from the collection in .onRendered(), but the output will be Values:
Template.header.onRendered (function(){
var defaultSettingValues=defaultSetting.find().fetch()
console.log ("Values: "+defaultSettingValues);
});
The dropdown in settng menu:
<div class="ui selection dropdown button" id="defaultDrop" tabindex="0">
<input type="hidden" name="filter">
<div class="default text">Select from here</div>
<i class="right floated dropdown icon"></i>
<div class="menu" tabindex="-1">
<div class="item" data-value="objId1">abc</div>
<div class="item" data-value="objId2">def</div>
<div class="item" data-value="objId3">hij</div>
</div>
</div>
I'm trying to get the default setting values from collections and then set the session and set the default dropdown.
How can i solve this? or is there any alternate way in which i can achieve this?

Ok so you can set default value of your dropdown with the following code :
Template.header.onRendered (function(){
// Care because it returns an array, and you just need the default value
var defaultSettingValues=defaultSetting.find().fetch();
// Supposing the defaultSettingValues is equals to 'objId1'
$('#defaultDrop').dropdown('set selected', defaultSettingValues);
});
You need to find a way to get your value from what's returning your collection.

I think you should be using helpers in order to achieve this in a good way.
In the Html template
<template name="The_template">
<div class="ui selection dropdown button" id="defaultDrop" tabindex="0">
<input type="hidden" name="filter">
<div class="default text">Select from here</div>
<i class="right floated dropdown icon"></i>
<div class="menu" tabindex="-1">
{{#each option in options}}
<div class="item" data-value="objId1">{{option.someData}}</div>
{{/each}}
</div>
</div>
</template>
Then in the javascript template
Template.The_template.helpers({
options() {
return Collection.find();
}
})

Get html button/drop down text from c# code

I am wondering how I can grab the text from my HTML button/dropdown menu in c#? With the asp.net dropdownlist I was able to do string text = dropdownlist.Value; But it doesnt seem to be as simple, or maybe it is, with a different type of dropdown. I couldnt use the asp drop down list because it didnt act as a button and a drop down menu. The functions below are for changing the text from the default "Advanced" to the selected item text by the user. After the user changes the buttons text, I want to grab that text and use it as a condition for a sqlbuild.where clause. Also the text of the updated button should remain after the search button is clicked. With the asp drop down list the value remained after the refresh but for some reason when I search when the updated drop down menu, the change is wiped after selecting submit
Something like this is what i had in mind to do:
// get advancedsearch value
string selectedTxt = AdvancedSearch.value;
//filter on selected value
if (selectedTxt == "item1")
{
sqlbuilder.where = ("input1#");
}
else if (selectedTxt == "item2")
{
sqlbuild.where = ("input2#");
etc
// container for button/dropdown menu
<div class="container">
<div class="row buffer">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
<div class="input-group" role="group" >
<div class="input-group-btn" role="group">
<asp:Button runat="server" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" OnClientClick="AdvancedSubmit();" style="background-color:#718CA1;color:#FFF;" Text="Advanced:" />
<ul class="dropdown-menu" runat="server" id="dropdown" style="background-color:#718CA1;color:#FFF;">
<li><a class="dropdown-item" href="#" data-value="asset">item1</a></li>
<li><a class="dropdown-item" href="#" data-value="building">item2</a></li>
<li><a class="dropdown-item" href="#" data-value="astmgrbems">item3</a></li>
</ul>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<div class="input-group" role="group">
<input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" />
</div>
</div>
</div>
</div>
EDIT - Realize I forgot to add functions if that helps
function AdvancedSubmit() {
var obj = document.getElementById('<%=InquiryInput2.ClientID%>');
if (obj.style.display == 'none') {
obj.style.display = 'block';
}
};
$(function () {
$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
/* $(".btn btn-secondary").html(selText);*/
alert(selText);
document.getElementById('<%=AdvancedSearch.ClientID%>').value = selText;
})
});

Just add an ASP hidden field. Then in the javascript set that field's value as well as the button's value. That way it'll be posted back to the server when the form is submitted.

Create custom follow button for my application

I would like a directive that dynamically knows if I'm following the user in my App.
I have a resource to get the currentUser
this.following = function () {
var defer = $q.defer();
var user = $cookies.getObject('currentUser');
UserResource.get({id: user.id}).$promise.then(
function (data) {
defer.resolve(data.following);
});
return defer.promise;
};
This is in one of my services. It returns all users that I'm following.
When instantiating my controller I fetch the users I follow within my app:
UserService.following().then(
function (data) {
$scope.following = data;
});
I would like to move that into a directive so that I can easily reuse it somewhere else in my app.
This is the HTML I am using right now (and it's not really beautiful) :
<div class="item" ng-repeat="user in users">
<div class="right floated content">
<div ng-show="isFollowing(user)" class="ui animated flip button" tabindex="0"
ng-click='unFollow(user)'>
<div class='visible content'>
Following
</div>
<div class="hidden content">
Unfollow
</div>
</div>
<div ng-hide="isFollowing(user)" ng-click="follow(user)" class="ui button">Follow</div>
</div>
</div>
But instead something like :
<div class="item" ng-repeat="user in users">
<um-follow-button um-user="user"></um-follow-button>
</div>
then depending if I'm following the user or not then render one of the two options.
I don't know if I will have to use a controller in my directive.
I have looked at : https://gist.github.com/jhdavids8/6265398
But it looks like a mess.

How to Iterate over javascript Map using angular ng-repeat

I'm developing an Angualr application where we have a Map object (as shown below). The key and value of the map object (headerObj) are coming from user as input to the app,
var headerObj = new Map();
headerObj.set(key,value);
I'm iterating through them using foreach as shown below, the output is coming as expected
$scope.inputHeaders.forEach(function (headerkey, headervalue) {
console.log(headerkey, headervalue;
});
but I have to show this map values in UI, which again user can edit, so I have binded them
<li class="list-group-item" ng-repeat="header in inputHeaders">
<div ng-repeat="(key, value) in header">
{{key}} : {{value}}
</div>
</li>
I've googled and tried several ways, but nothing did help, so basically I've wanted to know how can I iterate over a map using forEach in angular?
Just to give more clarity my requirement is something like that: I need values to be passed to the server as key, value pair, only if I'm not wrong, suppose if I use object properties the key of the object will be fixed something like
{"key":"Content-Type","value":"application/x-www-form-urlencoded","$$hashKey":"003"}]
but my server is expecting something like
"Content-Type" => "application/x-www-form-urlencoded"
Created an plunkr edit http://plnkr.co/edit/t2g6Dl831HGyjD6uSdf3?p=preview

AngularJS 1.x does not know how to use Javascript iterators, so you'll have to convert the Map object to an Array first using Array.from().
Controller:
$scope.inputHeadersArray = Array.from($scope.inputHeaders);
View:
<li class="list-group-item" ng-repeat="header in inputHeadersArray">
{{header[0]}} : {{header[1]}}
</li>

you can use :
[...headerObj] or [...headerObj.entries()] to got two dimensions array. and iterate them.
or [...headerObj.keys()] and [...headerObj.values()] for regular array.

here are few changes in your code. http://plnkr.co/edit/gpc1mPsZrl2QVXbnWZKA?p=preview
app = angular.module('testDemo', []);
app.controller('submitCtrl',function($scope) {
$scope.header={};
$scope.inputHeaders=[];
$scope.addHeader = function() {
$scope.inputHeaders.push($scope.header);
$scope.header = {};
$scope.header.key='';
$scope.header.value='';
}
$scope.log=function(){
//alert('in log');
$scope.inputHeaders.forEach(function (key, value) {
console.log(key, value);
});
}
});
HTML:
<body ng-controller='submitCtrl'>
<div >
<input type="text" class="=form-control" ng-model="header.key" placeholder="Key">
<input type="text" class="=form-control" ng-model="header.value" placeholder="value">
<button class="btn btn-sucess" ng-click="addHeader()">Add</button>
<button class="btn btn-sucess" ng-click="log()">Log</button>
<div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="header in inputHeaders">
<!-- need to to work on this logic -->
<div ng-show="inputHeaders.length>=1">
<input type="text" ng-model="header.value" />
<input type="text" ng-model="header.key" />
</div>
</li>
</ul>
</div>
</div>
</body>