Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all 49526 articles
Browse latest View live

ReferenceError: VuTotpSdk is not defined (Param not defined)

$
0
0

@panunez wrote:

Buenas Noches, estoy tienendo un error al ejecutar mi app Alguien me podria ayudar??. Tengo una funcion en un archivo .js y la exporto de la siguiente manera en mi archivo .ts

import * as VuTotpSdk from ‘…/…/…/assets/js/VuServer’;

declare const VuTotpSdk: any; //Declaracion de parametro

@Component({

selector: ‘app-agregar-nuevo’,

templateUrl: ‘./agregar-nuevo.page.html’,

styleUrls: [’./agregar-nuevo.page.scss’],

})

export class AgregarNuevoPage implements OnInit {

constructor( private http: HttpClient) {

}

ngOnInit() {

}

AgregarNuevo() {

VuTotpSdk.getEncryptedSeed(this.serverUrl, this.cupon, this.code, this.seedCallback);

}
}

Esta es la funcion que tengo definida en el archivo .js

(function (VuTotpSdk, $, undefined) {

/**

@param serverUrl

@param cupon

@param code

@param seedCallback

*/

VuTotpSdk.getEncryptedSeed = function(serverUrl, coupon, code, onSuccess, onFailure) {

var requestUrl = serverUrl + "/vuserver/activation.php?cupon=" + coupon;

requestUrl += (code != undefined && code != null && code != "") ? "&bank=" + code : "";

requestUrl += "&callback=?";

$.ajax({

  url: requestUrl,

  timeout: 20000,

  dataType: "json",

  success: function (data) {

    if (onFailure != undefined || onFailure != null) {

      if (data.indexOf("URL Incorrecta - contacte Soporte Security") >= 0) {

        onFailure("Código de Asociación incorrecto");

      } else {

        onSuccess(data[0]);

      }

    } else {

      onSuccess(data[0]);

    }

  },

  error: function (jqXHR, textStatus, errorThrown) {

    onFailure("Código de Asociación incorrecto");

  }

});

};

Posts: 2

Participants: 2

Read full topic


UIWebview - Apple Deprecated API usage. Apple store warning message UIWebview API deprecation

$
0
0

@Alexandar wrote:

Hi All,

As mentioned here https://ionicframework.com/blog/understanding-itms-90809-uiwebview-api-deprecation, I have updated cordova-ios to 5.1.1 latest version and updated all my Cordova plugins. Still, I got the same warning message from the Apple side. Do you have any idea or I have missed anything to update or which plugin throws that deprecation message?

updated plugins list

call-number 0.0.2 “Cordova Call Number Plugin”
cordova-android-play-services-gradle-release 4.0.0 “cordova-android-play-services-gradle-release”
cordova-plugin-app-version 0.1.9 “AppVersion”
cordova-plugin-background-mode 0.7.3 “BackgroundMode”
cordova-plugin-badge 0.8.8 “Badge”
cordova-plugin-camera 4.1.0 “Camera”
cordova-plugin-device 2.0.3 “Device”
cordova-plugin-email-composer 0.9.2 “EmailComposer”
cordova-plugin-file 6.0.2 “File”
cordova-plugin-file-opener2 2.2.1 “File Opener2”
cordova-plugin-file-transfer 1.7.1 “File Transfer”
cordova-plugin-firebase 2.0.5 “Google Firebase Plugin”
cordova-plugin-globalization 1.11.0 “Globalization”
cordova-plugin-inappbrowser 3.2.0 “InAppBrowser”
cordova-plugin-ionic 5.4.6 “cordova-plugin-ionic”
cordova-plugin-ionic-keyboard 2.1.3 “cordova-plugin-ionic-keyboard”
cordova-plugin-ionic-webview 4.1.3 “cordova-plugin-ionic-webview”
cordova-plugin-local-notification 0.9.0-beta.2 “LocalNotification”
cordova-plugin-mauron85-background-geolocation 3.0.3 “CDVBackgroundGeolocation”
cordova-plugin-network-information 2.0.2 “Network Information”
cordova-plugin-safariviewcontroller 1.6.0 “SafariViewController”
cordova-plugin-splashscreen 5.0.3 “Splashscreen”
cordova-plugin-statusbar 2.4.3 “StatusBar”
cordova-plugin-touch-id 3.3.1 “Touch ID”
cordova-plugin-whitelist 1.3.4 “Whitelist”
cordova-sqlite-storage 3.4.1 “Cordova sqlite storage plugin - cordova-sqlite-storage plugin version”

config.xml

    <access origin="http://localhost:8080/*" />
    <allow-navigation href="http://localhost:8080/*" />
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <preference name="WKWebViewOnly" value="true" />

Ionic Info:

Ionic:

Ionic CLI : 6.3.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 4.11.4
@angular-devkit/build-angular : 0.803.21
@angular-devkit/schematics : 8.3.0
@angular/cli : 8.3.0
@ionic/angular-toolkit : 2.0.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, ios 5.1.0
Cordova Plugins : cordova-plugin-ionic 5.4.6, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.3, (and 20 other plugins)

Utility:

cordova-res (update available: 0.11.0) : 0.6.0
native-run (update available: 0.3.0) : 0.2.8

System:

Android SDK Tools : 26.1.1 (/Users/sys-user/Library/Android/sdk)
ios-deploy : 1.9.4
ios-sim : 8.0.2
NodeJS : v10.16.1 (/usr/local/bin/node)
npm : 6.9.0
OS : macOS Catalina
Xcode : Xcode 11.2.1 Build version 11B500

Posts: 1

Participants: 1

Read full topic

Cannot read property 'toDataURL' of undefined SignaturePad

$
0
0

@anateixeira wrote:

I don’t know what I am doing wrong but I can’t figure out what’s wrong.

I am trying to get a basic64 img but the signaturepad is undefined lol. Why? I think I am doing everything right. I get the error

Cannot read property 'toDataURL' of undefined

The signature pad appears but when I try to get the image it’s undefined…

Here’s my code:

TS

`
import { Component, ViewChild } from '@angular/core';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';
import { Platform } from '@ionic/angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-signature-pad',
  templateUrl: './signature-pad.page.html',
  styleUrls: ['./signature-pad.page.scss'],
})
export class SignaturePadPage {

  @ViewChild(SignaturePad) signaturePad: SignaturePad;

  signature: string = '';
  isDrawing = false;
  width: any;
  height: any;

  private signaturePadOptions: object = {
    minWidth: 2,
    canvasHeight: window.innerHeight / 3,
    canvasWidth: window.innerWidth / 1.2,
    backgroundColor: '#ffffff',
    penColor: '#000000',
  };



  constructor(platform: Platform, private router: Router) {
    platform.ready().then((readySource) => {
      this.width = platform.width();
      this.height = platform.height();
    });
  }


  canvasResize() {
    const canvas = document.querySelector('canvas');
    this.signaturePad.set('minWidth', 1);
    this.signaturePad.set('canvasWidth', canvas.offsetWidth);
    this.signaturePad.set('canvasHeigth', canvas.offsetHeight);
  }


  drawComplete() {
    this.isDrawing = false;
  }

  drawStart() {
    this.isDrawing = true;
  }

  goToPage() {
    var sig_object: any = {'desc': history.state.data.desc_sigpad,
                            'signaturepad': this.signature};
    this.router.navigate(['/pg'], { state: { data: { sigpad: sig_object}}});

  }

  savePad() {

    this.signature = this.signaturePad.toDataURL();


    this.goToPage();

    this.signaturePad.clear();
  }
  clearPad() {
    this.signaturePad.clear();
  }
}

HTML

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start" defaultHref="/pg">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title style="text-align: center">Signature</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div style="margin-top: 20%; padding: 0">
    <ion-grid lines="none" style="margin-top: 50px">
      <ion-row [ngClass]="{'drawing-active': isDrawing}">
        <ion-col></ion-col>
        <ion-col style="border: 1px solid #000000; padding: 5px">
          <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
        </ion-col>
        <ion-col></ion-col>
      </ion-row>
      <br>
      <ion-row>
        <ion-col></ion-col>
        <ion-col>
          <ion-button size="large" color="danger" expand="full" (click)="clearPad()">Clear</ion-button>
        </ion-col>
        <ion-col>
          <ion-button size="large" style="color: secondary" expand="full" (click)="savePad()">Save</ion-button>
        </ion-col>
        <ion-col></ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>

I would be very very thankful. Please help me.

Thank you

Posts: 1

Participants: 1

Read full topic

Ionic5 React – Hide Header on scroll

$
0
0

@florianbepunkt wrote:

I read through a lot of posts regarding hiding a header on scroll, but they all deal with angular and Ionic 4. So I tried to implement this on my own.

For good performance I want to use translateY to move the header up on scroll. But the content below is not following, leaving a gap at the top.

Any idea how to solve this, so that the content moves up, when I move the header up?

Posts: 1

Participants: 1

Read full topic

Ionic 4 capacitor upload image to server

$
0
0

@Pratikjaiswa15 wrote:

I have used the capacitor plugin to let user capture images and then we can store it in our server(spring).

async takePicture() {
    const image = await Plugins.Camera.getPhoto({
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Prompt, 
    });


    this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));

    console.log(this.photo)
    console.log(image)

  }

Now , I want to store image with some other data like name, etc.

servie.ts

httpOptions2 = {
    headers: new HttpHeaders({ 'Content-Type': 'multipart/form-data' })
  };

addReport (user): Observable<any> {
    return this.http.post<any>(this.url , user,this.httpOptions2 )
  }

page.ts

let report = {
        address : this.address.value, // other data 
        image : this.photo,

      }
      console.log(report)

      this.reportService.addReport(report).subscribe(data =>{
        console.log(data)
      })

Input type at the server for the image is the file

I have set ‘Content-Type’: ‘multipart/form-data’.

But at the server-side image is not getting stored?

What am I doing wrong?

Thank you in advance

Posts: 1

Participants: 1

Read full topic

Displaying an array in html

$
0
0

@NthabyMogoboya wrote:

I get this error when i try to display in my html file.
Error: Error trying to diff ‘[object Object]’. Only arrays and iterables are allowed

service.ts

private _addProduct = “http://localhost:4000/viewMenu”;
getItems(){
return this.httpClient.get(this._addProduct);
}

page.ts

menuList = ;
ngOnInit() {
this.cartService.getItems().subscribe(data => {
console.log(data);
this.menuList = data;
console.log(this.menuList);
});

page.html

<ion-card *ngFor=“let p of menuList”>
{{p.item_name}}

{{p.item_price | currency:‘R’}}

Posts: 1

Participants: 1

Read full topic

Vertically align text ion grid

$
0
0

@skinnyA wrote:

Hello, I am trying to vertically allign some text but it seems impossible I do not know why

<ion-content padding>

  <ion-grid *ngFor="let dia of tiempo">
    <ion-row class="ion-justify-content-around">
      <ion-col *ngIf="dia.diaSemana == 'Wed'" >
        <div>
          Miércoles <img src="../../assets/images/uparrow16.png"/>
          {{dia.tempMaxima}}&nbsp;&nbsp;
          {{dia.tempMinima}}
        </div>
      </ion-col>
      
    </ion-row>
  </ion-grid>    

</ion-content>

This is my scss

.ion-justify-content-around {
    justify-content: space-around;

}

Basically, im trying to have on the left some text and on the middle and on the left some more text
I hope I explained myselft well
Thank you

Posts: 1

Participants: 1

Read full topic

Ion-tab-button selected bug when using variable in tab attribute

$
0
0

@zentodh wrote:

Hi this is my first post here. I’ve been trying to get the tabs working for some time now. I’ve got 4 routes:
/tab/notifications
/tab/guests
/tab/profile
/tab/event/:id <-- Now here is where the problem lies

When I click on this tab button, I do get redirected without any errors, but the problem is. The button is not highlighted as active/selected.

I have a feeling I’m doing something wrong but I can’t really figure out what. Any suggestions for a solution? Thanks for the replies in advance!

Posts: 1

Participants: 1

Read full topic


Ionic 4 chip in input

$
0
0

@samsuffi wrote:

Hi everyone,
How do I put ion-chip in a ion-input?
I wanted to make a chat bar like Discord with @everyone or #here.
image
But when I try to put html in the input, I can’t write in anymore…
In addition, I wanted to include the code syntax highlighting: I tried with ngx-highlightjs and ion-prism but it failed…
Like this:
image
Does someone have an idea how to do?

Posts: 1

Participants: 1

Read full topic

Getting data from Modal Controller

$
0
0

@sj9 wrote:

Hello
for getting data in opened modal in official documentation was written this example

async presentModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    componentProps: {
      'firstName': 'Douglas',
      'lastName': 'Adams',
      'middleInitial': 'N'
    }
  });
  return await modal.present();
}

To get the data passed into the componentProps, either set it as an @Input or access it via NavParams on the ModalPage:

export class ModalPage {

  // Data passed in by componentProps
  @Input() firstName: string;
  @Input() lastName: string;
  @Input() middleInitial: string;

  constructor(navParams: NavParams) {
    // componentProps can also be accessed at construction time using NavParams
    console.log(navParams.get('firstName'));
  }

}


Posts: 1

Participants: 1

Read full topic

Images from assets not displayed on IonImg

$
0
0

@unzip0 wrote:

Hi,
i’m trying to show an image from assets folder but is not working.

· Image path:
image

· IonImg src:

<IonImg class="logo" src="assets/images/rgm.jpg"/>

I’m newbie using Ionic, any help it’s welcome.
Thanks! :slight_smile:

Posts: 1

Participants: 1

Read full topic

Date translation

$
0
0

@sudhaHalemani wrote:

Hi i have this english date ‘MON MAR 30’, i need to translate into french and spanish when the app language
change to french r spanish.
here activity.label contains the english date(‘MON MAR 30’).
here actually translation is happening but output is wrong, its showing wrong day with date.
so is there any work arround which i can translate.

.html

{{ (activity.label == ‘Today’ ? ‘TODAY’ : ( activity.label | date: ‘EEE MMM d’: null : translate.currentLang) ) | translate}}

Posts: 1

Participants: 1

Read full topic

Navigation Controller replace Page

$
0
0

@lsantaniello wrote:

Hi all,
I have a particular need. I try to explain my problem with an example.

Page A => Page B => Page C

current:
Page A => Page B => Page C => Page D

need:
Page A => Page B => Page D

User complete a task on Page C and He will be redirected to Page D

On Page D I want to enable back button to Page B because Page C is a expired Page

I hope that the problem is clear

Thanks

Posts: 1

Participants: 1

Read full topic

Build failing on Mac 'stdout maxBuffer length exceeded'

$
0
0

@tofra wrote:

When I run cordova build ios --verbose I get the following error:

.......
This app does not have additional resource files defined
Prepared iOS project successfully
No scripts found for hook "after_prepare".
No scripts found for hook "before_compile".
stdout maxBuffer length exceeded
RangeError [ERR_CHILD_PROCESS_STDIO_MAXBUFFER]: stdout maxBuffer length exceeded
    at Socket.onChildStdout (child_process.js:354:14)
    at Socket.emit (events.js:198:13)
    at addChunk (_stream_readable.js:288:12)
    at readableAddChunk (_stream_readable.js:265:13)
    at Socket.Readable.push (_stream_readable.js:224:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:94:17)

Any idea what could be the cause? I removed the platforms directory already… I think it is happening since I upgraded XCode to 11.4 a couple of days ago.

I tested a new app, it is showing the same error

Ionic:

   Ionic CLI                     : 6.4.0 (/Users/***/.nvm/versions/node/v10.16.3/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 4.11.2
   @angular-devkit/build-angular : 0.803.12
   @angular-devkit/schematics    : 8.3.12
   @angular/cli                  : 8.3.12
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 16 other plugins)

Utility:

   cordova-res (update available: 0.11.0) : 0.8.1
   native-run (update available: 0.3.0)   : 0.2.9

System:

   Android SDK Tools : 26.1.1 (/Users/***/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v10.16.3 (/Users/***/.nvm/versions/node/v10.16.3/bin/node)
   npm               : 6.14.3
   OS                : macOS Catalina
   Xcode             : Xcode 11.4 Build version 11E146

Posts: 3

Participants: 2

Read full topic

Ionic 4 react enterAnimation

$
0
0

@divyanshugarg36 wrote:

Hi, I am making a IOS app using Ionic 4 and React. I want to animate my popover https://ionicframework.com/docs/api/popover using enterAnimation attribute, but couldn’t make it work. Can anyone please provide any example of popover animation with enterAnimation using Ionic 4 and React? There are some examples of the popover animation in Angular out there, but couldn’t find any React example.
Here’s my code

It would be helpfull if i can get a full example to use animations with this popover maybe update docs it will be much more helpfull

import React, { useState } from ‘react’;
import { IonPopover } from ‘@ionic/react’;

export const PopOver: React.FC = ({ children, showPopover, setShowPopover, popOverProps }) => {
const [popoverEvent, setPopoverEvent] = useState();
const button = children[0];
const content = children[1];
return (
<>
{React.cloneElement(button as React.ReactElement, {
onClick: (e: any) => {
e.persist();
setPopoverEvent(e);
setShowPopover(!showPopover);
}
})}
<IonPopover
mode=“ios”
animated
enterAnimation={(e: any) => { //what to do here? }}
isOpen={showPopover}
event={popoverEvent}
showBackdrop={false}
onDidDismiss={() => setShowPopover(false)}
{…popOverProps}
>
{content}

</>
);
};

PopOver.defaultProps = {
showPopover: false,
setShowPopover: () => { },
children: ,
popOverProps: {}
};

Posts: 1

Participants: 1

Read full topic


How to remove lines from ion-divider / make header sticky?

$
0
0

@ashleylaverick1 wrote:

My ultimate aim is to have my header elements sticky and push one another off screen… but I am somewhat bodging it by nesting them within a ion-item-divider.

Thus, I am looking to remove the lines from the ion-divider, but cannot figure out how.

Unlike the standard ion-item there is no “lines” attribute.

Cheers

Posts: 1

Participants: 1

Read full topic

Image orientation auto changing

$
0
0

@VigneshBalakrishnan wrote:

Hi all,
I’m selecting file using file chooser but some of the images are auto rotating to wrong orientation. When i’m looked for this issue i found exif orientation issue. Can any one help me to handle this thing, thanks.

Posts: 1

Participants: 1

Read full topic

IonInput for files? v5

$
0
0

@ccssmnn wrote:

I want to allow the users to upload images in my PWA. It seems that the IonInput is a wrapper for HTML input, but does not allow file inputs.

Combining <input /> with <label> in standard HTML does the job but looks ugly.

In the Docs i can only find file upload in the native components.

Posts: 1

Participants: 1

Read full topic

Assets with special characters (umlauts, ä, ö, ü) not served

$
0
0

@fiedl wrote:

When running ionic lab with ionic serve --lab, assets that have special characters like ä, ö, ü in the file name or folder name are not served.

http://localhost:8100/assets/a.jpg — works
http://localhost:8100/assets/ä.jpg — does not work
http://localhost:8100/assets/a/a.jpg — works
http://localhost:8100/assets/ä/a.jpg — does not work
http://localhost:8100/assets/a/ä.jpg — does not work

When it does not work, it just redirects to http://localhost:8100 rather than serving the asset.

This did work in ionic-v3, but is an issue with ionic-v5.

Does anyone know why this issue exists or how to resolve it? Thänks!

Posts: 1

Participants: 1

Read full topic

Pipe declared into 2 different modules

$
0
0

@lsantaniello wrote:

Hi all,
I created my custom Pipe but when I build for android platform (ionic cordova build android --prod --release --verbose), an error accurs. It works successfully when I try my app /ionic3) into browser using ionic serve command.

Type CountdownPipe in ../src/pipes/countdown/countdown.ts is part of
            the declarations of 2 modules: GruppiAcquistoPageModule in
            ../src/pages/gruppi-acquisto/gruppi-acquisto.module.ts and PipesModule
            in ../src/pipes/pipes.module.ts! Please consider moving CountdownPipe
            in ../src/pipes/countdown/countdown.ts to a higher module that imports
            GruppiAcquistoPageModule in
            ../src/pages/gruppi-acquisto/gruppi-acquisto.module.ts and PipesModule
            in ../src/pipes/pipes.module.ts. You can also create a new NgModule
            that exports and includes CountdownPipe in
            ../src/pipes/countdown/countdown.ts then import that NgModule in
            GruppiAcquistoPageModule in
            ../src/pages/gruppi-acquisto/gruppi-acquisto.module.ts and PipesModule
            in ../src/pipes/pipes.module.ts.

My files:

src/pipes/pipes.module.ts
src/pipes/countdown/countdown.ts
src/app/app.modules.ts
src\pages\gruppi-acquisto\gruppi-acquisto.html
src\pages\gruppi-acquisto\gruppi-acquisto.module.ts
src\pages\gruppi-acquisto\gruppi-acquisto.scss
src\pages\gruppi-acquisto\gruppi-acquisto.ts

gruppi-acquisto.ts

declarations: [
    GruppiAcquistoPage,
    CountdownPipe
  ],

pipes.module.ts

import { NgModule } from '@angular/core';
import { CountdownPipe } from './countdown/countdown';
@NgModule({
	declarations: [CountdownPipe],
	imports: [],
	exports: [CountdownPipe]
})
export class PipesModule {}

countdown.ts

@Pipe({
  name: 'countdown',
})
export class CountdownPipe implements PipeTransform {
  transform(dateStr: string, ...args) {
    ....
  }
}

I tried to read similar question on the forum but I can’t solve my issue. I tried to delete pipes.module.ts file and declare CountdownPipe into app.module.ts file but the solve is not solved

Could you please help me to solve?

Thanks

Posts: 3

Participants: 2

Read full topic

Viewing all 49526 articles
Browse latest View live