[Resolved] Dynamically show details below map when clicking the focus marker link

[Author]

Posts

[KonstantinS88]

I have a map and below I have a list of results. When I click on a result it focuses the marker on the map.

I would like to dynamically show additional information from this active marker below the map when the focus action is triggered.

I tried with a second view, but I fail to transfer any info to this view to update its content. Also, the map focus this is set via ajax and not full page refresh.

Any chance? Thanks in advance.

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+00:00)]

Hello and thank you for contacting the Toolset support.

I believe this can be implemented with a little custom Javascript. First, you won't need two views for it. Only one.

In that view, you can wrap the data that you want to show upon click in a hidden <div>:

<div style="display: none;">
...
</div>

Then, you can listen for the click event on a view's results, and then, hide any previously displayed <div>(from a previously clicked view's result), and show the one that was clicked.

I hope this makes sense. Let me know if you have any questions.

[KonstantinS88]

My issue is resolved now. Thank you!

I still needed two views as I needed two loops and wanted to show the details ABOVE the main list but BELOW the map. My solution is to call the second view in the loop editor of the main view which has the map.

The second view creates a HTML List with all elements and sets them to be hidden (display:none). Every block has a unique ID like:

<div id="detail-[wpv-post-id]" class="lieferant-detail" style="display:none;">HERE ARE MY DETAILS</div>

In the main view the link then carries the ID of the clicked element and uses it the JS script below:

<a href="#map" class="lieferant-link js-wpv-addon-maps-focus-map js-toolset-maps-hover-map-map-2-marker-marker-[wpv-post-id] js-toolset-maps-open-infowindow-map-map-2-marker-marker-[wpv-post-id]" data-map="map-2" data-marker="marker-[wpv-post-id]" id="[wpv-post-id]">

  [wpv-map-marker map_id='map-2']...[/wpv-map-marker]

</a>

I added these two JS to the main view. The first part makes a click scroll to the map, the second then shows the details block and hides all other detail blocks so only one is visible

( function( $ ) {
    $( document ).ready( function(){
        $(".js-wpv-addon-maps-focus-map").click(function() {
            $('html, body').animate({
                scrollTop: $("#js-wpv-addon-maps-render-map-2").offset().top - 70
            }, 1000);
        });
    });
})( jQuery );


jQuery('.lieferant-link').click(function() {
  var linkText = jQuery(this).attr('id'); //take the ID value from the link the ID valueis the post-id of the clicked object
  jQuery( ".lieferant-detail" ).hide(); //:not(#"+linkText+") //hide all details block with the class lieferant-detail
  jQuery( "#detail-"+linkText ).show(); //css( "display", "block" ); //show the detail block which has this ID  id="detail-[wpv-post-id]"
});