[Resolved] WPViews Not Defined – Trying to get map to render on ajaxComplete…

[Author]

Posts

[shawnW-3]

I'd like to specifically request Christian Cox to help with this.

Tell us what you are trying to do?
I'm trying to postpone and reduce queries to speed up pageload.

I'm using wpv_do_shortcode() for a map view in the custom code section and having ajax call it and reset the response HTML in a modal popup.

This one I'm working on now is almost working. I'm getting the results to loop, but the map render isn't happening.

If I recall, the one I had built previously, currently running on my live site, required initialization in the UIKit modal window...
$('.uk-modal-full').on('shown.UIkit.modal', function() {
WPViews.view_addon_maps.init_maps();
});
and that seems to work without issue.

Now that it's coming through ajax, I'm getting 'WPView is not defined'.

I've tried many different places to put this in my JS, I've tried wrapping it in unique function, and I've tried using it combination with WPViews.view_addon_maps.reload_map() on ajaxComplete.

Long story short, I need to overcome both the ajax call and the modal window to make the map render and there's a lot to make sense of.

I'm including my JS/PHP, and I've stripped out some of the excess code to make it a little easier to read.

Should be noted that I have another View (a container for about 100 other views) on the same template that's being brought in through ajax to reduce queries on load. So there could be a conflict there(?), but this is the only map view I have running and it's just the map side which is refusing to render on the test page.

jQuery(document).ready(function($) {
    
    $(document).one('scroll', function(e) {
        
        var ajaxurl = '/wp-admin/admin-ajax.php';
        var data = {
            action: 'scrollingbuylocalview'
        };

        jQuery.post(ajaxurl, data, function(response) {
            $('#modalwindowcontent').html(response);
        });

    });
    
    $(document).ajaxComplete(function() {
        $('.uk-modal-full').on('shown.UIkit.modal', function() {
            WPViews.view_addon_maps.init_maps();
        });
    });
    
});

add_action('wp_ajax_nopriv_scrollingbuylocalview', 'scrollingbuylocalview');
add_action('wp_ajax_scrollingbuylocalview', 'scrollingbuylocalview');
function scrollingbuylocalview(){
    global $wpdb;
    $blusrip = $_SERVER['REMOTE_ADDR'];
    $blusrlocdetails = json_decode(file_get_contents("<em><u>hidden link</u></em>{$blusrip}?key=xxx"));
    $usrzip = $blusrlocdetails->zip;
    $fullbuylocalmapshrtcd = '[wpv-view name="buy-local-dealer-locator-quick-load" mapcenter="'.$usrzip.'"]';
    $scrollingbuylocalresult = wpv_do_shortcode($fullbuylocalmapshrtcd);

    echo $scrollingbuylocalresult;
 
    wp_die();
 
}

Is there a similar example that we can see?
This is how it's currently running. The view is just placed in the module content html and js clicks the use my location button on load, and if the user doesn't allow it, then it uses the IP data as the fallback.

hidden link (CLICK BUY LOCAL)

Unless your IP address has already been whitelisted for staging I'll need to get that to show you the new one that's being worked on with the above code.

This new one is going to be in the same place, but instead of loading the shortcode in the document, it's going to use ajax to call it after the page has loaded. Also, instead of loading in every possible result on load, then loading new results based on an action, it's going to use a shortcode attribute set by the IP data in the php to do a single search on the first load and if it's not accurate enough the user can click the 'use my location' button or enter an address.

I'll gladly accept any advice if you see flaws in this.

What is the link to your site?
hidden link

[Minesh]

Hello. Thank you for contacting the Toolset support.

What if you try to add the following code to functions.php file:

function load_script_for_ajax() {
    wp_enqueue_script( 'views-addon-maps-script' );
}
 
add_action( 'wp_enqueue_scripts', 'load_script_for_ajax' );

Does that help to resolve your issue?

[shawnW-3]

On the plus side, the previously mentioned error has gone away...

but I'm still not getting a rendered map in ajax / modal

Modified js (nothing stripped)

jQuery(document).ready(function($) {

    $('#buylocalajaxspinner').hide();
    
    $(document).one('scroll', function(e) {
        
        $('#buylocalajaxspinner').show();
        
        var ajaxurl = '/wp-admin/admin-ajax.php';
        var data = {
            action: 'scrollingbuylocalview'
        };

        jQuery.post(ajaxurl, data, function(response) {
            $('#trymaphere').html(response);
        });

    });
    
    $(document).ajaxComplete(function() {
        $('#buylocalajaxspinner').hide();
        WPViews.view_addon_maps.init_maps();
    });

    $('.uk-modal-full').on('shown.UIkit.modal', function() {
        WPViews.view_addon_maps.reload_map() ;
	});
    
});

If I add in the map ID like this..
WPViews.view_addon_maps.init_maps('buylocalqlmapblock');
WPViews.view_addon_maps.reload_map('buylocalqlmapblock') ;

I get this error...
wpv_addon_maps.js?ver=2.0.8:518 Uncaught TypeError: Cannot read property 'Map' of null
at WPViews.ViewAddonMaps.self.init_map (wpv_addon_maps.js?ver=2.0.8:518)
at WPViews.ViewAddonMaps.self.initMapOrWaitIfInsideHiddenBootstrapAccordionOrTab (wpv_addon_maps.js?ver=2.0.8:410)
at Object.<anonymous> (wpv_addon_maps.js?ver=2.0.8:328)
at c (jquery.min.js?ver=3.5.1:2)
at Object.fireWith [as resolveWith] (jquery.min.js?ver=3.5.1:2)
at l (jquery.min.js?ver=3.5.1:2)
at XMLHttpRequest.<anonymous> (jquery.min.js?ver=3.5.1:2)

Here's what's rendering in place of the map

<div id="js-wpv-addon-maps-render-buylocalqlmapblock" style="width:100%; height:380px;" class="wpv-addon-maps-render js-wpv-addon-maps-render js-wpv-addon-maps-render-buylocalqlmapblock " data-map="buylocalqlmapblock" data-generalzoom="5" data-generalcenterlat="0" data-generalcenterlon="0" data-fitbounds="on" data-singlezoom="12" data-singlecenter="on" data-maptype="roadmap" data-showlayerinterests="false" data-markericon="/wp-content/uploads/2019/12/locator_droplet.svg" data-markericonhover="" data-draggable="on" data-scrollwheel="on" data-doubleclickzoom="on" data-maptypecontrol="on" data-fullscreencontrol="on" data-zoomcontrol="on" data-streetviewcontrol="on" data-backgroundcolor="" data-cluster="off" data-clustergridsize="60" data-clustermaxzoom="" data-clusterclickzoom="on" data-clusterminsize="2" data-stylejson="//staging.ddaudio.com/wp-content/plugins/toolset-maps/resources/json/Standard.json" data-spiderfy="off" data-streetview="off" data-markerid="" data-location="" data-lat="0" data-long="0" data-heading="" data-pitch=""></div>

[Minesh]

I can not tell anything until I review your setup.

In addition to that, this is a custom code which is beyond the scope of our support policy but still I would like to review it once and let me see if I can share any solution.

Please share information where I can see the map and what is your expected results.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[shawnW-3]

It should also be noted that this map view that I'm using has been tested as shortcode in HTML, outside of ajax functions, using a non-variable mapcenter attribute.

It ran just fine. Hope that saves some time.

[Christian Cox]

Hi, Minesh has reassigned the ticket to me so I can continue investigating. I will take a closer look and see if there is anything obvious I can do to help initialize the map after AJAX complete. I just tried to access staging but I'm seeing a 403 error so I assume this means you need my IP again. I will include that in a separate private reply. Let me know when you've whitelisted me so I can jump into the staging site for testing. Thank you!

[shawnW-3]

Please try it now and let me know if you have any issues.

[Christian Cox]

Okay I'm able to log in now, thanks. I don't have a lot of information about loading maps ad hoc like this, but what I do know is that under normal circumstances there should be a map object available for each map in JavaScript at WPViews.view_addon_maps.map, but the corresponding map object does not exist in your case because the map is not present in the page at page load. As an example for comparison, create a page that contains a map that exists at page loadtime, not loaded via AJAX. Then in the console, you can check out the Toolset Maps objects available upon page load by executing this JS in the browser console:

WPViews.view_addon_maps.maps

You'll see an object for each map, indexed by map ID, like in the screenshot here. In this example my map ID was map-1.

So at this point I'm not really sure what to suggest next. There's no public AJAX API methods for displaying maps or Views, so I don't have much guidance available for you and to be honest I'm not sure exactly how it's done. My best advice would be to set up a similar scenario in a View. I would create a View that includes a map in the loop using a variable name, so the ID changes for each result. Set the limit of the View to 1 result, and include AJAX pagination. Then when you paginate to the second page of results, it's a similar scenario where a new map object is created in JS and drawn into the DOM. You can set breakpoints in the code and try to sort it all out from there.

[shawnW-3]

I'm really surprised there isn't any information on how to make this work. Loading the whole thing through AJAX following user action seems like a perfect way to delay the map/queries and "reduce initial server response time" which is my main goal.

"I would create a View that includes a map in the loop using a variable name, so the ID changes for each result. Set the limit of the View to 1 result, and include AJAX pagination. Then when you paginate to the second page of results, it's a similar scenario where a new map object is created in JS and drawn into the DOM. You can set breakpoints in the code and try to sort it all out from there."

I'm having a lot of trouble visualizing how that would work with all those results, and how to connect them. I think I get what you're saying.

Remove wpv-map-render from the output of the original view.
Create a second view, put the wpv-map-render in the loop of that view rather than output
On the original view's loop, wpv-map-marker map_id="X"
On the new view, [wpv-item index=1] (NOTHING)
On the new view, [wpv-item index=2] - wpv-map-marker map_id="X"
The selected content type doesn't matter so long as there are two or more results.
Then use something like...

$(document).one('scroll' ​function() {
$('.next-pagination-button').click();
});

...to bring it in with Ajax?
And of course adjust html of both views accordingly to make it look the same as the original, single, view.

Let me know if I'm understanding. I'll certainly try it if you think the results will connect across two different views. I've never even considered that could be possible, so pretty creative if I'm understanding.

Again, the main goal is speed.

[shawnW-3]

I think it might work with the test I've set up, but I can't get index working. My thinking is to get the savings on speed we need the first result to be blank, so unless you had something else in mind, we need [wpv-item index=1] to nothing. For the second one, that contains the map I've tried [wpv-item index=2], [wpv-item index=other], and [wpv-item index=last] - but can't get them working with or without a loop template.

Please take look at views...
Test View for Results - buy local
Test View for Map - buy local

...embedded here at the bottom of page...
hidden link

...and let me know if you see anything wrong. I haven't created any JS to trigger the pagination. The map view is set to Display 2, with "Pagination enabled with manual transition and AJAX" - display 1 per page, and I used [wpv-pager-nav-links output="bootstrap"] as pagination controls for testing.

[Christian Cox]

Let me know if I'm understanding. I'll certainly try it if you think the results will connect across two different views.
I think my point was not clear, I am sorry for the confusion this caused. I did not intend for you to adjusting the way your View is currently set up, I meant it might be helpful to set up a separate View as a test/comparison to see how maps are added to the page when paginating. This test would not change how your View is implemented per se, it would only change what happens when the modal is opened and you want to display a map. I'm saying that the two scenarios are similar, because both involve adding a map onto the page after page load. In the test I mentioned, Views inserts the map in the page automatically. In your desired scenario, the map must be inserted in the page programmatically using similar procedures. So the JavaScript code that executes when a View paginates and a new map is added to the page is similar to the code you'll need to execute when the modal is opened and you want to display a map that was not initially part of the page. I hope this helps clarify what I was suggesting, it's a similar scenario you can use as an example.

I think it might work with the test I've set up, but I can't get index working.
Something odd is going on here in the test map View you set up:
hidden link
I can't save any changes. Each time I see an error message pop up at the top of the screen that one or more sections were not saved, and the View editor interface becomes locked (screenshot here). I have to reload the page at that point. If I check the network response after attempting to save, I see a permission / capability error, but that doesn't really make any sense. If I can load the View editor, I should be able to make any changes in that editor without permissions issues. AJAX response when saving the View:
{"success":false,"data":{"type":"capability","message":"You do not have permissions for that."}}
That could indicate a server-side error that isn't handled well, resulting in some nonsensical message in the error here. Are you seeing the same problem when you make changes in this View?

[shawnW-3]

Try it now, for no apparent reason the Toolset Support user role didn't have edit views selected.

[Christian Cox]

For the second one, that contains the map I've tried [wpv-item index=2], [wpv-item index=other], and [wpv-item index=last] - but can't get them working with or without a loop template.
There was no second item, because pagination was set to 1 result per page. The wpv-item index=2 block will only appear when there are at least 2 items per page, so I've made that change now and I see a map on the front-end.

[shawnW-3]

I guess that makes sense. I had the limit set to two results, but the ajax display set to one result. I wrongly figured index would handle the total amount of results, not just those being displayed at one time.

I don't know how that helps though, even as an example. The first result isn't ajax is it? Just the second and beyond(?).

[shawnW-3]

I understand you're off work today. I'm going to be setting up a temporary alternative on the live site, which means I'll be testing the the alternative on staging today. I'll try to put everything back into place by the end of day today, because I very much want to use ajax as a permanent solution.