Hi guys,
Potentially a silly question here but I have a one page site which I'm trying to keep fairly minimal and I'd like to be able to get the context of a resource on click. As far as I know I need to use AJAX to accomplish this but I've no idea where to start and tutorials don't seem to be offering me much help so far.
I appreciate this is perhaps more of a jQuery question than MODX but I just wondered if you guys could offer any insight?
Thanks,
The easiest way would be to put the context in a div or span that's not visible because of its CSS class. Then a little JavaScript can just change toggle its class. Here's one way to do that:
http://bobsguides.com/blog.html/2014/03/24/making-things-appear-and-disappear-without-jquery/.
Actually, a better method is to just change the class of the item rather than toggling the attribute and control the visibility for the two classes with CSS.
CSS
span.span_hidden {
display: none;
}
span.span_visible {
display: inline;
}
HTML
<span id="resource_context" class="span_hidden">[[*context_key]]</span>
The JavaScript would change that line to:
<span id="resource_context" class="span_visible">[[*context_key]]</span>
Thanks for your reply, Bob.
This method wouldn't really suit my purposes as I'm trying to keep the page weight down as much as possible and this piece of functionality I'd want to use it for is for a small library sample of about 20 books so it would be a lot of hidden articles.
I think I've figured out a way to do it though and that's simply by creating the resources with the desired context and setting them to a blank template and then using the ajax .load to grab the context from the pages. I haven't put it into practice yet but I think thats the way to go.
Thanks,
That sounds good, though the JS for my suggestion is quite small and is a function that can be reused for every case. I think that would give you much faster responses than using Ajax. The initial page loads might be longer, but caching and the browser cache would help a lot with that.
