I have a page using a region with the semi-new Search type, where it returns results dynamically as you enter characters in the Search field it supplies. I've created a region to the right of the results section, and I'm wanting to be able to click on one of the specific cards in the results region and have it supply additional details. The problem is, I can't get a Click Event dynamic action to work, as it doesn't seem to like anything I put in the JQuery selector.
In opening Chrome Developer Tools' Inspect on the rendered page, I can see that each returned search result comes back in a <div> element with a class of “.a-ResultsItem”. So, I first created a function in the page's Global Declaration area, in order to wrap an <a> element around each result to make them “clickable”. I then invoke that function in a Page Load dynamic action. Here is the global function:
function results() {
$('div.a-ResultsItem').wrap('<a class="clickable" href="#"></a>');
}
That works, as I can see through Developer Tools the correct <a> elements wrapped around each <div>, and the mouse cursor responds to each clickable container. What I am now trying to do is set up a Click dynamic action on a specific result. I'm selecting “JQuery Selector” as the “Selection Type”, but I'm struggling to figure out how to correctly supply the corresponding “JQuery Selector”. I tried entering .clickable in there, using the custom-assigned class I gave to the <a> blocks that I wrapped each <div> result in. It didn't respond to that. I tried a variety of other selectors, such as the .a-ResultsItem class APEX assigns to the <div> results using that same ‘div.a-ResultsItem’ value in that JQuery Selector field. Nothing works, except for putting the literal “div”. That leads to the triggering element being the entire body, obviously. However, it does prove that my resulting dynamic action will work. I just simply need the correct selector. Maybe it's how I'm entering the selector value, and it has to be in a specific syntax if it's trying to reference a class for a specific element tag or child element to some other element, etc. If it were straight JQuery, I should be able to say something like $('div.a-ResultsItem').xxxxx and it should grab the element(s) that match. Doing so in a Click dynamic action should bring in the exact element that was clicked. But when I put the literal “div.a-ResultsItem”, it didn't respond. Any suggestions?