Hi all, I am trying to build this application that lists all web services within each ArcGIS Server folders. I am trying to programmatically feed a drop down list with ArcGIS Server folder's names so the user just has to select the folder of his choice and it returns all services in a table. The following code works great but I had to manually enter each folder:
<!DOCTYPE html> <html> <head> <title>Service Info</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"> <style> html, body, #details { padding: 0; margin: 0; height: 100%; } .dgrid-cell-padding { padding: 10px !important; } .dgrid { height: 100% !important; } .dgrid-cell{ border:1px solid black !important; } </style> <script src="http://js.arcgis.com/3.14/"></script> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> <script> require([ "esri/request", "dojo/_base/array", "dojo/dom", "dojo/domReady!" ], function (esriRequest, array, dom, Grid) { $(document).ready(function () { var baseUrl = "http://webgisdevint1/arcgis/rest/services"; $('.selectpicker').on('change', function(){ var baseFolder = $(this).find("option:selected").val(); esriRequest({ url: baseUrl + "/" + baseFolder, content: { "f": "json" }, callbackParamName: "callback" }).then(function (response) { var data = array.map(response.services, function (service, index) { return { "url": "<a target='_blank' href='" + baseUrl + "/" + service.name + "/" + service.type + "'>" + baseUrl + "/" + service.name + "/" + service.type + "</a><br>", "name": service.name, "type": service.type, "id": index } }); $('#example').DataTable({ destroy: true, data: data, columns: [ { title:"URL", data: "url" }, { title: "Name", data: "name" }, { title: "Type", data: "type" } ] }); }); }); }); }); </script> </head> <body class="claro"> <select class="selectpicker"> <option>Search web GIS Folders:</option> <option>Alex_Try</option> <option>CalMAPPER</option> <option>davin</option> <option>ForestPractice</option> <option>FRAP</option> <option>Pipeline</option> <option>PPFIS</option> <option>ResourceMgmt</option> <option>System</option> <option>testing</option> <option>Utilities</option> <option>WatershedMapper</option> </select> <table id="example" class="display" width="100%"></table> </body> </html>
Any idea is more than welcome,
Thanks,
Alex
Solved! Go to Solution.
I am actually running it from my localhost on my IIS7.5 (in domain registered computer). And using my own Server's URL. Any idea?
As you can see on JSbin, I am experiencing about the same problem: https://jsbin.com/zomerizeme/edit?html,output
Alex,
The problem is the lack of a specified callback on the first esriRequest.
The mixture of https and http urls does not help either (line 10 and 35 was https) line 35 did not specify a protocol at all. Line 51 and 52 added.
<!DOCTYPE html> <html> <head> <title>Service Info</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> <link rel="stylesheet" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"> <style> html, body, #details { padding: 0; margin: 0; height: 100%; } .dgrid-cell-padding { padding: 10px !important; } .dgrid { height: 100% !important; } .dgrid-cell { border: 1px solid black !important; } </style> <script src="http://js.arcgis.com/3.14/"></script> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> <script> require([ "esri/request", "dojo/_base/array", "dojo/dom", "dojo/domReady!" ], function (esriRequest, array, dom) { $(document).ready(function () { var baseUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services"; esriRequest({ url: baseUrl + "/", content: { "f": "json" }, handleAs: "json", callbackParamName: "callback" }).then(function( response ){ $.each(response.folders, function (index, value) { $('.selectpicker').append($('<option>', { value: value, text: value })); }); $(".selectpicker").val($(".selectpicker option:first").val()).change(); }); $('.selectpicker').on('change', function () { var baseFolder = $(this).find("option:selected").val(); esriRequest({ url: baseUrl + "/" + baseFolder, content: { "f": "json" }, handleAs: "json", callbackParamName: "callback" }).then(function (response) { var data = array.map(response.services, function (layer, index) { return { "url": "<a target='_blank' href='" + baseUrl + "/" + baseFolder + "/" + layer.name + "'>" + baseUrl + "/" + baseFolder + "/" + layer.name + "/</a><br>", "name": layer.name, "id": index } }); $('#example').DataTable({ destroy: true, data: data, columns: [ { title: "URL", data: "url" }, { title: "Name", data: "name" } ] }); }); }); }); }); </script> </head> <body class="claro"> <select class="selectpicker" prompt="Search web GIS Folders:"> </select> <table id="example" class="display" width="100%"></table> <table id="layers" class="display" width="100%"></table> </body> </html>
That was it thank you Robert!It works great!