I have a Meteor app that's having problems on mobile browsers. I'm using the autocomplete package (meteor-autocomplete), but I can't select the autocomplete options that drop down using touch. It works fine on the desktop browser when I click on the options. What's the problem? Also, how can I modify the app for mobile browsers (presentation, etc.).
Thanks
Edit:
Here's the html template code:
<template name="form">
{{> inputAutocomplete settings=settings id="food" class="form-control" name="food" placeholder="e.g. Chicken Pot Pie"}}
</template>
And here's Template.form.helpers:
Template.form.helpers({
settings: function() {
return {
position: "bottom",
limit: 5,
rules:
[
{
collection: Records,
field: 'food',
matchAll: true,
template: Template.foodFill
}
]
};
},
records: function() {
return Records.find().fetch();
}
});
And the Records collection holds all the entries to be used by autocomplete.
Related
How can I add and use an openlayers4 map in sencha architect? I want to add openlayers map in a container but I have no idea how to do this in sencha architect, so any suggestions would be great!
Thanks in advance
Start with the OL guide https://openlayers.org/en/latest/doc/quickstart.html
We need to do 3 things according to the guide:
Include OpenLayers
map container
JavaScript to create a simple map
Include:
Click on plus button, select resource, add JS resource
Select the JS resource, set the URL, your own ID, set remote to true
Do the same steps for the CSS resource
You should see both resource loaded remotely, and you should see them inside SA. Or you can download the JS files. Put them into resources folder in your project folder and the url would look like resources/myOLm.js and the same goes for CSS.
Map container:
Add panel or container, select the html config and add custom div in there with the id.
You should see this:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
requires: [
'MyApp.view.MyPanelViewModel'
],
viewModel: {
type: 'mypanel'
},
height: 559,
html: ' <div id="map" stlye="width:100%; height:400px"></div>',
width: 728,
title: 'My Panel'
});
JS to create the map:
Now we need to execute the JS for the map. We will need to use some event, which is fired -> fires our function where we can write our own JS.
I have chosen the render event. Click on the panel, in the config window find basic event binding, select render, add it. And put the example JS code into the function.
Your code should look like this:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
requires: [
'MyApp.view.MyPanelViewModel'
],
viewModel: {
type: 'mypanel'
},
height: 559,
html: ' <div id="map" stlye="width:100%; height:400px"></div>',
width: 728,
title: 'My Panel',
defaultListenerScope: true,
listeners: {
render: 'onPanelRender'
},
onPanelRender: function(component, eOpts) {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
}
});
Save and preview your project:
I used OpenLayers4 in Architect the last week, and actually I did exactly as you did #pagep except that:
- I displayed the map directly into a component & without a div (I gave the component the id=map).
- I'm using the modern package and there's no "render" event, so I used the "painted" event.
I'm not sure what I'm doing wrong exactly but I've been on this for hours, when it's supposed to be relatively straightforward. Here's my html;
<div class="ui search focus">
<div class="ui left icon input">
<input class="prompt" type="text" placeholder="Search GitHub" autocomplete="off">
<i class="github icon"></i>
</div>
<div class="results"></div>
</div>
And here's my script
$(document).ready(function () {
$('.ui.search')
.search({
apiSettings: {
url: '//api.github.com/search/repositories?q={query}'
},
fields: {
results : 'items',
title : 'name',
url : 'html_url'
},
minCharacters : 3
});
});
This is exactly from the examples page: https://semantic-ui.com/modules/search.html#/examples
When I try to load local data in the form of
var content = [
{ title: 'Andorra' },
{ title: 'United Arab Emirates' },
{ title: 'Afghanistan' },
{ title: 'Antigua' },
{ title: 'Anguilla' },
// etc
];
$('.ui.search')
.search({
source: content
});
It works, no problems, however loading external content like in the first snippet shows No results found and when I check the network tab in Network in Browser Dev tool, I see a 307 Internal Redirect on the request and another with a 200 Ok request which apparently gets the data from Github. Obviously I'm missing something here and will really appreciate some guidelines please. Thanks
you can try this using Url helper
url: "<?= $this->Url->build('https://api.github.com/search/repositories?q={query}', true); ?>"
I am new to AngularJS and have to incorporate an Admin LTE full calendar feature in my webapp. I found an Angular directive for the Arshaw FullCalendar JQuery plugin. The link to the directive is here: http://angular-ui.github.io/ui-calendar/
Although I am able to display the calendar, I am not able to get the previous, today and next feature working for the calendar. This help to toggle between the months of the calendar. I know this feature is inside the uiConfig but I am not able to understand why this feature doesn't get rendered.
Below is my code. I have included all the files necessary for the plugin but did not show in index.html.
index.html
<div class="col-xs-12" resize>
<h1>Calendar Page</h1>
<div class="calendar" ng-model="testevents" config="uiConfig.calendar" ui-calendar="{{uiConfig.calendar}}"></div>
calendarController.js
app.controller("calendarController", ["$scope", "displayCalendar", "dialogs", "$filter", function ($scope, displayCalendar, dialogs, $filter) {
$scope.$parent.pageTitle = "Displays Reporting Period Start and End Dates";
/* config object */
$scope.uiConfig = {
calendar: {
height: 450,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender
}
};
$scope.form = {};
$scope.testevents = {
events: [
{
title: 'event1',
start: '2015-12-12'
},
{
title: 'event2',
start: '2015-12-11'
}
// etc...
],
color: 'yellow', // an option!
textcolor: 'black' // an option!
};
}]);
UPDATE:
looking at the demo code on their github page
<div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
I think you would need to change yours to:
<div class="calendar" ng-model="testevents" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
here is the .html page for their demo
https://github.com/angular-ui/ui-calendar/blob/master/demo/index.html
Have you also added the ui-calendar component to the app initialisation?
'var myAppModule = angular.module('myApp', []);'
inside the [] normally you have to inject a third party component so it can be seen by the rest of your controllers.
Ok.. So after hours and hours of debugging, I figured out what the issue was.
I included fullcalendar.print.css also which was throwing off the styling for fullcalendar.css.
So an advice peeps, if the buttons are not getting rendered properly u might need to consider checking the CSS and remove fullcalendar.print.css.
I have read in multiple places that it is possible to use Kendo UI's MVVM system with a different templating engine.
I love Kendo, I love the widgets, and I love the simple View Models - but I hate their templates. They are very restrictive.
But what I am having trouble is finding any way to do this; I would love to use AngularJS for templates ... but I don't want it for anything beyond that. I'm not interested in declaratively calling all of my widgets from Angular, I just need to be able to databind widgets to the kendo view models, and use Angular to render repeater sections and such.
Is this possible? I have seen the AngularJS-Kendo project and it doesn't seem to do what I am trying. It is just for declarative widget binding.
I'm not completely sure what you have in mind, but here are my thoughts on this.
I don't think there's a way to separate the use of Angular's templates from using their concept of controllers and models.
So, you'd probably have to find a way to integrate your view models with those. I don't know if this helps you, but I've slapped together a simple (and possibly clumsy) example of combining a Kendo view model with Angular templates as well as using the same view model with a Kendo drop-down list:
HTML
<div ng-controller="MainCtrl">
<clickable items="items"></clickable>
<ul>
<li ng-repeat="item in items.slice(0,items.length)">
{{ item.text }} ({{ item.value }})
</li>
</ul>
</div>
JavaScript
app = angular.module('app', []);
var items = [
{ text: "test 0", value: 0},
{ text: "test 1", value: 1}
];
var viewModel = kendo.observable({
items: items
});
viewModel.bind("change", function(e) {
console.log("change");
});
app.controller('MainCtrl', function($scope) {
$scope.items = viewModel.get("items");
});
app.directive('clickable', function() {
return {
restrict: "E",
scope: {
items: '='
},
template: "<button>Click to Add</button>",
link: function(scope, element, attrs) {
element.bind('click', function() {
var index = scope.items.length;
var text = "test " + index;
scope.items.push({ text: text, value: index});
scope.$apply();
});
}
};
});
$("#tree").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: viewModel.get("items"),
change: function (e) {
console.log("dropdown value change: " + this.value());
}
});
Corresponding JSBin: http://jsbin.com/UBuPUwOq/5/edit
Angular-Kendo basically simplifies some things so you don't have to imperatively create the widgets. Instead, you can create them in a way which integrates with Angular controllers and models:
<select kendo-drop-down-list
k-option-label="'Select A Thing'"
k-data-text-field="'name'"
k-data-value-field="'id'"
k-data-source="things"></select>
I have a login view created in extjs 4 and the data is fetched from mysql.
What my issue is that i am not able to redirect my page after the sucessfull login.
My code to redirect is.
onLoginSuccess : function(response, opts)
{
//Received response from the server
response = Ext.decode(response.responseText);
if(response.success)
{
var redirect = 'index';
window.location = redirect;
}
else
{
Ext.MessageBox.alert('Login failed', response.message);
}
}
There are two ways to approach this:
Login as a separate page
This is the recommended way, for being faster and more secure.
Have an index.php page, that checks whether the user has logged in or not.
If the user is logged in, you should simply require your actual system index file, which includes the ExtJs headers.
If the user is not logged in, you should require a login.php file that shows the actual login screen. This page may, or may not load the ExtJs library (since there's very little on this page, I'd assume you won't need the ExtJs files here).
So for example, this is my index.php:
<?php
require_once('common/include/User.php');
if ( SessionUser()->IsLoggedIn() )
{
// chdir is simply to keep the correct paths when compiling the app.
// It works for php, but for html/css links you should use the base tag
// in your php/html file: <base href="app/"/>
chdir('app');
require_once('app/index.php');
} else {
require_once('login.php');
}
?>
Then app/index.php is the actual index file that loads your app scripts and ExtJs lib.
login.php is just a rather simple login form:
<?php
// Index file for logged out users (guests)
$iUserName = isset( $_POST['username'] ) ? $_POST['username'] : '';
$iLoginErrorTxt = '';
if ( isset( $_POST['username'] ) )
{
require_once('common/include/User.php');
$iLoginError = SessionUser()->Authenticate( $_POST['username'], $_POST['password'] );
if ( $iLoginError['success'] )
{
// Login successful - reload the page.
header( "Location: " . $_SERVER['PHP_SELF'] );
exit();
} else {
// Login failed - present an error.
$iLoginErrorTxt = $iLoginError['error'];
}
}
?>
<html>
<head>
<title>My System</title>
</head>
<body>
<form class="login-form" action="<?=$_SERVER['PHP_SELF']?>" enctype="application/x-www-form-urlencoded" method="post">
<input name="username" size="25" type="text" value="<?=$iUserName?>" value spellcheck="false" placeholder="User Name"/>
<input name="password" size="25" type="password" value spellcheck="false" placeholder="Password"/>
<div class="error-message"><?=$iLoginErrorTxt?></div>
<input name="submit" type="submit" value="Login" />
</form>
</body>
</html>
Login from within the ExtJs app
This method is not highly recommended as you need the load the whole ExtJs framework and very possibly your application scripts, before the user even authenticated.
A possible implementation will involve having a container panel, which only displays a panel at a time, being either the login page, or the actual application page.
The app.js might include this code:
refs:
[{
ref: 'contentPanel',
selector: 'viewport > #contentPanel'
}],
controllers: [
'MainMenu'
],
launch: function() {
// Enable quicktips
Ext.QuickTips.init();
// Create the viewport
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
id: 'contentPanel',
layout: 'card',
dockedItems: [{
xtype: 'mainmenu',
dock: 'top'
}]
}
]
});
},
Then you can do:
var iContentPanel = this.getContentPanel();
iContentPanel.getLayout().setActiveItem( iPage );
Where iPage is whatever page (panel) you wish to display.
There are obviously ways to improve how this works, for example, by dynamically loading controllers; but that's a story for a different question I believe.
Regardless, I would strongly suggest you consider the first method.
You could handle logging in by simply overlaying the whole app with a login window, like here:
http://blogapp.banchaproject.org/app.html
The code can be found here, especially the this controller will be of interest for you:
https://github.com/Bancha/BanchaBlogApp/blob/master/webroot/app/controller/Authentification.js