How to implement classic javascript functions in Meteor? - javascript

I continue working on my meteor app, and am currently facing a new problem.
I'm still not a level 100 master of Meteor.js, but I kinda start to know it.
But today I discovered but challenges :
The first is that I want my textarea to grow automatically in height
as I'm typing, exactly like facebook do it, without a drag option.
For that, I've tried to implement 2 different solutions : the first
being to call the Jquery autogrow() function, the second one being to
code my own function to modify the css number of row. Unfortunately,
none of them gave me a result.
The second challenge I face is that i want to make my
bootstrap compliant, exactly like it is described here :
http://silviomoreto.github.io/bootstrap-select/
The problem being : no matter in which js file I enable Bootstrap-select, or allow the textarea to autogrow(), nothing happens.
So here is my question : when I build a meteor app, where and how do i implement such function from bootstrap and JQuery ? What are the good habits to have, the tips I should know to improve my app structure and fonctionnality ?
Edit : here is my select code, when i apply the solution proposed by Ethan, i do well get the css applied, but the select doesn't deploy anymore by clicking on it.
<div class="well">
<h3>Account informations :</h3>
<label for="bio">My presentation :</label>
<textarea id="bio" rows="5" cols="100" placeholder="Present yourself (hobbies, job...)"></textarea><br>
<label for="nativeLang">I speak :</label>
<select class="show-tick" id="nativeLang" data-style="btn-primary" data-live-search="true" data-max-options="2" multiple>
{{#each isoLangs}}
{{>isoLang}}
{{/each}}
</select><br>
<label for="learningLang">I want to practice :</label>
<select class="" id="learningLang" data-style="btn-primary" data-live-search="true" multiple>
{{#each isoLangs}}
{{>isoLang}}
{{/each}}
</select><br>
</div>
Thanks you,
David

Related

How can I put together the option selected with the input inserted by the user?

I'm beginning to study web development, just html, css and bootstrap so far... And training the things that I've learned, I just got stucked with the following situation:
<div class="input-group">
<input required type="email" name="" id="email" class="form-control">
<div class="input-group-append">
<select name="" id="kasp">
<option value="#gmail.com">#gmail.com</option>
<option value="#homail.com">#homail.com</option>
<option value="#yahoo.com.br">#yahoo.com.br</option>
</select>
</div>
</div>
Using only this, would it be possible to put together what was typed in the with what was selected?
I guess that some javascript may be necessary to do it, but I'm also curious to know if there's some way of doing it without js, so what do you tell me? I haven't started with javascript yet, but anyway, how would it looks like?
You can do it in the server script when you submit the form. But if you want to do it on the client, you have to use JavaScript.
Use .value to get the values of each input, and + to concatenate strings.
var full_email = document.getElementById("email").value + document.getElementById("kasp").value

How to change input using a value from iterator (JavaScript and Struts2)

we have an bonus exercise in our JavaScript class which I can't solve. I have a problem regarding how to change what is written in the two <input> tags depending on which applicant I've chosen. I am retrieving from a database for the <div> and <input> tags using JavaScript (which is used to connect the front end and back end, I guess) and Struts2.
For example I select "examinee1", the first input should display the name of his/her father while the second input will provide the name of his/her mother. If "examinee2" was chosen, same thing applies.
Here's what I've already started.
<div>
Applicant:
<select id="examineeList">
<s:iterator value="examineeList" var="examinee">
<option value="${examinee.name}" id="${examinee.id}">${examinee.name}</option>
</s:iterator>
</select>
</div>
<div class="form-group col-lg-3">
<label for="examineeFather">Father:</label>
<input type="text" class="form-control" id="examineeFather"
name="examinee.father" placeholder="-----" maxlength="50" required />
</div>
<div class="form-group col-lg-3">
<label for="examineeMother">Mother:</label>
<input type="text" class="form-control" id="examineeMother"
name="examinee.mother" placeholder="-----" maxlength="50" required />
</div>
Moreover, if I have not choose any examinee, the input tags should have no value and after selecting the examinee, I can still change the value of 2 input tags whenever I want to (my instructor said that just in case i want to rename my father and mother, lol). Also, If I have selected an examinee, I can save directly with the default value of father and mother retrieved from the database. After all, saving the entry to the database follows.
Can anybody help me with the JavaScript code? I'm still learning it and only familiar with its basic/usual functions. Any hints and suggestions would be really much appreciated.
Thank you in advance!

Multiple HTML <select> Elements Showing Same Dropdown Content In Ionic

I am refactoring an angularJS webapp to mobile app using Ionic with great success. But, I have two SELECT elements that are not functioning properly anymore. One should select "Months" and the other should select "Years". The problem is, when I click/tap on either, they are both opening the "Years" select options. I thought they might be condensed to close and I was "Fat Fingering" the select elements, but I added margin between and separated them and still happening.
Can someone take a look at the below and tell me if they see anything that could be causing this?
Thanks,
B
<div class="card-date-housing">
<div class="form-group date-select">
<label for="year" class="item-select security-select">Expiration Month
<select id="month" class="form-control custom" ng-model="billingInfo.ExpMonth" ng-options="month.id for month in months track by month.id" tabindex="2" required>
</select>
</label>
</div>
</div>
<div class="card-date-housing">
<div class="form-group date-select">
<label for="year" class="item-select security-select">Expiration Year
<select id="year" class="form-control custom" ng-model="billingInfo.ExpYear" ng-options="year.display for year in years track by year.id" tabindex="3" required>
</select>
</label>
</div>
</div>
First, let me apologize for putting a question here that was so clearly a syntax error. I saw just after I posted this that the labels for attribute was assigned to "year" for both select elements. I changed the "month" label for attribute to "month" and of course it started to behave properly.
Thanks for the community.

Why do i need to create an object, any advantage here ng-controller="InvoiceController as invoice"

as i am in learning stage of angularjs i am tring to understand each and every thing, so here is a some doubt, that i would like to ask.
Consider the code:
<div ng-controller="InvoiceController as invoice">
<b>Invoice:</b>
<div>
Quantity: <input type="number" ng-model="invoice.qty" required >
</div>
<div>
Costs: <input type="number" ng-model="invoice.cost" required >
<select ng-model="invoice.inCurr">
<option ng-repeat="c in invoice.currencies">{{c}}</option>
</select>
</div>
....
</div>
Since, angular is javascript code which runs on user browser, So it really required to create an instance of a controller and then with the object we have to handle.
<div ng-controller="InvoiceController as invoice">
..
invoice.qty etc...
Hope you have understood, what i am tring to ask.
All i need to know is, by doing this kind of object creation (object oriented), do we get any advantage in client side programming language.
reference : http://docs.angularjs.org/guide/concepts#model in "Adding UI logic: Controllers" section

Javascript glitch breaking a POST function for select input

thanks for taking a moment to look at my question.
I have a requirement to create a data collection method that is done in three phases. Final data is to be stored in a MySQL database.
1st - Personal details (this part is easy and has been completed)
2nd - Expense details (this part is the part that is my headache)
3rd - Receipt scan upload (this part is also relatively easy and has been completed also).
Technologies in use - html, php5, javascript, mysql, running on a standard LAMP stack.
Personal limitation - me. Not very fluent in php and have not used it in a few years.
1st screen works perfectly.
3rd screen works perfectly but requires completion to email the user upon finalisation of completing the process. Not a problem as I have done this before.
2nd screen has two tables, each with a small variety of input fields. The first of these tables is using JavaScript to clone table rows so that the user can propagate as many of these rows as they need. Each row is comprised of the following fields:
<input class="mus3" type="text" name="reg_travel_date1" id="reg_travel_date1" maxlength="20"><br><input type="button" name="button2" id="button2" value="+1 row" class="button" style="width: 80px; margin-top: 18px;">
<textarea class="mus1" name="reg_travel_from1" id="reg_travel_from1" cols="10" rows="5"></textarea>
<textarea class="mus2" name="reg_travel_to1" id="reg_travel_to1" cols="10" rows="5"></textarea>
<input class="mus4" type="text" name="reg_kms_travelled1" id="reg_kms_travelled1" maxlength="10" onkeydown="validateNumber(event);">
<select class="select" style="width: 120px;" name="exp_type_car_travel1">
<option selected>Type...</option>
<option value="Seminar">Seminar</option>
<option value="Rural Travel">Rural Travel</option>
<option value="Conference">Conference</option>
<option value="Exam">Exam</option>
<option value="Other">Other</option>
</select>
<input type="text" name="reg_claimable_kms1" id="reg_claimable_kms1" maxlength="10" class="mus5" onkeydown="validateNumber(event);">
To see further detail, I have posted ALL of the code used at the following links (there is not enough space in here).
I have had to double up on my linked code as I am only permitted to post two links, it appears.
index.php FOLLOWED BY C.claim2.php : http://pastebin.com/wufh4Q47
css_file.css FOLLOWED BY C.claim.php (complete and working) : http://pastebin.com/iGnEsTC3
The jquery.min.js file is version jQuery v2.0.3
I've pasted the code for the first screen which is working fine, as an indication of the hoped for behaviour of the second screen.
PROBLEM:
I am trying to make it so that the select field in the JS clone function will increment it's name/id like the text and textbox fields do (or did before this particular version, for some reason). It has always cloned itself with the exact same name as the starting row which has caused serious problems in the resulting post function.
Also, for some reason that may or may not be related, the select field always posts a blank value, regardless of how many cloned rows there are. I do not know why, nor how to fix this.
Can anyone help? I am not skilled in JS at all, the JS used on this project was written for me by a friend who is also wondering why it's not quite working as desired.
Thank you. :)
Ok, ignore this question now - the situation has been resolved fully and is working perfectly. It appears there is a bug in JQuery that has been chosen as to be "not to be fixed" as the overheads to do so are too high. This problem results in the choices to be blank, their 'name="something"' values being dropped. We have a work around now and the function now performs perfectly, thanks to my friend. Much appreciation Crystal!

Categories