What ajax function updates map on filter?

New home Forums Gold Add-on Troubleshooting What ajax function updates map on filter?

This topic contains 7 replies, has 2 voices, and was last updated by  TomRaley 5 months, 1 week ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #49266

    TomRaley
    Member

    Hi, I’m trying to hide the marker listing on my map until the map is filtered by a category, then place the marker listing into a div lower down on my page, but after the filtered listing has loaded. To do this, I’m thinking of using a function that runs after the ajax call has been fulfilled. I currently have a setTimeout function set to do this after 4 seconds have passed, but that is sometimes too short or too long a period to get the proper listing to display.

    Can you tell me what function is used to update the map when filtered by a category?

    My page is here for reference so you can see what I’m trying to do: http://cmsdev.sunchemical.com.php56-5.ord1-1.websitetestlink.com/locations-map-test/

    Thanks!

    #49275

    Perry
    Moderator

    Hi Tom

    Thank you for getting in touch!

    I’d recommend you use CSS to hide the listing (display: none;) you can then listen on the document body for the event filteringcomplete.wpgmza – this fires when category filtering changes.

    Does that help?

    Kind regards
    – Perry

    #49289

    TomRaley
    Member

    Hi Perry,

    Thanks for your quick reply! I implemented the code you suggested and it’s basically working, however there’s still a split second when the list shows and it’s not done filtering yet. See here: http://cmsdev.sunchemical.com.php56-5.ord1-1.websitetestlink.com/locations-map-test/

    When you click North America->Canada for instance, it’s still showing the full North America listing for a second, and then updates to reflect the filtered Canada locations. I’ve noticed the spinner on the bottom left of the Google Map isn’t quite complete when the listing shows. Is there a way to wait for that Google Map spinner to be done before showing the listing?

    Here is the code I used:

    $(document).on('filteringcomplete.wpgmza', function () {
          $(childId).html(html);
          $(childId).append('<br>');
          html.show();
        });

    Thanks for your help.

    #49291

    TomRaley
    Member

    There’s also an issue where if I click North America and then click Canada too quickly, it seems to send the map into an endless loading stage and doesn’t actually filter by category. Here is my full JavaScript, perhaps I’m going about this the wrong way.

    jQuery(document).ready(function ($) {
      const select = $('#wpgmza_filter_select');
      const map_id = 1;
      const html = $('#wpgmza_marker_list_1');
      const NAlat = 43.58039086;
      const NAlng = -97.51464844;
      const EMEAlat = 39.63953756;
      const EMEAlng = 26.98242188;
      const LAlat = -22.917922948;
      const LAlng = -58.62304688;
      const APlat = 46.31658418;
      const APlng = 113.64257813;
      
      const zoom = function (lat, lng, zoom) {
        const point = new WPGMZA.LatLng(parseFloat(lat), parseFloat(lng));
        MYMAP[map_id].map.setCenter(point);
        MYMAP[map_id].map.setZoom(zoom);
      }
    
      $('h3.collapseomatic').click(function() {
        const id = $(this).attr('id');
        console.log(id);
        select.val(id);
        MYMAP[map_id].map.markerFilter.update();
        if (id === '2') {
          zoom(NAlat, NAlng, 4);
        } else if (id === '3') {
          zoom(EMEAlat, EMEAlng, 3);
        } else if (id === '4') {
          zoom(LAlat, LAlng, 3);
        } else if (id === '5') {
          zoom(APlat, APlng, 4);
        }
      });
    
      $('h4.collapseomatic').click(function () {
        const id = $(this).attr('id');
        const parentId = $('.colomat-visited').attr('id');
        console.log(parentId);
        const childId = <code>#target-${id}</code>;
        console.log(childId);
        select.val(id);
        MYMAP[map_id].map.markerFilter.update();
        $(childId).html('<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>');
        $(document).on('filteringcomplete.wpgmza', function () {
          $(childId).html(html);
          $(childId).append('<br>');
          html.show();
        });
      })
    });
    #49325

    Perry
    Moderator

    Hi Tom

    Thank you for bringing this to our attention, it appears that our REST API module is throwing an error on “abort” where it should not be –

    Can you please open /wp-google-maps/js/v8/rest-api.js and in the error handler on line 52, please add

    if(status == “abort”)
    return;

    This will cause the abort message to be ignored and allow filtering to continue. We’ll patch this into our master code immediately.

    Please confirm that solves the issue for you?

    Kind regards
    – Perry

    #49351

    TomRaley
    Member

    Hi Perry,

    That line of code added to the error handler did solve the issue of the map getting locked up. Also, that file gave me the hint I needed to get the above code working. Instead of the above code snippet, I used

    $.when($.ajax(WPGMZA.RestAPI.URL + route, params)).then(function () {
          $('#target-UK').html($html);
          $('#target-UK').append('<br>');
          $('#wpgmza_marker_list_1').show();
        });

    This code successfully waits for the filtering to be complete before displaying the list. Thanks for all your help!

    #49352

    TomRaley
    Member

    Nevermind, actually. That code didn’t seem to be doing what I thought it was. Still having the issue of the list displaying for a split second before it’s actually filtered. The above code didn’t actually work as intended, and the

    $(document).on('filteringcomplete.wpgmza', function () {
          $(childId).html(html);
          $(childId).append('<br>');
          html.show();
        });

    Doesn’t work either. Any thoughts?

    #49354

    TomRaley
    Member

    Update again. The following code worked to detect changes in the HTML in the list, instead of listening for the ajax call to finish.

    html.on("DOMSubtreeModified", function () {
          $(childId).html(html);
          $(childId).append('<br>');
          html.show();
        });

    Thanks again for all your help, sorry for all the extra posts, couldn’t figure out how to edit/delete replies.

    #49381

    Perry
    Moderator

    Hi Tom

    That’s great, thank you!

    Is there anything else we can help you with?

    Kind regards
    – Perry

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.