I'm using the City search from the example https://community.algolia.com/places/examples.html#city-search
When you made selection, it only displays the City. How can I display it as City, State?
<input type="search" id="city" class="form-control" placeholder="In which city do you live?" />
<script src="https://cdn.jsdelivr.net/npm/places.js#1.17.1"></script>
<script>
(function() {
var placesAutocomplete = places({
appId: '<YOUR_PLACES_APP_ID>',
apiKey: '<YOUR_PLACES_API_KEY>',
container: document.querySelector('#city'),
templates: {
value: function(suggestion) {
return suggestion.name;
}
}
}).configure({
type: 'city',
aroundLatLngViaIP: false,
});
})();
</script>
Related
This maybe a somewhat straightforward question but I'm looking to change an old Vue.directives into a Vue.component and am still pretty new to the Vue world. I can't seem to get Tinymce to work within a component and I am open to any and all suggestions.
<div id="tinymce-form">
<textarea
id="editor"
rows="10"
v-tinymce-editor="content">
{{content}}
</textarea>
Html: {{content}}<br />
Markdown: {{ content | markdown}}
</div>
Vue.directive('tinymce-editor',{
twoWay: true,
bind: function() {
var vm = this;
tinymce.init({
selector: '#editor',
setup: function(editor) {
editor.on('init', function() {
tinymce.get('editor').setContent(vm.value);
});
editor.on('keyup', function() {
var new_value = tinymce.get('editor').getContent(vm.value);
vm.set(new_value)
});
}
});
}
})
Vue.filter('markdown', function(value){
return toMarkdown(value);
})
new Vue({
el: 'body',
data: {
content: 'Editable Text Goes Here',
}
})
$(function() {
$('input.month-mode').datetimepicker({
viewMode: 'months',
format: 'MM/YYYY',
showClose: true,
maxDate: current_month,
});
});
I want to add close text to it. by default it shows 'X', but I want to change it. Is it possible?
You can use icons option to define a custom css class for your icon and then you can write a css rule to customize close text as shown below:
$(function () {
var current_month = moment(); // just a sample value
$('#datetimepicker1').datetimepicker({
showClose: true,
viewMode: 'months',
format: 'MM/YYYY',
maxDate: current_month,
icons: {
close: 'closeText'
}
});
});
.closeText:before {
content: "Close";
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
One way to do this is to use the icon classes to a add a new class and then use css to add some content. Something like:
$(function() {
$('input.month-mode').datetimepicker({
viewMode: 'months',
format: 'MM/YYYY',
showClose: true,
maxDate: current_month,
icons: {
close: 'textclass1'
}
});
});
Css:
.textclass1::before {
content: "Close";
}
getting into AmpersandJs, and having a big showstopper by not figuring out why my sub-view-form isn't rendering it's markup.
My MainView.render, works as should:
render: function() {
BaseView.prototype.render.apply(this, arguments);
this.collectionView = this.renderCollection(this.collection, HSEventView, '.item-container');
this.renderSubview(new HSEventEditView({
action: 'create'
}), '.create-event');
return this;
},
Next, my SubView.render (HSEventEditView):
render: function () {
this.renderWithTemplate();
this.form = new EditForm({
el: this.query('.edit-form'),
submitCallback: function (data) {
debug('submit', data);
}
});
this.registerSubview(this.form);
debug('render.form.el', this.form.el)
}
And finally my FormView:
module.exports = FormView.extend({
initialize: function() {
debug('initialize', this.el)
},
autoRender: true,
fields: function () {
debug('fields!')
var fields = [
new InputView({
label: 'Name',
name: 'name',
value: utils.getDotted(this, 'model.name'),
placeholder: 'Name',
parent: this
})
];
debug('fields', fields)
}
});
The MainView and SubView renders fine, but the 'div.edit-form' DOM-node, where the form markup should be, is empty.
I have tried all variations of including a subview I could dig up, but obviously I am blind to something.
Thanks!
PS! Here is the rendered markup:
<section class="page">
<h2>Events collection</h2>
<hr>
<div class="tools">(Tools comming...)</div>
<hr>
<div class="item-container events">
<div class="item event">
<h3>Event: <span data-hook="name">Event 1</span></h3>
</div>
</div>
<hr>
<div class="create-event">
<div class="item event">
<h3>Create event: <span data-hook="name"></span></h3>
<div class="edit-form"></div>
</div>
</div>
</section>
Since fields is a function, you need to return the fields. In your Formview:
fields: function () {
debug('fields!')
var fields = [
new InputView({
label: 'Name',
name: 'name',
value: this.model.name,
placeholder: 'Name',
parent: this
})
];
debug('fields', fields)
// need to return the fields you've declared
return fields;
}
I want to use the JavaScript Alfresco.ObjectPicker component in order to have category picker into the file: dnd-upload.get.html.ftl
<div class="form-field inlineable">
<label >Catégories:</label>
<div class="object-finder inlineable" id="a_default_prop_cm_categories-cntrl">
<div class="current-values inlineable object-finder-items" id="b_default_prop_cm_categories-cntrl-currentValueDisplay"></div>
<input type="hidden" value="" name="prop_cm_categories" id="c_default_prop_cm_categories"/>
<div class="show-picker inlineable" id="d_default_prop_cm_categories-cntrl-itemGroupActions"><span class="yui-button yui-push-button" id="yui-gen7"><span class="first-child"><button type="button" tabindex="0" id="yui-gen7-button" >Sélectionner</button></span></span></div>
<script type="text/javascript"> //<![CDATA[
(function(){
var picker = new Alfresco.ObjectFinder("a_default_prop_cm_categories-cntrl", "c_default_prop_cm_categories").setOptions(
{
field: "prop_cm_categories",
compactMode: true,
mandatory: false,
currentValue: "",
selectActionLabel: "Sélectionner",
minSearchTermLength: 1,
maxSearchResults: 1000
}).setMessages(
{""}
);
picker.setOptions(
{
itemType: "cm:category",
multipleSelectMode: true,
parentNodeRef: "alfresco://category/root",
itemFamily: "category",
maintainAddedRemovedItems: false,
params: "",
createNewItemUri: "",
createNewItemIcon: ""
});
})();
//]]>
</script>
</div>
</div>
And I have declared a JS dependency in the same file: dnd-upload.get.html.ftl
<#script type="text/javascript" src="${url.context}/res/components/object-finder/object-finder.js" group="objectfinder"/>
When I click on the button : "Sélectionner" , nothing happens and I have no console error neither.
Do you , Please, have any idea about how to make this Picker Working ?
Regards,
Sofia.
I want to send a POST (not GET) request to the server with ember.js. I don't know which function I need at "which function here", but I want to send it to the server for a login request.
App.LoginController = Ember.ObjectController.extend({
actions: {
userLogin: function(user) {
// which function here?
?? ("http://siteurl/api/authentication/login/&username=" + user.username + "&password=" + user.password + "");
this.transitionTo('cat');
},
cancelLogin: function() {
this.transitionTo('menu');
}
}
});
App.UserFormComponent = Ember.Component.extend({
actions: {
submit: function() {
this.sendAction('submit', {
username: this.get('username'),
password: this.get('password')
});
},
cancel: function() {
this.sendAction('cancel');
}
}
});
down here template code
<script type="text/x-handlebars" data-template-name="login">
<header class="bar bar-nav">
<h1 class="title">inloggen</h1>
{{#link-to 'menu' class="icon icon icon-bars pull-right"}}{{/link-to}}
</header>
<!-- SHOW LOADER -->
<div class="content">
<div class="content-padded">
{{user-form submit="userLogin" cancel="cancelLogin" submitTitle="login"}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="components/user-form">
<form {{action "submit" on="submit"}}>
<p><label>gebruikersnaam {{input type="text" value=username}}</label></p>
<p><label>wachtwoord {{input type="password" value=password}}</label></p>
<input type="submit" class="btn btn-primary btn-block" {{bindAttr value=submitTitle}}>
<button class="btn btn-negative btn-block" {{action "cancel"}}>Cancel</button>
</form>
</script>
Ember doesn't have any built in communication layer, you can use jquery for such calls.
App.LoginController = Ember.ObjectController.extend({
actions: {
userLogin: function(user) {
$.ajax({
type: "POST",
url: "http://siteurl/api/authentication/login/&username=" + user.username + "&password=" + user.password,
data: { name: "John", location: "Boston" }
})
this.transitionTo('cat');
},
cancelLogin: function() {
this.transitionTo('menu');
}
}
});