1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Using XenForo.OverlayTrigger on link added via AJAX

Discussion in 'XenForo Development Discussions' started by digitalpoint, Dec 3, 2011.

  1. digitalpoint

    digitalpoint Well-Known Member

    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.
  2. Rigel Kentaurus

    Rigel Kentaurus Well-Known Member

    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
  3. digitalpoint

    digitalpoint Well-Known Member

    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.
  4. Mike

    Mike XenForo Developer Staff Member

    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.
  5. digitalpoint

    digitalpoint Well-Known Member

    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.
  6. digitalpoint

    digitalpoint Well-Known Member

    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.
  7. Mike

    Mike XenForo Developer Staff Member

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

    digitalpoint Well-Known Member

    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'),
    	isUserLink = (this.$trigger.is('.username, .avatar')),
  9. xfrocks

    xfrocks Well-Known Member

    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 />) :p
  10. digitalpoint

    digitalpoint Well-Known Member

    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).

Share This Page