Rich-text Reply
Highlighted

Triggering custom jQuery events in project JS

eandren 2w ago

Triggering custom jQuery events in project JS

[ Edited ]

Hi Everyone,

 

I'm running into an issue that I can't seem to figure out. I've done multiple searches and I don't think it's been answered before.

 

Basically there is a page where I want to have the project JS look for a change in a specific element and keep looking for further changes. I'm doing this with a simple setInterval on a page specified by an "if" statement that looks at the pathname.

 

var resultsHTML = $('#ResultsContent').html();
setInterval(function () {
    if (resultsHTML !== $('#ResultsContent').html()) {
        console.log('Changed');
        $('#ResultsContent').trigger('resultsChange');
        resultsHTML = $('#ResultsContent').html();
    } else {
        return;
    }
}, 500);

 Then, in my experiment, I am binding to the custom jQuery event:

$('#ResultsContent').bind('resultsChange', function () {
    console.log('bind triggered');
});

//I've also tried:

$('#ResultsContent').on('resultsChange', function () {
    console.log('on triggered');
});

I see the console.log from project JS "Changed" - but the trigger never fires the "bind triggered". 

 

jQuery v1.8.2 is what's on the site.

 

So I guess my questions are:

1.) Is there a better way to trigger events from project JS and allow experiment JS to pick them up?

2.) Is there some sort of closure/namespace issue where experiment jQuery is binding to something, and then the project JS is triggering something else, passing like ships in the night?

 

Thanks for any ideas/advice.

 

edit: grammar

Level 2

eandren 2w ago
 

Re: Triggering custom jQuery events in project JS

Of course after I post, I see a few suggested discussions I couldn't find before. I'll try those out and post back if the issue isn't resolved.
Level 2
jason-gsell Wednesday
 

Re: Triggering custom jQuery events in project JS

Hey Eandren, is this still an issue for you?
Optimizely
eandren Thursday
 

Re: Triggering custom jQuery events in project JS

Actually, yes - I went through the suggested articles, but am still running into the same issue. I haven't gone back to it for a couple days, but I should have some time to play around with it later today or tomorrow.

 

Any "gotcha" things that you know of that I should be aware of would be very helpful.

 

 

Level 2
jason-gsell Thursday
 

Re: Triggering custom jQuery events in project JS

Hi eandren,

 

I've escalated this to our technical support engineering team to take a look. I'll update ASAP when I have more details.

Optimizely
David_Orr Thursday
 

Re: Triggering custom jQuery events in project JS

Hi There,

 

The issue may be related to timing and scope of the Project Javascript code. Here is a quick overview on how code is evaluated on Optimizely:

 

1. Snippet Loads

2. Project JS is evaluated. Optimizely included jQuery and the Optimizely object is not available at this point.

3. Optimizely loads.

4. Once an experiment is activated, Experiment JS is evaluated.

5. Variation code is evaluated. 

 

Here is a link for more info on how Optimizely evaluates code: https://help.optimizely.com/Build_Campaigns_and_Experiments/How_Optimizely_Works%3A_Snippet_order_of...

 

What may be happening with the code is that the it is triggering the resultsChange runs before the bind code is even evaluated. 

 

 

1.) Is there a better way to trigger events from project JS and allow experiment JS to pick them up?

 

If you have jQuery implemented before Optimizely, you can scope the .on method to the document like jQuery.com's example at the bottom of the page: https://learn.jquery.com/events/introduction-to-custom-events/

 

2.) Is there some sort of closure/namespace issue where experiment jQuery is binding to something, and then the project JS is triggering something else, passing like ships in the night?

 

There may be a possibility that the custom event is binding to our jQuery (if you included it in your snippet) and being triggered on the page's jQuery. Here's how I tested this theory:

 

jquery.jpg

 

As you can see, I am using the page's jQuery to listen for the event and verified that it worked. Then I created a new event within the scope of Optimizely's jQuery and was unable to trigger the event from the page's jQuery. 

 

If this is indeed the issue, I would recommend adding "window." in front of any line of jQuery that is triggering or binding a custom event. 

 

David

 

Senior Technical Support Engineer
Optimizely