Forum Discussion

Suchith's avatar
Suchith
Ace
7 years ago

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...
Jake_N's avatar
Jake_N
Mentor

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

Suchith's avatar
Suchith
Ace
7 years ago

Hi Jake, 

I really appreciate your help. I still don't have any luck on this. I have tried  jQuery event delegation too, but its still not executing the script. I have posted my complete code below. 

<style>
#search .SearchForm {
    visibility: visible !important; 
}
.lia-button-searchForm-action{
    visibility: hidden;
}
.lia-search-input-message{
    padding: 0px 0px 0px 10px !important;
    border-radius: 5px !important;
}
.lia-component-common-widget-search-form .lia-search-input-wrapper .search-input{
    height: 40px !important;
}
.lia-component-common-widget-search-form{
padding: 0px !important;
}
</style>
<script>
	$(document).ready(function(){
           $('[name="messageSearchField"]').attr('placeholder','Enter a Subject');
	});
</script>
<div id="search">
	<table style="width:100%">
		<tbody>
  			<tr>
    			<td width="10%"><label class="required" id="ot_subject">Subject:</label></td>
    			<td><label id="subjectErrorMessage" style="color:red" hidden="true">Subject cannot be blank</label></td> 
 			</tr>
		</tbody>
	</table>
	<@component id="common.widget.search-form" hideGranularity="true" defaultToCommunity="false"/>
</div>

<@liaAddScript>
;(function($){
	$(document).on('click', 'a.lia-link-navigation.lia-js-autocomplete-list-item-link.lia-autocomplete-message-list-item-link.lia-component-forums-auto-complete-message-list-item', function(event){
  		event.preventDefault();
  		console.log("This worked!");
        window.open($(this).attr('href'), '_blank');
    });
})(LITHIUM.jQuery); 
</@liaAddScript>

I have created a custom search suggestion component using Standard Search form and  consuming the same in other pages.

Please let me know if i have done something wrong with this code.

Thanks