How to load jQuery into Ionic?

Ionic Framework ionic-v3
1

Hi,

I am trying to load jQuery into my ionic-angular mobile app project. I installed the node modules via npm and now I’m trying to load jQuery (and signalR) from the index.html file using this:

<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/signalr/jquery.signalR.js"></script>

I don’t use jQuery in any of my Ionic pages. I only need it for signalR to work and I use signalR in a signalr.service.ts file this way:

this.window.$.signalR.connectionState.

When I build with --prod, I get the white screen of death. Using Chrome Debugger connected to my Android device, when I run ionic cordova run android --device --prod I get the following error messages:

Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///android_asset/www/node_modules/signalr/jquery.signalR.js

Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///android_asset/www/node_modules/jquery/dist/jquery.js

Uncaught Error: jQuery was not found. Please ensure jQuery is referenced before the SignalR client JavaScript file.
ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.1.min.js:9

ERROR
vendor.js:1 

Error: Uncaught (in promise): TypeError: Cannot read property '$' of undefined
TypeError: Cannot read property '$' of undefined
    at new n (file:///android_asset/www/build/main.js:1:195806)
    at Ne (file:///android_asset/www/build/vendor.js:1:22870)
    at Ie (file:///android_asset/www/build/vendor.js:1:22589)
    at je (file:///android_asset/www/build/vendor.js:1:22486)
    at t.get (file:///android_asset/www/build/vendor.js:1:111915)
    at dn (file:///android_asset/www/build/vendor.js:1:29231)
    at hn (file:///android_asset/www/build/vendor.js:1:28074)
    at an (file:///android_asset/www/build/vendor.js:1:26329)
    at Gn (file:///android_asset/www/build/vendor.js:1:40820)
    at zn (file:///android_asset/www/build/vendor.js:1:39656)

35 AM
Screen Shot 2017-09-22 at 10.12.35 AM.png964×276 79.2 KB

Any help would be greatly appreciated on how to include ‘$’ the right way globally.

2

Don’t. Either find another way to do what you want, or wait until Ionic 4 detaches itself from Angular, because then you might have more jQuery options.

3 Likes
3

install those, delete index.html script tags

npm install jquery
npm install @types/jquery

import your page

import jQuery from "jquery";

Usage,

jQuery(".domElement").action();
1 Like
4

That’s unlikely to be performant. Just because you can do something doesn’t mean you should.

1 Like
5

Thanks for the reply. Do you mean to import jQuery in each page/component that I use it?

And can you show me an example of how that usage would work? Should I replace all my $.signalR references with it?

6

Thanks for the reply. Do you mean to import jQuery in each page/component that I use it?
Yes.

If you are using $, change it this part

import jQuery from “jquery”;

to

import $ from “jquery”;

Add a element which is id = “#modal” for test . I hope It will help.

import { Component, OnInit } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import jQuery from "jquery";

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage implements OnInit{
  constructor(){ } 
  //Execute while opening
  ngOnInit() {
    jQuery("#modal").fadeOut();
  }

}
7

I’m not really using any jQuery commands/functionality in any of my Ionic pages. I only need it for signalR to work. The error is coming from vendor.js file after I do a build.

Importing import jQuery doesn’t help me much since I never use

jQuery(".domElement").action(); //or
$(".domElement").action();

I use signalR in a signalr.service.ts file this way:

this.window.$.signalR.connectionState.
8

Have you tried using the branch of the signalR JS client that doesn’t use jQuery?

1 Like
9

hi reliy0n, i got error if across from JQUERY to TS function

TypeError: this.closeModal is not a function

ts code:

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, ViewController } from ‘ionic-angular’;
import $ from ‘jquery’;

@IonicPage()
@Component({
selector: ‘page-login’,
templateUrl: ‘login.html’,
})

export class LoginPage {

constructor(public navCtrl: NavController, private viewCtrl: ViewController ) {
}

ionViewDidLoad() {
//console.log(‘ionViewDidLoad LoginPage’);
}

login(){
$.post(“http://localhost/apps/?apiKey=dev&apiID=login”, $(’#login-form’).serialize(),
function(data, status){
var msg = JSON.parse(data)
if (msg.status == 404){
alert(msg.message);
}else{
this.closeModal(); <====================== this cant across from Jquery to TS function
}
}
)

}

closeModal(){
this.viewCtrl.dismiss();
}

}

10

You pretty much never want to type function in an Ionic app, but instead want to use the fat arrows syntax () =>, so replace things like:

function(result)
with:
(result) =>

1 Like