Rich-text Reply
Highlighted

Triggering custom jQuery events in project JS

eandren 01-10-17

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 01-10-17
 

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 01-18-17
 

Re: Triggering custom jQuery events in project JS

Hey Eandren, is this still an issue for you?
If this solved your question, please accept it as a solution!
Optimizely
eandren 01-19-17
 

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 01-19-17
 

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.

If this solved your question, please accept it as a solution!
Optimizely
David_Orr 01-19-17
 

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
eandren 01-26-17
 

Re: Triggering custom jQuery events in project JS

[ Edited ]

Hi David,

 

I've been playing around with this when I have had some spare time and tried a couple things:

 

1.) I verified that in fact the project.js and the experiment js were binding to the same instance of jQuery. The version on the site is 1.8.x, and the version Optimizely uses is 1.11.x - they were both using 1.8.x. To be extra certain, Optimizely seems to only populate $, whereas the page jQuery has jQuery() available as well. I tested using console logs of jQuery().jquery to be extra certain that both were using 1.8.x. No dice.

 

2.) I tried just putting the .on and .trigger in the _same extension_ code, bypassing the project JS all toghether and the .on console log still doesn't fire, even though the .trigger is called. 

 

At this point, I'm open to ANY ideas on how to:

 

- Watch for a change in an element's HTML

- Insert some code whenever that HTML changes to insert some elements.

 

Basically, it's a search page that sideloads but does not reload when someone changes their search criteria, so I want to keep watching for the search results to change and then re-inject a header image when they do (since the new results overwrite the image that is injected on first page load).

 

If there is any other way to do this, I am all ears.

 

Thanks,

Erich

Level 2