Jquery in Ionic and Typescript

Ionic Framework ionic-v3
1

Hi,
I am not able to call $(jQuery) method to update css.

My project is into Ionic 2 Angular 2 and Typescript.

We have many reusable code written in Jquery which we want to access.
Example I am passing Userindex value to increase and decrease width dynamically.
But $ this one is giving error.

$(".index_bar").css({ “width”: this.UserIndex + “%” });

Question:-

  1. $(".index_bar").css({ “width”: this.UserIndex + “%” }); how to make it working in Ionic 2.

2.How to update css value using typescript?

Please help.

2

You don’t need jQuery to update your DOM elements.

I use a progress bar in my file transfer upload example. See the html and typescript to see how I update the progress. If you want a more detailed example I’d like to see some code (your html and typescript) to get me started.

If you really insist on using jQuery; without knowing the error you have gotten it is highly likely that you forgot to import jQuery in your typescript file.

First install the package.

npm install jquery --save

Install (typings and) the typings file

npm install -g typings
typings install dt~jquery --global --save

and finally, import the jquery to your ts file

import * as $ from 'jquery'
9 Likes
3

Thanks a ton.You saved my day.By the way i used Angular style but i have many jquery library which i wanted to use to save development time.

4

This seems to be changed in RC.0 and should be implemented on other way now, did anyone tried so far?

5

The solution above is not working anymore with Ionic2 RC.1:

Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS
Node Version: v4.2.6

What should I do? @nadreal1010 did you find any solution?

6

Nope, nothing yet and I’m not optimistic about this

7

Try this for RC.1:

import jQuery from "jquery";

Then, instead of using $, use jQuery. For example:

jQuery('#my-element').doStuff();

You could import $, but to avoid conflicts you’re probably best just going with jQuery.

Note: Ionic currently has a bug where the DOM isn’t ready on ionViewDidLoad (see here). So you might need to wrap your code in a timeout:

setTimeout(() => {
  jQuery('#my-element').doStuff();
}, 100);
3 Likes
8

@levymetal This worked for me, thanks.

9

hi . thanks for your help and also codes.

what kind of stuff() we able to do in jquery>inonic2 ?

for example :

jQuery(this.vidi.nativeElement).on( “click”, function() {
console.log(‘sdfsdgertr’); // this works
this.dolog(‘test’); // this dialog show function doesn’t work
});

functions not work.

i put that code inside ngAfterViewInit .

thanks.

1 Like
10

Ah, I think you’ll find the problem is the way jQuery handles this. Inside a handler, jQuery assigns this to the matched element, so in your case, this refers to this.vidi.nativeElement, not the class.

Something like this might work, although I haven’t tested it:

export class MyPage {
  vm = this;
  
  ionViewDidLoad() {
    setTimeout(() => {
      jQuery(this.vidi.nativeElement).on("click", function() {
        vm.dolog('test');
      });
    }, 100);
  }
}

However, the real question is why you’re binding a click event with jQuery rather than Angular? IE:

<video (click)="doStuff()">...</video>

Or if you need to bind the event dynamically in your component instead of the template, https://stackoverflow.com/questions/35080387/dynamically-add-event-listener-in-angular-2

12

it’s working !!!

13

image
image.png1895×975 14 KB

Getting this error, can you help ?

14

Post text as text, not images. You should look for Angular alternatives very seriously before trying to jam jQuery into an Angular app.