Develop Reference

How to submit a value of hidden input in Meteorjs

In my meteor app, I submit the value of the picker number by clicking sbmit button bellow
When I tried to submit it with Enter key (keyboard), it does not work, knowing that i set a hidden input and trying to submit it; I think the problem come from the hidden input so after a hours of search I don't know how to submit a hidden input, any help please; here my code
<template name="range">
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="valueSliders">
<div class="verticleNumberSelect">
<span class="firstNumber">
<span class="up"> </span>
<span class="numberValue" tabindex="1">0</span>
<span class="down"></span>
</span>
<span class="secondNumber">
<span class="up"></span>
<span class="numberValue" tabindex="1">0</span>
<span class="down"></span>
</span>
<span class="thirdNumber">
<span class="up"></span>
<span class="numberValue" tabindex="1">0</span>
<span class="down"></span>
</span>
<span class="fourthNumber">
<span class="up"></span>
<span class="numberValue" tabindex="1">0</span>
<span class="down"></span>
</span>
<form>
<input type="hidden" id="verticleNumber" />
<input type="submit" style="visibility: hidden; position: absolute;" />
</form>
</div>
</div>
</div>
</template>
and my js is
Template.range.events({
'submit form': function (event) {
event.preventDefault();
if (Session.get('times') && Session.get('times') > 0) {
var RESPONSE, responseClass;
var GUESS = $('#verticleNumber').val();
if (GUESS > ANSWER) {
RESPONSE = "-";
responseClass = 'lower';
}
else if (GUESS < ANSWER) {
RESPONSE = "+";
responseClass = 'higher';
}
else if (GUESS == ANSWER) {
RESPONSE = "✔";
responseClass = 'win';
}
}
}
});
I set the value of hidden input dynamically and it's a value chosen by the player with picker number, I means the value of verticleNumber; answer it random value
Thank's a lot

The enter key only works on a form if it is considered focused - I think form only having one hidden input is preventing that from ever occurring. Assuming that your submit function is not being called at all, I'd actually break Meteor convention and do a jQuery event listener in your template's onCreated function:
$(document).keypress(function(e) {
if(e.which == 13) {
console.log('enter pressed');
// Your code here to get values and do stuff.
}
});

How to dynamically append templates to a page in Angular

So the situation is as follows:
I have an input bar where a user can search up a business name or add a person's name (and button to select either choice). Upon hitting enter I want to append a unique instance of a template (with the information entered by the user added). I have 2 templates I've created depending of if the user is searching for a business or a person.
One approach I've thought about is creating an object with the data and adding it with ng-repeat, however I can't seem to get the data loaded, and even then don't know how I can store reference to a template in my collection.
The other idea I've come across is adding a custom directive. But even then I've yet to see an example where someone keeps appending a new instance of a template with different data.
Here is the code so far:
payments.js:
angular.module('payment-App.payments',['ngAutocomplete'])
.controller('paymentController', function($scope, $templateRequest/*, $cookieStore*/) {
$scope.businessID;
$scope.address;
$scope.isBusiness = false;
$scope.payees = [];
$scope.newPayee = function () {
this.businessID = $scope.businessID;
this.address = $scope.address;
}
$scope.submit = function () {
var text = document.getElementById("businessID").value.split(",");
$scope.businessID = text[0];
$scope.address = text.slice(1).join("");
$scope.newPayee();
}
$scope.addPayee = function () {
$scope.submit();
$scope.payees.push(new $scope.newPayee());
console.log($scope.payees);
}
$scope.selectBusiness = function () {
//turns on autocomplete;
$scope.isBusiness = true;
}
$scope.selectPerson = function () {
//turns off autocomplete
$scope.isBusiness = false;
}
$scope.fillAddress = function () {
// body...
}
})
.directive("topbar", function(){
return {
restrict: "A",
templateUrl: 'templates/businessTemplate.html',
replace: true,
transclude: false,
scope: {
businessID: '=topbar'
}
}
})
payments.html
<h1>Payments</h1>
<section ng-controller="paymentController">
<div>
<div class="ui center aligned grid">
<div class="ui buttons">
<button class="ui button" ng-click="selectBusiness()">Business</button>
<button class="ui button arrow" ng-click="selectPerson()">Person</button>
</div>
<div class="ui input" ng-keypress="submit()">
<input id="businessID" type="text" ng-autocomplete ng-model="autocomplete">
</div>
<div class="submit">
<button class="ui button" id="submit" ng-click="addPayee()">
<i class="arrow right icon"></i>
</button>
</div>
</div>
<div class="search"></div>
<div class="payments" ng-controller="paymentController">
<li ng-repeat="newPayee in payees">{{payees}}</li>
</div>
<!-- <topbar></topbar> -->
</div>
(example template)
businessTemplate.html:
<div class="Business">
<div class="BusinessName" id="name">{{businessID}}</div>
<div class="Address" id="address">{{address}}</div>
<button class="ui icon button" id="hoverbox">
<i class="dollar icon"></i>
</button>
</div>

I ended up using a workaround with ng-repeat here. Still curious about the original question though.

Is JQuery breaking my functionality?

I am making an app, the user can either select an item or use their camera to get the qr code which translates into an item's ID.
The problem is that I think some JQuery is messing with my scope from working properly.
I have to get the QR code by listening to an innerHtml change, once it changes (DOMSubtreeModified) the following occurs.
var index = 0;
$('#result').one('DOMSubtreeModified', function(e) {
var code = "";
if (e.target.innerHTML.length > 0) {
code = e.target.innerHTML;
$scope.ToRun(code);
}
});
$scope.ToRun = function(code) {
for (i = 0; i < $scope.plantList.length; i++) {
if ($scope.plantList[i].plantcode == code) {
index = i;
break;
}
}
$scope.currentPlant = $scope.plantList[index];
$scope.plantDetails = false;
$scope.searchDetails = true;
}
For some reason the following does not have any effect on my ng-classes. As when an item is selected I hide the input dialogs, and show the result one.
$scope.plantDetails = false;
$scope.searchDetails = true;
But when a user selects the item manually it works just perfectly. (the items have an ng-click on it)
$scope.viewPlant = function(plant) {
$scope.currentPlant = plant
$scope.plantDetails = false;
$scope.searchDetails = true;
};
And the above works fine, with the ng-click. So why won't my new function that listens for an innerHtml change work?
HTML snippet
<div ng-class="{ 'hidden': searchDetails }">
<!-- CHOOSE INPUT TYPE -->
<div class="form-group" style="margin-bottom:0px">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = false; qr = true">Plant Code</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = true; qr = false">QR Code</button>
</div>
</div>
</div>
<br />
<!-- QR CODE INPUT -->
<div ng-class="{ 'hidden': qr }">
<img id="blah" src="./images/placeholder.png" />
<span class="btn btn-default btn-file">
<i class="glyphicon glyphicon-camera"></i>
<input type="file" onchange="readURL(this);handleFiles(this.files)">
</span>
<div id="result">xxxxxx</div>
<canvas id="qr-canvas" width="800" height="600"></canvas>
</div>
<!-- MANUAL SELECTION INPUT -->
<div ng-class="{ 'hidden': digits }">
<input ng-model="search.$" style="width:100%; font-size:30px; text-align:center" placeholder="Plant Code" />
<div style="overflow: auto; max-height:250px">
<table class="table table-striped" style="background-color:lightblue">
<tr ng-repeat="plant in plantList | filter:search" ng-click="viewPlant(plant)" style="cursor:pointer">
<th>{{plant.name}}</th>
<th>{{plant.plantcode}}</th>
</tr>
</table>
</div>
</div>
<div>
</div>
</div>
<div ng-class="{ 'hidden': plantDetails }">
// results - this should appear when one of the above is entered.
// works for manual selection, but not qr code
</div>
Just confused on why my QR input will not fire off the change-class options to hide the searchDetails div and show the plantDetails div
EDIT: Doing a small test, it seems that my class variables are indeed not updating at all. I just put the values at the bottom of my page and they do not update when hitting the block of:
$scope.plantDetails = false;
$scope.searchDetails = true;

You need to let Angular know about the change. Add this at the end of your method and let me know if it works.
$scope.$apply();

Jquery stop repeat my code with after?

I have a problem with my input and my Jquery :
Basically I have this code :
HTML:
<form id="formUser">
<div class="row">
<div class="small-8">
<div class="row">
<div class="small-6 columns">
<label for="right-label" class="right inline">First name</label>
</div>
<div class="small-6 columns">
<input type="text" name="fisrtName" placeholder="First name">
</div>
</div>
</div>
</div>
<div class="row text-center">
<input type="checkbox" class="check"><label for="checkbox"><p>I accept the review agreement</p></label>
<button type="submit" class="button join">Let's Go !</button>
</div>
</form>
JS :
<script type="text/javascript">
$(function(){
$("#formUser").submit(function(){
if(!$('input[name="fisrtName"]').val()) {
$('input[name="fisrtName"]').addClass("error");
$('input[name="fisrtName"]').after("<small class='error'>Invalid entry</small>");
}
return false;
});
});
</script>
And I have this
When I click several time on the button... the error class is repeat ..
How can i stop the repeat or incrase the actual class error ?

Maybe you should be doing something like this
$("#formUser").submit(function(){
var $element = $('internal[name="fisrtName]');
// ^ save this much faster ^
// ^ you have spelt firstName wrong also ^
// check val and check next element isn't error
if($element.val() && $element.next().hasClass('error') === false) {
$element.addClass('error').after("<small class='error'>Invalid entry</small>");
} else {
// now remove it if you need to
}
return false;
});
Hope it helps.
You should always cache your elements
By doing this:
$('internal[name="fisrtName');
$('internal[name="fisrtName');
$('internal[name="fisrtName');
You're calling the jQuery function 3 times when you do not need to.

You can use:
if($('input[name="fisrtName"]').find('.error').length==0)
$('input[name="fisrtName"]').after("<small class='error'>Invalid entry</small>");

Or:
var $firstName = $('input[name="fisrtName"]');
if (!$firstName.hasClass("error")) {
$firstName.addClass("error");
$firstName.after("<small class='error'/>");
}
$firstName.find("small.error").text("Invalid entry");

Try to change your code with this, I have aded the line "$('small.error').remove();"
$.q("#formUser").submit(function(){
if(!$.q('input[name="fisrtName"]').val()) {
$.q('small.error').remove();
$.q('input[name="fisrtName"]').addClass("error");
$.q('input[name="fisrtName"]').after("<small class='error'>Invalid entry</small>");
}
return false;
});

Return key not working on input text tag

I have the following code
<div class="framepage">
<header>
<script type="text/javascript">
function getBaseUrl() {
return "#Url.Content("~/paging")";
}
function LocationSearch(baseUrl) {
window.location = getBaseUrl() + "/LocationSearch?searchstring=" + (document.getElementById('vestigingen').value);
}
</script>
</div>
</div>
</div>
</header>
<section id="maintest">
<ul id="menu">
<li>
<form class="navbar-search">
<div class="icon-search icon-white"></div>
<input type="text" class="search-query span3" id="vestigingen">
</form>
<input type="button" class="buttonzz" value="zoeken" onclick="LocationSearch()"/>
</li>
<li>Lijst</li>
<li>Lijst</li>
</ul>
<div class="fence">
#RenderBody()
</div>
My problem concerns the return key. Whenever I press the return key my inserted value in the input( type=text) tag is lost.
For instance I type New York and want to get result in NY , my field is empty.
If I type it in and use my submit button everything is fine. Can anyone help me here?

You don't need any javascript for this. Simply use HTML helpers to generate your search form:
#using (Html.BeginForm("LocationSearch", "SomeController", FormMethod.Get, new { #class = "navbar-search" }))
{
<div class="icon-search icon-white"></div>
#Html.TextBox("searchstring")
<input type="submit" value="Search" />
}

You could change the type to submit rather than button and this will set the button to default.

Return key submits your form and in your case your page will refresh. Try to prevent this default action. There are plenty of tricks for that!