Crossrider - How to trigger events on user's activities in a page?

Question

I am new to Crossrider and I want be able to trigger events based on the user's interaction with the page.

For example, have a sound played when user hovers over an html input element:

extension.js

appAPI.ready(function() {
    //the link to Alarm01 is valid
    var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav') 
    $('input').mouseenter(function(){
        Alarm01.play();
    })
});

The code above does not work. Does anyone know what is the proper way to do this?

I've also tried to put it in background.js - that does not work either. I am using Chrome as my browser.

The idea is to have the user select an event in a popup (for example, play Alarm01 on hover over an input element) and then have it immediately applied to the current web page. So that the next time the user hovers over an input element Alarm01 is played.

What is the proper way to access HTML page elements in a Crossrider extension?

Thank you!

EDIT: Follow up question

Is it possible to trigger events on user's interaction with JQuery Mobile elements? For example an element of data-role="slider":

appAPI.ready(function($) {
    //the link to Alarm01 is valid
    var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav');
    // Add audio to page
    document.body.appendChild(Alarm01);
    $('[data-role=slider]').on('change', function(){
        Alarm01.play();
    })

});

Thank you!!!!

EDIT: If I include JQuery Mobile in extension.js I get double of every element on a the mobile website. So instead of getting one element of data-role="slider", I get two...

I get this: as opposed to this: I want this

Shlomo · Accepted Answer · 2014-03-30T08:54:58.910

2

You're almost there. As your code stands you created the audio object in the extension scope. However, to play the audio you must add it to the page scope (HTML DOM). Hence, simply add it to the body of the page and it works, something like:

appAPI.ready(function($) {
    //the link to Alarm01 is valid
    var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav');
    // Add audio to page
    document.body.appendChild(Alarm01);
    $('input').mouseenter(function(){
        Alarm01.play();
    })
});

[Disclosure: I am a Crossrider employee]

edited Mar 30 '14 at 08:54

answered Mar 30 '14 at 07:53

Shlomo

3,763
11
16

Hi, thank you for your fast response. I am now getting the following error on line $('input').mouseenter... : **Uncaught TypeError: Property '$' of object [object Object] is not a function.** I guess there is something wrong with JQuery being loaded... Would you know how to fix that? – Ekaterina Mar 30 '14 at 08:51
Apologies, I was focusing on the audio issue and didn't notice you hadn't specified $ as the callback parameter to appAPI.ready :-) I fixed it in my example. – Shlomo Mar 30 '14 at 08:56
Follow up question: is it possible to trigger this type of event (such as playing a sound) from the background.js or even a popup file in the Resources folder? It doesn't seem to work for me. Thank you! – Ekaterina Mar 30 '14 at 09:48
Only code in the extension.js file has the ability to directly interact with the page DOM. However, if you have a trigger in a different scope (background, popup), you can have it pass a [message between scopes](http://docs.crossrider.com/#!/api/appAPI.message) (e.g. background to extension) for the extension scope to perform the action. – Shlomo Mar 30 '14 at 09:57
Yea, I thought so. Thank you! – Ekaterina Mar 30 '14 at 10:12
Shlomo, I edited my question with a follow up question, could you please take a look at it and see if you can answer it as well? Thank you! – Ekaterina Mar 30 '14 at 16:17
I believe the issue is that you need to load the jquerymobile library into the extension scope for the change event to trigger. Try adding `appAPI.resources.includeRemoteJS('http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js');` – Shlomo Mar 30 '14 at 19:50
That plays the audio, but raised new issues. Now the JQuery Mobile libraries are applied twice to the mobile website and that causes glitches. Please see my edit! And thank you again you've been so tremendously helpful! :) – Ekaterina Mar 30 '14 at 20:11
Sorry, I'm afraid I'm not that familiar with jQueryMobile but perhaps there's a way to load it without it rendering the elements? Otherwise, it may not be possible to use it in the extension scope. – Shlomo Mar 31 '14 at 11:29

Crossrider - How to trigger events on user's activities in a page?

1 Answers1