How to use jquery in ionic 3

Question

I'm trying to load external website in a div using jquery in ionic 3.

TS:

export class HomePage 
{
  constructor(public navCtrl: NavController) {    
      $('#loadExternalURL').load('http://www.google.com');
  }
}

HTML:

<ion-content>
    <div id="loadExternalURL"></div>
</ion-content>

I'm getting blank screen on serving the ionic app. Is there anything I'm missing? Any Suggestion?

Answer 1

To use jQuery in ionic project do it this way:

Install the Jquery module in your IONIC-3 app as follows:

1, npm install jquery --save
2, npm install @types/jquery

then import jquery on your page like this

3, import * as $ from "jquery";

You can then use the jquery $ as you would in normal javascript. I have used it for a jquery ajax call to get remote data like this:

 $.ajax({
    url: "my api url",
    method: "POST", //you can do post, get, put
    data: my-data
}).done(function(res){
     //process response from server
}).fail(function(err){
     //return error message.
});

It worked very fine.

Answer 2

I did it in following way,

1. Install Jquery module in your IONIC-3 app,

   npm install jquery --save

2. Import JQuery in HomePage.ts

   import * as $ from "jquery";

3. Use $ to call jquery methods.

I wait for method ngAfterViewInit to make sure view is initialized.

ngAfterViewInit(){
    $(document).ready(function(){
        alert('JQuery is working!!');
    });
}

Answer 3

You not need to use jQuery

You can add iframe

<div>
    <iframe src="yourexternalpage url"></iframe>
</div>

Answer 4

You need to import jQuery into your project somehow. If you want to use HTML you need to add it near the top of your page

<script src="[path to jQuery source]"></script>

Or use a .d.ts file defining jQuery

declare module "jquery" {
    export = $;
}
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

then define it where needed

<reference path="jquery.d.ts" />

References used:

TypeScript and libraries such as jQuery (with .d.ts files)

How do I get jQuery autocompletion in TypeScript?