I am using ionic to bulid mobile app for ios and android. In my app when any ionic alert shown and when I click on background than the background functionality working. I want this to be disabled.
My alert box code is:
var alertPopup = $ionicPopup.alert({
title: 'Alert',
template: 'Please fill all fields first.'
})
.then(function(res) {
// some code
});
This will show an alert box on mobile but when i click on background side than background functionality working and I want to stop this.
For example : I have a form with multiple fields. I clicked on submit button and alert message is shown. When I click on "ok" button of alert the background input box which is behind the "ok" button also triggered. So I want to prevent this.
I searched for this issue but didn't found anything.
Place this option backdropDismiss inside your .create object and assign false to it
Try this one
HTML
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Popups
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="PopupCtrl">
<button class="button button-positive" ng-click="showAlert()">
Alert
</button>
</body>
</html>
app.js
angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {
// An alert dialog
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Alert',
template: 'Please fill all fields first.'
});
alertPopup.then(function(res) {
console.log('something');
});
};
Related
In previous iOS (12 and before) or any Android phone, we are able to use the [Add to Home Screen] in Safari (or any browser in Android) and hide the toolbars of a PWA by using the following techniques:
in Index.html:
<head>
<meta name="viewport" content="viewport-fit=cover, width=device-width,initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<link rel="apple-touch-icon" href="/customicon.png"/>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="BGBG01">
<meta name="apple-mobile-web-app-title" content="BGBG01">
<meta name="msapplication-starturl" content="/">
<link rel="manifest" href="manifest.json">
</head>
Create a file manifest.json in the root directory, with the following content:
{
"name": "App Full Name",
"short_name": "AppName",
"lang": "zh-CN",
"start_url": "/",
"scope": "/",
"display": "standalone"
}
However, since iOS 13, the above method does not work anymore, the toolbars persist and we need to click the aA on the left hand side of the Address Bar, then choose [Hide Tool Bar] EVERY TIME, in order to hide the toolbars of the PWA.
So how can we hide the toolbars?
Edit
Just want to emphasize that the following js code does not work as well:
<script>
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
/* iOS hides Safari address bar */
window.addEventListener("load",function() {
setTimeout(function() {
window.scrollTo(0, 1);
}, 1000);
});
}
</script>
or
<body>
<button id="goFS">Go fullscreen</button>
<script>
var goFS = document.getElementById("goFS");
goFS.addEventListener("click", function() {
document.body.requestFullscreen();
}, false);
</script>
</body>
And the solution provided by this link is also not working:
https://codepen.io/akikoo/pen/xdaic
Can be smart and efficiently for your case this method?
Using this minimal webmanifest the menu bar disappear for you too?
{
"name": "My Super App",
"short_name": "My App",
"display": "standalone",
"scope": "/my-app-path/",
"start_url": "/my-app-path/"
}
I have created a SAP UI5 Popover using Fragment. The fragment has XML code for opening the popover window.
My requirement is that when the popover is open and when the mouse pointer goes outside the popver (not mouse click outside), then the popover should close automatically.
Please help me with this.
You can use so called "Event Delegates".
See this little Demo:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.layout,sap.f"
data-sap-ui-theme='sap_fiori_3'></script>
<script>
var btn = new sap.m.Link({
text:'Hello World',
press: function(evt){
var pop = new sap.m.Popover({
title: "MyPopOver",
placement: "Bottom",
contentWidth: "200px",
content: [new sap.m.Text({text: "My Text"})]
})
pop.addEventDelegate({
onmouseout: function() {
pop.close()
}
}, this);
pop.openBy(evt.getSource());
}
});
btn.placeAt('content');
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>
Beware, this one already closes, if you touch a text inside the popup, but you'll get the generell idea.
The jQUery UI draggables sample named Default says that:
Enable draggable functionality on any DOM element.
But I'm not able to make them work on buttons elements.
I modified the Default sample to look like this:
I just changed the div element to a button one with type="button":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<button type="button" id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</button>
<div class="demo-description">
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
</div>
</body>
</html>
How I can make the draggables functionality work on a button element?
Using cancel: false seems to work for me.
$(function() {
$( "#draggable" ).draggable({
cancel: false
});
});
jsfiddle
I guess without the cancel only the default click event of the button fires and with cancel you prevent the default click event.
I am currently in the process of building an iOS app with ngCordova and Ionic. Part of the specification includes being able to access/play mp3 files stored inside the applications 'www' folder.
After experimenting I have been able to play a music file from an external URL, however when trying to use a locally stored mp3 I am having problems.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="editor">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Editor</h1>
</ion-header-bar>
<ion-content ng-controller="MusicController">
<button class="button" ng-click="play('www/elvis.mp3')">Play</button>
</ion-content>
</ion-pane>
</body>
</html>
And here is the Controller/App:
var editorApp = angular.module('editor', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
editorApp.controller("MusicController", function($scope, $cordovaMedia) {
$scope.play = function(src) {
var filePath = cordova.file.applicationDirectory + src;
var iOSPlayOptions = {
numberOfLoops: 2,
playAudioWhenScreenIsLocked : false
};
var media = $cordovaMedia.newMedia(filePath);
media.play(iOSPlayOptions);
};
});
When I "cordova build ios" and run this on a phone in xCode I get the following error:
2015-04-23 11:59:43.619 IonicProject[1487:375698] Unknown resource
'file:///private/var/mobile/Containers/Bundle/Application/FB22B00F-9020-46C9-BBA2-674009BD84F7/IonicProject.app/www/elvis.mp3'
You can use the direct audio tag for iOS app in ionic and no need to do these thing (these are required for Android app). Just write the following code:
HTML Code
<div ng-bind-html="audioCall()"></div>
Controller Code
$scope.audioCall = function () {
if ($scope.audioUrl) {
return $sce.trustAsHtml("<audio controls> <source src='" + $scope.audioUrl + "' type='audio/mpeg'/></audio>");
} else {
return "";
}
};
I am developing an application in ExtJs using Rails, wherein there's a tab panel. The main tab contains the list of buttons on the left . Clicking on each button would open a new tab, and would render a grid or form. When i add new record from the form, it is displayed at once on the grid, but if i close the tab panel and click on the button again, no grid is displayed.
How to load the grid along with the data again ?
P.S: when i manually refresh the browser, it's displayed again !!
Thanks in advance !!
MyCode :
//** MyUnit.js in Units controller**//
MyUnit = Ext.extend(MyUnitUi, {
initComponent: function() {
MyUnit.superclass.initComponent.call(this);
//Insert records...
var sbtn=Ext.getCmp('btnSave');
sbtn.on('click',function(){
var grid = Ext.getCmp('maingrid');
var unitname = Ext.getCmp('unitname').getValue();
var description = Ext.getCmp('description').getValue();
var frm=Ext.getCmp('myform');
Ext.Ajax.request({
url: '/units',
method: 'POST',
params: {'data[unitname]':unitname,'data[description]':description}
});
var grid=Ext.getCmp('maingrid');
grid.store.reload();
grid.show();
frm.hide();
});
});
//** MyViewport.js in Test1 Controller **//
var unit_bt =Ext.getCmp('btnUnit');
unit_bt.on('click', function(){
var unit_el =Ext.getCmp('tabcon');
var tab = unit_el.getItem('tab_unit');
if(tab)
{
tab.show();
}else{
unit_el.add({
title : 'Unit of Measurement',
html : 'I am new unit',
activeTab: 0,
closable : true ,
id: 'tab_unit',
autoLoad:{url:'/units',scripts:true}
//store.load({params:{start:0, limit:25}})
}).show();
}
});
//** Units/index.html **//
<!DOCTYPE html>
<!-- Auto Generated with Ext Designer -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unit.xds</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all-debug.js"></script>
<script type="text/javascript" src="MyUnit.ui.js"></script>
<script type="text/javascript" src="MyUnit.js"></script>
<script type="text/javascript" src="MyUnitStore.js"></script>
<script type="text/javascript" src="xds_index.js"></script>
</head>
<body></body>
</html>
#All : Thanks for your effort. Well my friend found the solution.
The problem got solved just by adding the following line of code in units.js again :
var grid=Ext.getCmp('maingrid');
grid.store.reload();