I am implementing loading as shown below. When I run the application on my iOS, the loading still shows as a spinner instead of a progress bar. Why is this happening in my app?
List.ts
async presentLoadingDefault() {
this.loading = await this.loadCtrl.create({
content: '<ion-progress-bar value="0.5"></ion-progress-bar>'
});
await this.loading.present();
}
async dismissLoader()
{
await this.loading.dismiss();
}
I'm afraid ionic 3 doesn't support ion-progress-bar component.
It is formally supported by ionic 4. Refer here.
In order to implement progress-bar in ionic 3, please follow this stackblitz tutorial.
progress-bar.html
<div class="progress-outer">
<div class="progress-inner" [style.width]="progress + '%'">
{{progress}}%
</div>
</div>
Related
I'm trying to find the corresponding code for puppeteer to automate a button press.
In a userscript it can be done easily via
document.getElementsByClassName("details-cart-button btn btn-primary btn-block btn-lg d-flex justify-content-center tp-button ")[0].click();
However im struggling to replicate the same behavior using puppeteer.
What I tried so far:
//Try 1:
await page.click('a[class="details-cart-button btn btn-primary btn-block btn-lg d-flex justify-content-center tp-button "]');
//Try 2:
await page.$eval('a[class^="details-cart-button"]', el => el.click());
//Try3:
const form = await page.$('id#add-to-cart-form');
await form.evaluate( form => form.click() );
//Try4:
await Promise.all([
await page.click('#add-to-cart-form > a.details-cart-button.btn.btn-primary.btn-block.btn-lg.d-flex.justify-content-center.tp-button')
]);
None of the methods seem to work sadly and I have no idea how to get it done.
Could someone be kind enough to point me in the right direction?
Thanks a lot in advance!
The below code should work.
const puppeteer = require('puppeteer');
(async ()=>{
const browser = await puppeteer.launch({headless:false});
const [page] = await browser.pages();
await page.goto('https://www.alternate.de/html/product/1685585');
const acceptCookiesSelector='button[class="cookie-submit-all"]';
await page.waitForSelector(acceptCookiesSelector);
await page.click(acceptCookiesSelector);
const buySelector='a[class="details-cart-button btn btn-primary btn-block btn-lg d-flex justify-content-center tp-button "]';
await page.waitForSelector(buySelector);
await page.click(buySelector);
})();
I will try to explain why your code didn't work.
The click method that you use on the page scrolls into view the element that you want to click and uses the left mouse button and clicks on it, in your case, the button was in the view, but it was overshadowed by the accept-cookie banner, so all you have to do is click on accept the cookies to get rid of that banner then click on the buy button and it will work.
Your first example worked because click method in the browser console is a different method than the one used on Puppeteer, and it worked because it doesn't rely on the mouse to generate the click.
I'm using Ionic Photo Viewer to show images in full screen. My HTML is:-
<ion-slides>
<ion-slide col-12 *ngFor="let image of businessImages | async">
<div class="main-slider-image" [defaultImage]="'assets/imgs/default_image_slider.png'" [lazyLoad]="image.thumb400Url" [offset]="100" (click)="openImage(image.originalUrl)">
</div>
</ion-slide>
</ion-slides>
On TypeScript:-
openImage(url) {
this.photoViewer.show(url, "", { share: false });
}
On Android is working like this:-
Click here to see Android version
On the other hand, on the iPhone is working like this:-
Click here to see iPhone version
On the iPhone, the photo viewer doesn't open the photo. I've tried:-
openImage(url) {
this.photoViewer.show(url);
}
But this also didn't work. If you've any idea how to solve this issue please share. Thank you
This issue is really crazy and had to spend lots of time to figure out the solutions. The solutions is all the parameters in the 'options' variable are required.
Follow this:
const options = {
share: true, // default is false
closeButton: true, // default is true
copyToReference: true, // default is false
headers: "", // If it is not provided, it will trigger an exception
piccasoOptions: { } // If it is not provided, it will trigger an exception
};
this.photoViewer.show(url, "", options);
At least I had to revert to 1.1.11 (found from NPM) to show IOS properly. For Android, latest version seemed to work.
Share did not seem to work for IOS in 1.1.11. In Android latest photo-viewer plugin it seemed to work. So now I have:
private viewPhoto(url: string): void {
if (url && url != 'assets/images/profile.png') {
this.photoViewer.show(url, '', { share: this.platform.is('android') });
}
}
And.. I think the correct place to discuss these is https://github.com/sarriaroman/photoviewer/issues.
And another thing, I'm considering to use another plugin, https://github.com/Riron/ionic-img-viewer. Some of the photoviewer issues had a link to this but haven't tried it yet.
I have the same error, and im solve with this
ionic cordova plugin rm com-sarriaroman-photoviewer
ionic cordova plugin add com-sarriaroman-photoviewer#1.1.18
npm install --save #ionic-native/photo-viewer
on your function, if device using ios, decodeURIComponent was the answer
showImage(url,title) {
var options = {
share: true, // default is false
closeButton: true, // iOS only: default is true
copyToReference: true // iOS only: default is false
};
if (this.platform.is("ios")) {
url = decodeURIComponent(url);
}
this.photoViewer.show(url, title, options);
}
I am working on Ionic and I have noticed that while my app's webview is being loaded, black screen is shown.
Is there a way to replace that black screen with a picture or at least to style to different color?
Thank you in advance
I found a solution. I read the doc of github.com/apache/cordova-plugin-splashscreen and was able to find this line. I added that line to config.xml. If set false, it will launch splashcreen everytime.
Yes this is very easy. Its called splash screen.Take a look. if you want to auto create this screens from one image take a look on thisImage Generation, if you need progress bar also then please thake a look on this link
angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
$scope.show = function() {
$ionicLoading.show({
template: 'Loading...'
}).then(function(){
console.log("The loading indicator is now displayed");
});
};
$scope.hide = function(){
$ionicLoading.hide().then(function(){
console.log("The loading indicator is now hidden");
});
};
});
Thank you for look on this question.
How to show spinner while $http post request is completed in Ionic framework?
you can get all the details from ionic spinner here
in your html template file, use ionic spinner like this.
<ion-spinner icon="spiral" ng-if="isLoading"></ion-spinner>
and in your controller file, you can make spinner work like this,
$scope.isLoading = true;
$http.post(url, body,config).succcess(function(res) {
$scope.isLoading = false;
})
.error(function(err) {
$scope.isLoading = false;
});
I am trying to write a ionic app based on the sidemenu basis. One view that I am creating is a login view on which the sidemenu should be deactivated. Therefore I need the dependency variable $ionicView.
This leads to the error
Unknown provider: $ionicViewProvider <- $ionicView <- LoginController
The same error appears when trying to access $ionicConfigProvider.
Login.module.js:
angular.module("Login", ['ionic']);
Login.Controller.js:
angular.module("Login")
.controller("LoginController", function($ionicSideMenuDelegate, $ionicView){
var thisRef = this;
thisRef.Username = "";
thisRef.Password = "";
$ionicView.beforeEnter(function() {
$ionicSideMenuDelegate.canDragContent(false);
});
$ionicView.beforeLeave(function(){
$ionicSideMenuDelegate.canDragContent(true);
});
});
i have the same problem with my ionic sidemenu app.
To fix this problem i followed the ionic documentation:
Ionic View
And update my ionic bundle version lib to the final version.
You can update in bower.json file, change the version to ionic-bower#1.3.1"
See this codepen to help you
<script src="//code.ionicframework.com/1.3.1/js/ionic.bundle.js"></script>
Code Pen
From what I conclude from the Ionic forum (http://forum.ionicframework.com/t/how-to-use-ionicview-with-ionic-nightly/13666), is that you don't inject $ionicView directly in your controller, but rather use it in your controller.
angular.module("Login")
.controller("LoginController", function($ionicSideMenuDelegate){
$scope.$on('$ionicView.beforeEnter', function() {
//Do whatever you want here
});
var thisRef = this;
thisRef.Username = "";
thisRef.Password = "";
$ionicView.beforeEnter(function() {
$ionicSideMenuDelegate.canDragContent(false);
});
$ionicView.beforeLeave(function(){
$ionicSideMenuDelegate.canDragContent(true);
});
});
Read the documentation on what is possible with $ionicView: http://ionicframework.com/docs/nightly/api/directive/ionView/ under 'View LifeCycle and Events'