I am working on a ionic 3 app and I want to open pdf file i putted in "assets/pdf" folder.
the probleme is win i click the button nothing happens
this is my code:
<ion-content padding>
<button ion-button (click)="openPdf()">open pdf </button>
</ion-content>
and this is typeScript:
openPdf(){
const options: DocumentViewerOptions = {
title: 'My PDF'
}
this.document.viewDocument('assets/png2pdf.pdf', 'application/pdf',
options)
}
i have tried many solutions nothing works
ps: i'm using an emulator
Please give me some suggestion
i found the solution
openPdf(){
let path = this.file.applicationDirectory + 'www/assets'
if(this.platForm.is('android')){
let fackNama = Date.now();
this.file.copyFile(path, 'omra_otla.pdf', this.file.dataDirectory, `${fackNama}.pdf`).then(result => {
this.Fileopner.open(result.nativeURL, 'application/pdf')
})
}else {
const options: DocumentViewerOptions = {
title: 'My PDF'
}
this.document.viewDocument(`${path}/omra_otla.pdf`, 'application/pdf', options)
}
}
Related
This question already has answers here:
NextJS getStaticProps() never called
(5 answers)
Next.js, getStaticProps not working with component but does with page
(1 answer)
Closed 5 months ago.
When I try to import into a next.js page the container div is the only thing showing up, am I importing or exporting incorrectly? If I use the Component as a page itself, everything displays correctly but I cant add a page wide container for the blogposts
Component
import { GraphQLClient } from 'graphql-request';
export async function getStaticProps() {
const hygraph = new GraphQLClient(
'https://api-us-east-1.hygraph.com/v2/cl7r7p82h60bn01uh5lvrb3ja/master'
);
const { blogposts } = await hygraph.request(
`
{
blogposts {
slug
title
content{
text
}
}
}
`
);
return {
props: {
blogposts,
},
};
}
export default ({ blogposts }) =>
blogposts?.map(({ slug, title, content }) =>
(
<div class="card blog-post" style={{width: "auto"}}>
<div class="card-body">
<h5 class="card-title text-center">{title}</h5>
<p class="card-text">{content.text}</p>
</div>
</div>
));
From what I understand I am correctly importing the above component by naming it in the page import but obviously I am missing something or doing something incorrectly
Page
import NewsConst from "../components/newscmp"
export default function News() {
return (
<div className='container-fluid abt-cnt news-cnt'>
<NewsConst />
</div>
)
}
I am new with ionic, I'm trying to integrate a google map in my application with ionic-native-googlemaps. In my browser it works fine but when I build for android or ios I have a blank page, and if I look at the console of google chrome at url chrome://inspect/device I don't have an error.
This is my typescript file
import {AfterViewInit, Component, OnInit} from '#angular/core';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
MarkerOptions,
Marker,
Environment, LatLng, GoogleMapOptions
} from '#ionic-native/google-maps/ngx';
import { ActionSheetController, Platform, AlertController } from '#ionic/angular';
#Component({
selector: 'app-favoris',
templateUrl: './favoris.component.html',
styleUrls: ['./favoris.component.scss'],
})
export class FavorisComponent implements OnInit, AfterViewInit {
map: GoogleMap;
constructor(
public alertController: AlertController,
public actionCtrl: ActionSheetController,
private platform: Platform
) {
}
ngOnInit() {
// await this.platform.ready();
// await this.loadMap();
}
ngAfterViewInit() {
this.platform.ready().then( () => {
this.loadMap();
});
}
loadMap() {
const map = GoogleMaps.create('map');
map.one( GoogleMapsEvent.MAP_READY ).then( ( data: any ) => {
const coordinates: LatLng = new LatLng( 45.649864, -73.584213 );
const position = {
target: coordinates,
zoom: 14
};
map.animateCamera( position );
const markerOptions: MarkerOptions = {
position: coordinates,
// icon: "https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png",
title: 'Hello California',
draggable: true
};
const marker = map.addMarker( markerOptions )
.then( ( markesr: Marker ) => {
markesr.showInfoWindow();
});
});
}
}
And in my html file I have
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>List</ion-title>
</ion-toolbar>
<ion-toolbar class="new-background-color">
<ion-title class="text-center text-white">Favoris</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="map" style="height:100%;"></div>
</ion-content>
</ion-app>
I have searched for a solution everywhere but I have not found anything.
finaly i solve my problem, if someone have a same problem later,
just downgrade a version ionic-google maps and ionic core like this
"#ionic-native/core": "^5.24.0",
"#ionic-native/google-maps": "^5.0.0-beta.20",
After that look if your div with who contains google if is have a 500px height or more if it's ok, your map workly fine and you need to paid google map too.
you don't have to downgrade googleMap .
there is two way to solve this problem :
First you can put the tag DIV outside ion-content
<div id="map" style="height:100%;"></div>
<ion-content>
</ion-content>
OR you can add style css to put the content background transparant to overlaye the map screen.
In my case it was showing right on Android but no IOS. API key was ok. The map was there, under the html, but ion-content was not transparent.
Try adding this to your global scss or css file.
._gmap_cdv_ {
--background: transparent !important;
}
For iOS and Chrome, if your application has 'location' function. Apple is serious about location security aspect and Google Chrome is also somewhat serious about it. Hence:
Step 1. In your Mac enable 'Location Services' under 'Security and Privacy' :
Navigate to 'Settings'=>'Security & Privacy'=>Privacy Tab=>Select
Location Services ; click the padlock to make changes=>make sure
checkbox is checked for Google Chrome
Step 2. In Google Chrome go
to Settings=>privacy & Security=>make sure localhost:8100 is in the
'allowed' list=>click on it and on the next tab 'Reset permissions'
and select 'Allow' in the drop-down box for location property.
That should do it.
i am using ionic - phonegap-plugin-barcodescanner": "^7.1.2" for barcode scanning, but when i am clicking on scan button - camera looks like below on android emulator.
https://i.stack.imgur.com/e1xL4.png
https://i.stack.imgur.com/NS5IB.png
here is my code:
scan() {
this.options = {
preferFrontCamera: true,
showFlipCameraButton: true,
prompt: "scan the barcode here 111"
}
this.barcodeScanner.scan(this.options).then((barcodeData) => {
this.data = barcodeData;
console.log(barcodeData);
}, (err) => {
this.toast.show(err, '5000', 'center').subscribe(
toast => {
console.log(toast);
}
);
});
}
index.html has the below..
< ion-app style="background: none transparent !important;">
can anyone please help whats wrong with the code.
Try using this plugin
<plugin spec="https://github.com/Telerik-Verified-Plugins/BarcodeScanner.git" source="git" />
I am using Liferay UI for popup window in Liferay 6.2. I am getting the pop up but i can not close it.Why it is not working Liferay 6.2.
Below is my code which is written on parent page:
AUI().ready(function(A) {
AUI().use('aui-dialog', 'aui-io', function(A) {
var url = '<%=testPopupURL.toString()%>';
Liferay.Util.openWindow(
{
dialog: {
cache: false,
width:800,
modal: true
},
id:'<portlet:namespace/>shahbaj',
uri: url
}
);
Liferay.provide(
window,
'<portlet:namespace />closePopup',
function(popupIdToClose) {
var A = AUI();
alert(popupIdToClose);
A.DialogManager.closeByChild('#' + popupIdToClose);
},
['aui-base','aui-dialog','aui-dialog-iframe']
);
});
});
Below code is pop-up page content:
<aui:button name="YES" value="YES" onClick="javascript:yes();"/>
<aui:script>
function yes(){
alert('pop');
Liferay.Util.getOpener().<portlet:namespace />closePopup('<portlet:namespace />shahbaj');
}
</aui:script>
Please help me out!!
Add a Cancel / Close button with following script in your jsp.
<input type="button" onclick="hidePopup();" value="Cancel" />
function hidePopup(){
AUI().ready('aui-dialog', function(A){
A.DialogManager.hideAll();
});
}
This worked!!
AUI().ready(function(A) {
AUI().use('aui-dialog', 'aui-io', function(A) {
var url = 'http://localhost/url';
Liferay.Util.openWindow(
{
dialog: {
cache: false,
width:800,
modal: true
},
id:'shahbaj',
uri: url
}
);
Liferay.provide(
window,
'closePopup',
function(popupIdToClose) {
var dialog = Liferay.Util.getWindow(popupIdToClose);
dialog.destroy(); // You can try toggle/hide whatever You want
},
['aui-base','aui-dialog','aui-dialog-iframe']
);
});
});
Simpler Solution
A much simpler solution is to use the close-panel class name.
<aui:button cssClass="close-panel" type="cancel" value="close" />
No additional JavaScript required.
I am working with Liferay 7.2 and I have used the next code in JavaScript:
Liferay.fire('closeWindow',{id:'idPopup'});
in your case idPopup = 'portlet:namespace/shahbaj'
Sorry I dont speak english very good
I have little problem with Media Uploader in new WordPress 3.5. I created own plugin which is upload the picture. I'm using this code JS:
<script type="text/javascript">
var file_frame;
jQuery('.button-secondary').live('click', function( event ){
event.preventDefault();
if ( file_frame ) {
file_frame.open();
return;
}
file_frame = wp.media.frames.file_frame = wp.media(
{
title: 'Select File',
button: {
text: jQuery( this ).data( 'uploader_button_text' )
},
multiple: false
}
);
file_frame.on('select', function() {
attachment = file_frame.state().get('selection').first().toJSON();
jQuery('#IMGsrc').val(attachment.url);
});
file_frame.open();
});
</script>
The code works fine, but unfortunately forms appears incomplete. When I select any picture doesn't show me 'Attachment Display Settings' on right side. I don't know why. I try add options to media:
displaySettings: true,
displayUserSettings: true
But it also doesn't work.
Does the page have the <script type="text/html" id="tmpl-attachment-details">... template in the source? If not, you'll need to call wp_print_media_templates(), to write the styles from wp-includes/media-template.php
This is the code I use. Source: http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/ It seems to work pretty well, but the sidebar on the left is missing. (Intentional, but I don't want it anyways).
<?php wp_enqueue_media(); ?>
<script>
function showAddPhotos() {
// Uploading files
var file_frame;
// event.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: jQuery( this ).data( 'uploader_title' ),
button: {
text: jQuery( this ).data( 'uploader_button_text' ),
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on( 'select', function() {
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
// Do something with attachment.id and/or attachment.url here
});
// Finally, open the modal
file_frame.open();
}
</script>