Populate list from arcgis server service in JQUERY javascript aplication instead of DOJO?

DavidDíez

I would like to populate a list on a select combobox using jquery with data from an arcserver service.I'm wondering if this is possible and if so how i would implement it. I'm using the esri javascript api v3.13 and arcserver.

I did it before using DOJO but now i need Jquery instead of Dojo to implement my old code with Bootsrap web mobile aplication.

 

What i need is to click on the select option and the code should access to an unique field in my service layer and then it should show which value options i could choose(For example a field called Visietd which unic values are yes or no)

 

For example how should i write dijit.byid("fiedname") in jquery instead of Dojo??

For example how should i write dojo.addOnLoad(init) in jquery instead of Dojo?? Any idea? Thank you very much.

CODE WITH DOJO INTENDED TO BE CHANGED TO JQUERY: The code below makes a query in my service filtering the field "Visitado" :After this that data is stored with the unique field options values and it is populated the list (in a select in the html) with that options.

 

Do I need to change everything, or perhaps it is ok only changing

dijit.byid (maybe with $("#Visitado")) and dojo.addOnLoad(init); ??

 

 

 

    function init() {

    

          var queryTask7 = new esri.tasks.QueryTask("http://localhost:6080/arcgis/rest/services/telefonica/brazil/MapServer/0");

     

        //Define query parameters

        var query7 = new esri.tasks.Query();

        query7.outFields = ["Visitado"];

        query7.returnGeometry = false;

        query7.where  = "Visitado  <> ''";

        queryTask7.execute(query7,populateList);

 

 

       }

    

     function populateList(results) {

        //Populate the dropdown list box with unique values

        var zone;

        var values = [];

        var testVals={};

 

        //Add option to display all zoning types to the dropdown list

        //values.push({name:"ALL"})

     

        var features = results.features;

        dojo.forEach (features, function(feature) {

          zone = feature.attributes.Visitado;

          if (!testVals[zone]) {

            testVals[zone] = true;

            values.push({name:zone});

          }

        });

     

        var dataItems = {

               identifier: 'name',

               label: 'name',

               items: values

        };

        var store = new dojo.data.ItemFileReadStore({data:dataItems});

        dijit.byId("Visitado").set("store", store);

      }

 

 

      dojo.addOnLoad(init);

     

     //OLD HTML CODE NEEDED FOR DOJO

      Visitados:

     <select id="Visitado"        dojotype="dijit.form.ComboBox"                                          autoComplete="true" forceValidOption="true" value="Seleccione" ></select>

 

     //NEW HTML CODE NEEDED FOR JQUERY AND BOOTSRAP

      <select id="basic" class="selectpicker show-tick form-control">

      </select>

TyroneBiggums

You're already pretty close. Are you still using the Esri JavaScript API? First, you probably should be okay to continue using dojo. But, I also use jquery where I can.

In your populateList function, your initializations and push will have the same syntax in jquery. The first change will probably be your forEach. jquery syntax for that is very similar. You already posted the correct way to reference Visitado in jquery.

Now for the data store and addOnLoad, the concept is similar but the syntax will be more difficult to google. For addOnLoad, look into jquery's document ready syntax. For the data store, you can look into adding data to a select with jquery. I'll give you a hint... it's something like $.each(dataItems, function(key, value) { $('#Visitado').append ( value: value, text: key) }. This is untested code so please make sure you understand $.each in jquery first.

Don't forget to remove dojotype from your HTML, and if those are dojo specific css class names, you may need your own.