Forum Discussion
bryanpollack
11 years agoAce
I've actually found a way to AJAX in the default Lithium options menu so I can use my custom components but still use the proper built in options menu. Thanks for the help.
- bryanpollack11 years agoAce
It's a bit klugey, but it seems to work ok. I set up my Forum Topic page to have both my custom thread component and the default thread component (message-list), and have the default one hidden from view and set to display only one post.
I've set up my options buttons as follows:
$('#posts').on('click', '.options a', function(e) { var id = $(this).closest('.options').attr('id').replace('actions-', ''); getOptions(id, this); });
Here's my getOptions function:
function getOptions(messageId, me) { if ($(me).siblings('[id^=actionMenuDropDown]').length > 0) { $(me).siblings('[id^=actionMenuDropDown]').toggle(); } else { $.get("/t5/-/-/m-p/" + messageId + "?isAjax", function (res) { var html = $.parseHTML(res); var options = $(html).find('.message-uid-' + messageId + ' [id^=actionMenuDropDown]'); $(me).closest('.options').append(options); }); } }
I have the ?isAjax, because I hide certain things on the page when that is passed in (e.g. header, footer, custom thread component) in order to speed up the page load.
And to hide the options after clicking elsewhere:
$(document).mouseup(function (e){ var container = $('.options [id^=actionMenuDropDown]'); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container { container.hide(); } });
Hope that helps!
Related Content
- 5 years ago