[Resolved] Displaying search result in a modal

[Author]

Posts

[pierre-yvesC]

Hi,

I tried many ways, including the one explained here: https://toolset.com/forums/topic/using-a-lightbox-in-my-view-to-display-view-content-template/ which allows to display a post but what I'm trying to achieve is to display a list of posts, based on research (taxonomy filter).

I guess the clue is to edit the data-target, but I can't figure how.

Any idea would be strongly appreciated.

Many thx

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share more details about how you would like to display the results.

Do you mean that you have a view with taxonomy filter and when user change the taxonomy filter you want to display the view result in the popup - correct? If yes:
There is no native feature available to show result in the popup.

Or maybe you can check for popup or lightbox plugins that should help you to show search result in the popup.

Here is a sandbox site and you can auto-login to it using the following link:
- hidden link

If you can setup a demo and tell me how exactly you want to display the search result in the popup I will review it and get back to you with possible workaround/solution if any.

[pierre-yvesC]

Hi Minesh, many thx for your help.

I setup a demo here : hidden link where you can see what I want achieve.

Regards,

[Minesh]

Can you please check now: hidden link

I've adjusted the code added to view's "Loop Editor" section as given under:
- hidden link

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
  	<wpv-loop>
		[wpv-post-body view_template="loop-item-in-clerson"]
	</wpv-loop>
	</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>      
      <!-- wpv-loop-end -->
     
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Then to call the modal I've added the following custom JS code to the view's "Search and Pagination" section's JS box:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
 jQuery('#exampleModal').modal('show'); 
	
});

jQuery( document ).on( 'ready', function( $ ) {

 jQuery('#exampleModal').modal('show'); 
	
});

Can you please confirm it works as expected now. you are welcome to modify anything as per your requirement.

More info:
- hidden link

[pierre-yvesC]

Wow, amazing! Many thx!