Open Search Result Link in New Tab.
Hi, I am using search form component and I want to open search result link in new tab. I have written a jQuery function which adds the target attribute to the result anchor tab, but its still open...
Forum Discussion
No such settings or components to change the search behavior. You have to do it forcefully using the script.
- Open this link
https://lithosphere.lithium.com/t5/forums/searchpage/tab/message?advanced=false&allow_punctuation=false&q=lithium - Run this line of code in the console
jQuery('.page-link.lia-link-navigation.lia-custom-event').attr('target', '_blank'); - Click Any of the search item's subject so it should open in new window.
Give it a shot and check if it works in console.
Hi Vikas,
I did it same way by adding target attribute to the anchor tag. I have shared the source code below.
<a class="lia-link-navigation lia-js-autocomplete-list-item-link lia-autocomplete-message-list-item-link lia-component-forums-auto-complete-message-list-item"
tabindex="-1" id="link_0_37d75dea5d1a04_1dcf3" href="/t5/Account-Questions/How-to-Change-Account-Information/ta-p/265"
target="_blank"><span class="lia-search-match-lithium">How</span> to Change Account Information</a>
But this code still opening in the same tab.
Hi Suchith,
That code is definitely correct. I have tested it in Internet Explorer, Mozilla Firefox, Chrome and Edge. If it isn't working for you I would suggest checking your browser settings or even check if you have another script on the page doing something else.
You can stop any other javascript running on it typically by using preventDefault() or if you are using jQuery click here to view this page.
Hopefully, this helps. If you are stuck do you mind posting what browser you are using?
Hi Jake,
Thanks for the suggestion. Even I thought of preventing the default script and execute my own.Still no luck. I am using the below script to prevent the default flow, but the event is not executing the script.
<script> $(document).ready(function(){ $("a.lia-link-navigation").click(function(event){ event.preventDefault(); console.log("prevented"); }); }); </script>Hi Suchith,
Thanks for posting the code. With Lithium, it is the best practice to put that code is a custom component if you haven't already and wrap it in the @liaAddScript directive.
Your code won't work on those links because they aren't created before the page has finished loading. You will need to add this "click" event to dynamically added "a.lia-link-navigation" as well. I don't have working code for this currently. However, it would be something like below.
<@liaAddScript> ;(function($){ $(document).on('click', 'a.lia-link-navigation', function(event){ event.preventDefault(); console.log("This worked!"); window.open($(this).attr('href'), '_blank'); }); })(LITHIUM.jQuery); </@liaAddScript>Quoted from the directive document:
"Lithium loads a set of jQuery libraries that we use in the Community with core Lithium features. Using the Lithium JQuery libraries improves performance because you avoid adding the jQuery twice (which will increase page load time)."
"If you attempt to use LITHIUM.jQuery outside of the liaAddScript directive, you run the risk of a "jQuery is undefined" or similar errors because your JavaScript is likely being added before jQuery has been loaded."
