Using XenForo.OverlayTrigger on link added via AJAX

[digitalpoint]

Is there a simple way to have a link able to use the standard AJAX overlay when the link itself wasn't part of the original DOM when the register event was fired for OverlayTrigger?

I haven't gone digging through the code, but it *appears* it's binding through a normal click event instead of a $.live() event?

Been screwing around with this for a couple hours now (and will continue until it works), but hopefully someone happens to know?

To give some context of what I'm trying to do... I want to have a link within a field validation error (the little red/white box that shows to the right of an input) that the user can click for more detailed info. Since that validation error comes in via AJAX, it misses the registration of the OverlayTrigger events.

I tried simply registering an onclick event for the link manually, but there seem to be some scope issues with that.

 

[Rigel Kentaurus]

Is there a simple way to have a link able to use the standard AJAX overlay when the link itself wasn't part of the original DOM when the register event was fired for OverlayTrigger?

I haven't gone digging through the code, but it *appears* it's binding through a normal click event instead of a $.live() event?

Been screwing around with this for a couple hours now (and will continue until it works), but hopefully someone happens to know?

I think at some point I was just calling XenForo.createOverlay(null, "HTML HERE") and that was working correctly.
I changed that to the OverlayTrigger css class which turned out to be way easier for what I was doing

 

[digitalpoint]

Hmmm... there has to be a better way... I'd rather not have to do it all manually (load the URL via AJAX, then parse out the HTML for it, etc.) If I was going to go that route, I'd be better off just building my own overlay function from scratch I think.

 

[Mike]

When you add the content from the Ajax call, be sure to call xfActivate on it -- $('#addedContent').xfActivate();

All of the XF object bindings will work then. (If I remembered the function name correctly )

Though re-reading, it looks like this is something that we would need to do.

 

[digitalpoint]

xfActivate() works perfectly.

You sir just made my night... I tried to go to bed a couple hours ago, but couldn't stop thinking about this, so had to get up and bang on it some more. I'd give you 100 likes if I could right now.

I've had my head in XF quite a bit lately, and I must say it's pretty remarkable how well thought out it is. So far I have not yet had to hack on any PHP or JS files to get it to jump through the hoops I'm making for it.

 

[digitalpoint]

On a side note, the overlay works perfectly now, but it does throw a JS error when the overlay is triggered:

Uncaught TypeError: Cannot call method 'closest' of undefined

Don't care *too* much about it, since the overlay itself works regardless.

 

[Mike]

Any idea of the line number/file that's triggering that according to the console?

 

[digitalpoint]

It's line 236 on the compressed version of xenforo.js... since that has two closest() functions, I did a little double checking, and it appears to be the first one. From the uncompressed version:

var parentOverlay = this.$trigger.closest('.xenOverlay').data('overlay'),
	cache,
	options,
	isUserLink = (this.$trigger.is('.username, .avatar')),
	cardHref;

 

[xfrocks]

In other note, you can also use xfInsert to save yourself the trouble of calling xfActivate manually! Oh, and if your <a /> is the root, xfInsert won't work. You should wrap it inside something else (a <span /> or a <div />)

 

[digitalpoint]

xfActivate() wouldn't work in my case since the thing I wanted to have a link in was already being inserted automatically (since it was an error message on an input validation).