Trigger click event of an ionic3 element programatically with jquery

Question

I am trying to trigger the (ionic) click event of an element manually, from jquery or native dom events.

Let's say for example I have the following:

entry.html

<button [id]="id" (click)="entryClicked()></button>

entry.ts

@Component({
  selector: 'entry',
  templateUrl: 'entry.html',
})
export class EntryComponent {
  constructor() {}

  id = "entry_1"

  entryClicked () {
    console.log(id +" has been clicked")
  }

}

From another service, I would like to trigger the click event on entry_1.

Problem: this other service is completely separate from the first, it's a provider and to my knowledge, I cannot use @ViewChild and @ViewChildren from it. So I cannot directly access functions of the entry component.

externalService.ts

import { Injectable } from '@angular/core';
import * as $ from 'jquery';

@Injectable()
export class ExternalServiceProvider {
  constructor( ) { }

  someEvent () {
    $("#entry_1").click();
  }

}

Triggering someEvent() doesn't trigger entryClicked() like I hope it would.
It's not a problem of loading, the #entry_1 element is found by jquery. It's just that the (click) event bound to the element by ionic doesn't seem to be related to the jquery click event. Same problem if I use $("#entry_1")[0].click().
However, if I click the element in the page, it fires properly.

How can I fire the original ionic click event from the DOM, with or without jquery?

and why on earth you want to this weird stuff? Is there a end goal behind this? — Prerak Tiwari
– Prerak Tiwari, Commented Jan 4, 2018 at 19:52
@PrerakTiwari: I want to access the method of the EntryComponent from the ExternalServiceProvider. I don't see any way to do that otherwise (and would love to have another solution). The entry is created by an automatic synchronization in the database, and therefore I don't have access to the Component from the entry creation callback. Not sure I'm very clear, but believe me, I tried finding better ways to do that, and redesigning a, by many aspect well designed app, just for this improvement is not worth it. The click workaround would be a very good option at the moment. — chateau
– chateau, Commented Jan 5, 2018 at 19:26
@PrerakTiwari: The end functionality I'm trying to provide, is to do something on an entry that is just newly created by the user. The only way I can know an entry is newly created is from the callback of the creation of this entry. As I mention in the previous comment, this callback is in a Provider that doesn't have access to the Component's methods, since I can't use ViewChild from a Provider. — chateau
– chateau, Commented Jan 5, 2018 at 19:36
@PrerakTiwari: thanks that's exactly what I was looking for, I didn't know about it — chateau
– chateau, Commented Jan 5, 2018 at 20:31

Prerak Tiwari · Accepted Answer · 2018-01-05 19:53:57Z

I think you can use Ionic Events to achieve this as described here.

Events is a publish-subscribe style event system for sending and responding to application-level events across your app.

Modify your code like this:

externalService.ts

import { Injectable } from '@angular/core';
import * as $ from 'jquery';
import { Events } from 'ionic-angular';

@Injectable()
export class ExternalServiceProvider {
  constructor(public events: Events) { }

  someEvent () {
    this.events.publish('triggerClickEvent', "triggerClickEvent");
  }
}

entry.ts

import { Events } from 'ionic-angular';
@Component({
  selector: 'entry',
  templateUrl: 'entry.html',
})
export class EntryComponent {
  constructor(public events: Events) {
    events.subscribe('triggerClickEvent', (data) => {
      console.log('Event triggered' , data);
      this.entryClicked();
    });
  }

  id = "entry_1"

  entryClicked () {
    console.log(id +" has been clicked")
  }
}

Collectives™ on Stack Overflow

Trigger click event of an ionic3 element programatically with jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related