ionic 3 showing content inside iframe, session on persisting inside iframe in iOS - ionic-framework

I have an iframe page which shows a form which stores data in the session. But once the form is submitted the data from the form is not available as POST and the data which is set in the session is also not available.
Any thoughts?
sample code
<ion-content padding>
<div #frame style="width:100%;height:100%;overflow:scroll !important;-webkit-overflow-scrolling:touch !important">
<iframe [src]="adURL | safe : 'resourceUrl'" class="iframe" scrolling="yes" style="width:100%;height:100%;"></iframe>
</div>
</ion-content>

Related

Render regular HTML in IONIC

Is it possible to render regular HTML code in ionic? The reason behind is i want to render a chart, that is generated by a python code (Using Altair)
Thanks.
You can render regular html in ionic.
Let's assume you want to render the chart into an ion-item
The code goes something like this
<ion-list>
<ion-item>
<!-- Some code, you may use *ngFor to display the entire data -->
Example: <div class="exClass"><!-- May be a table -->{{ someData }}</div>
</ion-item>
</ion-list>

Ionic 3 - call method defined in .ts from downloaded innerHtml

I write app to display latest posts from one portal.
I download the content and display it in html template via [innerHtml].
Some posts may contain galleries that I'd like to show with Modal Page that has a slider.
My html template
<ion-content padding>
<div [innerHtml]="sanitizer.bypassSecurityTrustHtml(pageContent)" >
</div>
</ion-content>
How can I call function to open Modal (defined in post.ts) from downloaded html?
I sanitize the html so my code isn't removed, but normal Ionic methods like (click)="openModal()" don't work.
My downloaded html:
<button (click)="openModal()">Show gallery</button>
Maybe some javascript onclick="openModal()" ? But then I get openModal is not defined.

How to trigger url in backend (without opening any browser) IONIC

I am developing an IONIC project on iot relay switch. ( any help will be appreciated)
Whenever i am triggering a url, either it is opening in same app or launching a new browser.
but my need is that, it should trigger a url but it should not open anywhere.
I have a basic code like this:
<ion-header>
<ion-navbar>
<ion-title>
IOT Project
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h3 text-center> Basic Switch </h3>
<hr>
<p>
<a href="http://192.168.1.5/gpio?state_12=0" target = nobrowser>switch On</a><br><br>
<a href="http://192.168.1.5/gpio?state_12=1" target = nobrowser>switch Off</a>
</p>
</ion-content>
Use HTTP for this. If just want to hit the url, try this.
HTML
<button (click)="call(0)">switch On</button>
<button (click)="call(1)">switch Off</button>
TS
call(id) {
this.http.get(`http://192.168.1.5/gpio?state_12=${id}`);
}

How to get redirected to a popup after Facebook login

on my django app, I have a Facebook connect button (via django allauth). When I click that, the facebook dialog box appears. Now, i want that after login, the user is redirected to a popup (bootstrap modal) with the list of friends of the user.
I have a test function for obtaining the list of friends in my views.py and it works well. What I need is that after the facbook dialog box login, it goes to this function, gets the friendlist, and return the result in a popup on the original page.
I tried setting LOGIN_REDIRECT_URL = '/friends', which takes me to the view function and gets the friendlist, but how do I show this list in that popup? I'm using django-allauth with the bootstrap library.
Any help on this would be greatly appreciated.
load the friends page inside a modal
You can use the remote option of the modal to load the html from the friends page inside the modal. See the docs and look for remote.
Add a modal to the page where you want to show the modal:
<div class="modal hide fade" id="myModalFriends" aria-hidden="true" data-show="true">
<div class="modal-header">
<h3>Friend list</h3>
</div>
<div class="modal-body">Friend page will load here.</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
Then, after successful login:
$('#myModalFriends').modal({
remote: '/friends'
});
This will load the html from your /friends page inside a modal.
open a modal box the friend page loads
If you want to show your friend list in a modal box on the friends page, you can call $('#myModal').modal(); in document ready to show it on startup; see this fiddle.

adding a page to jqtouch

So I have something like this:
<html>
<body>
<div id="jqt">
<div id="page1">
...
</div>
....
<div id="generic">
Some generic page to use as a template
</div>
</div>
</body>
</html>
and I want to create a new page on after everything is loaded and the user does some action.
$('#generic').clone().attr('id', 'some_new_page').appendTo('#jqt');
What happens is the new page ends up showing up in front of everything and doesn't seem to have and jqtouch events or styles added.
How do initialize this page (or at least have jqtouch reinitialize the whole html file)?
I don't want it to show up at first, I just wanted loaded and ready in the background.
Have you tried to do a deep clone with data and events instead?
$('#generic').clone(true, true).attr('id', 'some_new_page').appendTo('#jqt');