Passing Text from Selection Box to Ajax Request and reloading the Map View

[Joseph Gutenson]

Hey All,

This is more of a general jQuery/AJAX question than specific to Tethys but I can give it a tethys spin and it may be useful to someone in the group.

I have an event listener watching a select box form.  When an option is selected the code passes the selection to an AJAX call which I then hope to use to requery the database and reload the map (using the TETHYS_MAP_VIEW.reInitializeMap(); method).  Here is the code:

    var select_index_no = document.getElementById('index-no-form');

    select_index_no.addEventListener("select",function(event) {

        var selected_index_nos = $("#index-no-form option:selected").each(function(){

            $.ajax({

                    url: 'map',

                    method: 'POST',

                    data: {'selected_index_nos' : selected_index_nos

                    },

                    success: function(data) {

                        //add new map to map div

                        $('#main_map_div').html(data);

                       TETHYS_MAP_VIEW.reInitializeMap(); 

                    }

            });

        });

    }); // document ready

It seems as though the AJAX call doesn't like the .each() call I make in line 3.  My question is what method should I use to pass the selection to AJAX or am I misinterpreting the exception I am receiving? 

Thanks,

Joseph 

[Ezra Rice]

Joseph,

Your AJAX call is wrapped inside of the variable that you are referencing as its data. If you are trying to submit a separate AJAX call for each form option that is selected, you need to wrap the whole thing in a loop and set the selected_index_nos to be the current iteration before you can pass it as data in your AJAX call. Try something like:

var select_index_no = document.getElementById('index-no-form');

select_index_no.addEventListener("select", function(event) {

    var selected_index_nos = $("#index-no-form option:selected");

    for current_index in selected_index_nos {

        $.ajax({

            url: 'map',

            method: 'POST',

            data: {'selected_index_nos': current_index

            },

            success: function(data) {

                        //add new map to map div

                        $('#main_map_div').html(data);

                       TETHYS_MAP_VIEW.reInitializeMap(); 

                    }

            });

        });

    }); // document ready

Please clarify the goal of the method if this doesn't help.

--
You received this message because you are subscribed to the Google Groups "Tethys Platform" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tethysplatfor...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tethysplatform/8c36fc66-9b18-4ce7-8d51-64885cdaaea3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[alansnow21]

Joseph,

You probably only want to send 1 AJAX call to load the map 1 time for all of the multiple select options instead of an AJAX call for each selected option as you want a single response (i.e. the queried map). I would recommend collecting the selected elements into an array and send the array through a single AJAX request.

Also, https://api.jquery.com/serialize may or may not be useful to you depending on how you are doing this.

Good luck!

[Joseph Gutenson]

Hey Ezra,

Sorry for the delay in responding!

I am trying to send text from a select box to the map and filter the map layer based upon the text input provided.  So, for instance, I may query based upon Country where the point is located.  This is in the point database, so I want to filter until only the points in the country or countries the user selects.

I have now realized that the $('#main_map_div').html(data); maybe the wrong approach to this.  

Thanks,

Joseph

[swainn]

If I understand you correctly, you want to filter down the points on the map based on some attribute the user types in an input box? Something that would probably help you would be to use the OpenLayers JavaScript API. To do it in Tethys, you need to use the getMap() method: http://docs.tethysplatform.org/en/1.3.0/tethys_sdk/gizmos/map_view.html#tethys-map-view-getmap This returns the main OpenLayers map object and with this, you can manipulate all of the layers and data in the map programmatically. Checkout the OpenLayers API documentation to see what you can do with its API: http://openlayers.org/en/v3.10.1/apidoc/ol.Map.html Also helpful if you are new to the OpenLayers API is the Examples page: http://openlayers.org/en/v3.10.1/examples/

[Joseph Gutenson]

I apologize for the delay but got with Alan yesterday to close this question.  So my major error in this was that I need a main page (controller, template, javascript) along with a ajax page (controller, template) to update to the map on the main page.  Thus, I just need to apply the instructions at http://docs.tethysplatform.org/en/latest/tethys_sdk/gizmos/map_view.html#tethys-map-view-reinitializemap.  The part that confused me was that you need both a main page where everything loads, including the text input and a secondary page to reinitialize the changes to the map.  Thanks everyone for looking into this!

-Joseph