Catch the event of a link click outside html control

Hi David,

I am trying to catch a link event in app builder to fire an event but I have no success. I suspect it is because I am not listening to the right event name. Any help is very much appreciated.

This is the link I have included in the HTML control

<a href="#" onclick="return false;" id="test_id">Test label</a>
And I have this event listener in the ready event StartJS $('#test_id').on('touchstart click', function (event) { if (event.type == "touchstart") $(this).off('click'); window.App.Scope.test_function(); }); EndJS
But I can not get to run the test function like this! Any help is much appreciated!

Hello Amin,

Certainly I can see some "rare things" around your issue. For example, the app Ready is suposed to be fired once the DOM is ready (if the app is running in the browser) or when the device is ready (if the app is running in a Cordova platform like Android).

However, despiste the above, if we place a code like this in the app Ready event:

StartJS alert($('#test_id').length); EndJS

... what we can see is a "0" (zero), means there is no "test_id" element, and therefore we can't attach any event handler on it. However, if you place such alert before your event code handler, you can see that the event is fired... something unuseful, because we can't place such alert there...

I made several tests, however, nothing works as expected (for this specific case) in the app Ready event. If you can move your code into the view Show event, then the things works as expected. So the question is, can you move the code into the view Show event, Amin?

---

Hello Amin,

This disturb me a bit, because, I think this cannot be considered a solution, however, if we use a "setTimeout", even as smaller as 100 milliseconds, then the code also works in the app Ready event:

StartJS setTimeout(function () { $('#test_id').on('touchstart click', function (event) { if (event.type == 'touchstart') { $(this).off('click'); } window.App.Scope.test_function(); }); }, 100); EndJS

I say it's not a solution... because I did not see it elegant, since, maybe the solution must be to know what really is happen... however, can be taken as a possible workaround, if we can't move the code into the view Show event, then use the app Ready one, but with the above "setTimeout", which certainly works...

I am not very friend to use something like the "setTimeout" for cases like this... so... my recommendation is to use the view Show event if possible.

---

Hello Amin,

For sure something is "missing" here. I try to update the jQuery library and AngularJS to their latest versions without lucky. Certainly I understand the point of use the app Ready event instead of the view Show event. This is something that works as a charm in the current generation of AB, and, I use it in various apps. What happen in the previous generation of AB (in your discovered issue) is a mistery to me right now **, however, I find that we can use the app Ready event as you wanted, if we can use events delegation, that is, the below code, placed in the app Ready event, works as expected:

StartJS $('html').on('touchstart click', '#test_id', function (event) { if (event.type == "touchstart") $(this).off('click'); window.App.Scope.test_function(); }); EndJS

** Apparently what happen is more or less clear: when the app Ready event is fired (in principle, when the DOM is ready if the app is running in a browser), the app view HTML markup is not certainly ready to use, so, the elements that we wanted don't exists, and therefore we can't attach any event handler to it. Probably we must asume this "as is": we can't use the app Ready to attach events handlers, except if we delegate the events like in the above code. That... or use the view Show event, in which certainly the elements are ready to be used or manipulated.

---

Hi David,
Thank you very much for your help. Before I get your answers I actually did another work around, I implemented the service I wanted on the server side and opened the link on the app. That being said, I am still very interested in getting that to work, so I will follow your instructions and will keep you posted here on what I find.
Thanks again for your excellent customer care as always

Hello Amin,

No problem! I am happy to help when possible. :-)

---