I'm building a website to let users design their own mobile app. One side of the website has a form that the user fills out, and the other side has a live preview of the app based off of the form data. This is how it is set up:
Controller:
$scope.primaryColor = "#325490";
Form Input:
<!-- Primary Color -->
<div class="form-group">
<label for="primaryColor" class="col-sm-2 control-label">Primary:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="$parent.primaryColor">
</div>
</div>
Live Preview:
<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color':'{{$parent.primaryColor}}'}">
I have to use $parent because I am using ng-include on my index page to include the form.htm and preview.htm files. I have tested the form and I know it is changing all of the scope variables that I have, but the previewer is not changing. Any help is appreciated!
Remove {{}} and '' and it should work, like this:
<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color': $parent.primaryColor }">
Related
About a week ago i posted a question but couldn't get it answer because i didn't know how to use jsfiddle or codepen but i figured it out.
my problem is that the button doesn't work now if you click around it it will display the file search box this is the sample:
https://codepen.io/anon/pen/bWaYzJ
<label> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</label>
now if i detached the plugin from element then button works again.
change your outer label to div seems to solve your problem like this codepen
<div> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</div>
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
And make your javascript:
$(document).ready(function(){
$('#exampleFileUpload').onClick({
MultiFile();
});
});
First, remove the reference to the MultiFile source file - that's what causes the "MultiFile is not a function" error. You will need to include the MultiFile directly in the source for the codepen (as you already have).
Second, the label needs to wrap the input, and it cannot use the for attribute (since that relies on the name attribute for the target, which you have not set):
<div> Uploads
<label class="button">Upload File
<input type="file" id="exampleFileUpload" class="show-for-sr" multiple>
</label>
</div>
I have validation for 2 fields which are country code and actual mobile number. I have attached screenshot. When correct country code is given and invalid mobile no is given at that time correct tick glyphicon for country code and cross glyphicon comes which overlaps on each other. I need to remove glyphicon for country code by using css or js. Any help will be appreciated.
If you're using jQuery:
let's say you have
<div class="container">
<div class="form">
form content...
</div>
</div>
you would call:
$('.container form .glyphicon').each(function(i){ // your target input id or class should be placed between 'form' and '.glyphicon' eg: $('.container form input[name=state_code] .glyphicon')
if (i!=0) $(this).remove();
});
this way you get rid of the additional Xes appearing when you don't need.
I have found the answer. I have done it by using jQuery.
My actual HTML was as below,
<div class="input-group">
<div class="input-group-addon">+</div>
<input type="tel" maxlength="3" class="form-control pull-left" id="CountryCode" name="CountryCode" placeholder="Code">
<input data-bv-field="Mobile" type="text" id="Mobile" name="Mobile" class="form-control">
</div>
Bootstrap creates glyphicons for correct and wrong below the html as below,
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="CountryCode" style=""></i>
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="Mobile" style=""></i>
So I have added following one line code to remove correct and wrong glyphicons for country code field,
$("#CountryCode").parent().next().removeClass('glyphicon-ok glyphicon-remove');
I realy like this tools, because of their simplicity and compactness. But sometimes I face lack of plugins / snippets (my JS skills also pretty weak, usually I'm backend developer), so here's one of those cases:
For example, I have simple form like this one:
<div class="row">
<div class="six columns">
<label for="email">Contact email*</label>
<input v-model="email" class="u-full-width" type="email" id="email" placeholder="admin#exchange.com" name="email">
</div>
<div class="six columns">
<label for="date">Launch date*</label>
<input v-model="date" class="u-full-width" type="text" id="date" placeholder="June, 2014">
</div>
</div>
As you can see, I want to make this fields required, email input should be in email format, something like ***#***.***, date field can be anything.
What is the best way to realize it? Also I've found 3 Vue plugins, who's your favorite?
vue-validator
vee-validate
vue-form
Thanks for any examples/snippets/etc
Since you come from backend and are not expert with JS ( neither am I :D ) I suggest you do it yourself. You will learn more.
This is how I would do it:
<input name="email" v-model="email" #keyup="validateEmail()" />
... vue component or instance ...
data: function() { // if you are doing this on Vue instance and not component then data property will look differently but if in component it has to be a function that returns an object
return {
email: ""
}
},
methods: {
validateEmail: function() {
console.log(this.email)
// here you have access to email input as it changes so you can use either regex or substring or some other string manipulation to determine if the string satisfies your criteria
}
I'm trying hard to get a date picker on my meteor application. I tested lot of packages found by googling, but none seems to work, or, probably, I'm doing it wrong. Can someone tell me clearly how to add a date picker?
Thanks a lot!
I would use the bootstrap 3 package and the bootstrap 3 date time picker package:
$ meteor add twbs:bootstrap
$ meteor add tsega:bootstrap3-datetimepicker
Then, simply add the form in your HTML file:
<template name="myTemplate">
<form>
<div class="form-group">
<label for="myInput">Input name</label>
<div class="input-group datetimepicker">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input name="idInput" id="idInput" class="set-due-date form-control" type="text"/>
</div>
</div>
</form>
</template>
And in your corresponding JavaScript file, you have to initialize your date time picker:
Template.myTemplate.rendered = function(){
$('.datetimepicker').datetimepicker();
};
And if you have different date input in your page (for example):
Template.myTemplate.rendered = function(){
$('.datetimepicker').each(function(){
$(this).datetimepicker();
});
}
Finally, I invite you to read the Documentation if you need more options (like date format etc).
Hope it will help you!
I use the one from eonasdon (Bootstrap required) and you get get it prepackaged by doing this:
meteor add hujhax:bootstrap3-datetimepicker
I have these packages added
twbs:bootstrap
jquery
rajit:bootstrap3-datepicker
and used this in the template
<div class="box-body no-padding">
<!--The calendar -->
<div id="calendar" style="width: 100%"></div>
</div><!-- /.box-body -->
and added helper below
Template.myCalendar.rendered = function() {
$('#calendar').datepicker();
}
So I've been running into this issue where I can't seem to get values from my templates to my view objects.
For instance, take this signin form:
App.AuthSignInView = Ember.View.extend
templateName: 'auth/sign_in'
email: null
password: null
submit: (event, view) ->
event.preventDefault()
App.Auth.signIn
data:
email: #get 'email'
password: #get 'password'
And this template:
<form>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
{{view Ember.TextField valueBinding="email"}}
</div>
<div class="controls">
{{view Ember.TextField type="password" valueBinding="password"}}
</div>
</div>
<button class="btn btn-inverse">Sign In</button>
</form>
When the view attempts to access the email and password properties on submit, they are still null. I'm sure I'm doing something simple wrong here, but I'm not sure what.
Although it's not a good practice to have your view's holding state for your app, everything logic related should be done in controllers, which is the default lookup place for values defined in your templates. But if you really need your values to be on your view you should prefix you value bindings with view.email and view.password in your templates to have it use the values on your view.
See here for a working jsbin using the view approach.
And here an example jsbin using the controller which is the recommended way.
Hope it helps.