Converting c# .net string List into html dropdown - javascript

So I made a list of string in my c# .net application and I would like to store this list in a html dropdown. First of, I have no idea if I have done it right in my view, I have set my list but I have no idea if there are steps missing. My code is as follow :
CalendarFolder calendar = ewsconn.Calendar;
ExchangeService service = ewsconn.Service;
Calendars = ewsconn.Calendars;
foreach (var c in Calendars)
{
calendarNames.Add(c.DisplayName);
}
foreach (var s in calendarNames)
{
Response.Write(s + "<br />");
}
getCalendarList(calendarNames);
This is a list of every calendar folder names from x user in Microsoft exchange api. I need to use that list in a html dropdown to use it later on. Do I return it properly? Is there any steps I am missing along the way? My getCalendarList only returns the list I give it, it does nothing special.
In my javascript, the only value I am capable of getting is the Response.write from my code above. See code below:
$.ajax({
url: '/domain/Crm/getCalendars.aspx?email=' + useremail,
cache: false,
contentType: false,
processData: false,
type: 'POST',
dataType: "html",
success: function (data) {
alert(data);
}
});
Now I know there is a lot missing here, but I know I need to convert my c# list into an array to then use it in my html code, but how do I do it?
I have tried this from the research I made :
var array = #Html.Raw(Json.Encode(getCalendars.calendarNames));
for(var i = 0; i < array.length; i++) {
alert(array[i]); // should display "calendar1" then "calendar2" etc
but to be honest I don't know the proper syntax and I couldn't not get it to work.
Kind of a long wall of text but some help would be greatly appreciated.
Thank you!

#Html.Raw(Json.Serialize(--C# list--)) should work, if your C# list is valid. From there you can just populate the options in your select with the values.
But you can maybe make it work inside that ajax. You could add a comma after every entry, then split the response.
...
success: function (data) {
options = data.split(',')
//build the dropdown
}
...

Related

Get JSON data from WFS/Geoserver

I am struggling with getting data from WFS in my GeoServer. I want to get specific properties from the JSON returned by WFS and use it in my html page filling a table. I have read lots of posts and documentation but I can't seem to make it work. I have:
(a) changed the web.inf file in my geoserver folder to enable jsonp
(b) tried combinations of outputFormat (json or text/javascript)
(c) tried different ways to parse the JSON (use . or [], JSON.parse or parseJSON etc),
(d) used JSON.stringify to test whether the ajax call works correctly (it does!!)
but, in the end, it always returns undefined!!
function wfs(longitude, latitude){
function getJson(data) {
var myVar1=data['avgtemp1'];
document.getElementById("v1").innerHTML = myVar;
}
var JsonUrl = "http://88.99.13.199:8080/geoserver/agristats/wfs?service=wfs&version=2.0.0&request=GetFeature&typeNames=agristats:beekeeping&cql_filter=INTERSECTS(geom,POINT(" + longitude + " " + latitude + "))&outputFormat=text/javascript&format_options=callback:getJson";
$.ajax({
type: 'GET',
url: JsonUrl,
dataType: 'jsonp',
jsonpCallback:'getJson',
success: getJson
});
}
wfs(38, 23);
Could you please help me?
You are close to it. First, you have a typo in the variable name you are writing (myVar1 vs myVar). Secondly, your function is receiving a Json object, so you must dive into its structure. First you get the features, then the 1st one, then the property array, then the property of your choice.
I suggest you read a tutorial on Json Objects, as you will surely want to loop through properties/items, validate they are not null etc.
function getJson(data) {
var myVar1=data.features[0].properties['avgtemp1'];
document.getElementById("v1").innerHTML = myVar1;
}
At last, don't forget to use the debugger in your favorite browser. put a breakpoint in your function and check the structure and content of data.

Unable to loop through javascript object

I have a object district_boundaries which is leaflet geojson object
var district_boundary = new L.geoJson();
and the data is added through ajax call to a geojson file of district
$.ajax({
dataType: "json",
url: "data/district.geojson",
success: function(data) {
$(data.features).each(function(key, data) {
district_boundary.addData(data);
district_boundary.setStyle(district_boundary_styles["default"]);
});
}
});
So in the _layers there are 75 values, one example of such values is the one in the picture with key 149.
I need to loop through all these 75 values and get the values from features key. i.e the name of districts and use them to label the districts.
I tried with this
_test = district_boundary._layers;
for (var aht in _test) {
console.log('inside the loop');
var b = _test[aht];
console.log(b.feature.properties.NAME_3);
}
This works fine when tried in the console and shows the result
But when i tried with by running in the script of my page this doesnot work the though _test is populated with the values in district_boundary._layers, loop is not executed. What could be the reason can anyone please help me with this?
the output of msg and msg.d is
I am guessing your JSON data is getting wrapped in a d variable. Try the following -
$.ajax({
dataType: "json",
url: "data/district.geojson",
success: function(msg) {
//console.log(msg); //try this to see whether the data is really getting wrapped in d
var data = msg.d; //msg.d contains the actual data
$(data.features).each(function(key, data) {
district_boundary.addData(data);
district_boundary.setStyle(district_boundary_styles["default"]);
});
}
});
Solved. Everything in the code is fine except the flow of execution. I was trying to use the data which would be defined later according to the flow, so in the part of script where i tried to loop through _test it is not populated yet, but when i tried in console it was after all the data was loaded and hence it worked.

Show ajax tooltip from an SVG onclick event

I have an SVG with this code for some shapes (its a map)
onclick="top.traeDatos(evt.target.id);"
in the html file I have:
function traeDatos(region){
alert(region);
}
So, I click on a region, I have the alert window with the region name and the variable in the html file. Thats great
Now I want that the click on the map shows a popup with more information i'll get using ajax from multiple databases trough a file called, for example "getDetails.php".
Im new in js and ajax, I know how to make a standard call in ajax to get some information given an id (or name in this case), I know how to change the value of a text field to the text I get trought the ajax call...but I dont understand how to call ajax and show a tooltip from that javascript code in the SVG or the one in html.
Im not sure too of what tolltip to use, but one problem at the time ;)
Can you enlighten me a little.
Thanks!
Here's a start:
function traeDatos(region){
var domn = document.domain;
document.domain = domn;
var detURL = "http://" + domn + "/getDetails.php";
$.ajax({
url: detURL,
type: 'POST',
data: {
region: region
},
cache: false,
success: function(json){
var data = jQuery.parseJSON(json);
//using PHP's json_encode() you can return an array
//in the example below 'info' is an item in the array
$('#insert_place').val(data.info);
}
});
}
Let me know if you have some problem with that.

Enumerating through Yahoo Pipes generated JSON with jQuery fails

I'm trying to lessen manual update work by using Yahoo Pipes and jQuery to update a table with upcoming events from a different domain. I have created this Pipe to gather the data, and it seems to work.
Now I am reading the JSON file with the following jQuery Script taken from this tutorial:
$.ajax({
type: "GET",
url: "http://pipes.yahoo.com/pipes/pipe.run?_id=57aa32bf3481c8dca0c07afcf9b9dc29&_render=json",
async: false,
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/j-son;charset=UTF-8");
}
},
dataType: "json",
success: function(data){
$('body').append(data.query.results.a.content);
}
});
The jQuery append failes, I guess because 'data.query.results.a.content' does not relate well to the JSON structure created by the pipe.
I've tried altering both the pipe and the append in several ways and am just short of giving up, I'd be very grateful for your Input.
Think you are parsing the json result incorrectly.
On viewing the json object here http://jsonviewer.stack.hu/
You will observe content node for each item is at value.items[0].a.content
i.e. try something like this :
$('body').append(data.value.items[0].a.content);
You will need to iterate the items array like this
$.each(data.value.items, function(index,element) {
$('body').append(element.a.content);
});
Try it on fiddle : http://jsfiddle.net/EFvJf/

How to play with List of List of String with Javascript or Jquery using Ajax?

We're working on a big ASP.NET\VB.NET website project.
I need to populate three dropdownlists. To last two are independent of the previous ones. The population data comes from an SQL Server. I'd have no problem doing this with code-behind with post back but we don't want any PostBacks so I started to develop this in Ajax\jQuery.
Preface:
The dropdownlist's values and text are both different and tied up to the database. Server-side, the function called by the Ajax method returns a list of list of string with the values and text, i.e.
list[0][0] = "ID0"
list[0][1] = "VP"
The list is well built and returns the right value taken from the database.
Problem:
Now I want to populate the dropdownlist from the list sent to the ajax success response and I have a hard time doing it.
Here's the ajax part of it so far
$.ajax(
{
type: "POST",
url: "Projet.aspx/GetDir",
data: "{VP:'" + dd_effort_vp + "',DP:'" + dd_effort_dp + "',Direction:'" + dd_effort_d + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
// This code works if only a simple list of string is
// returned from the server-side called function.
var cars = response.d;
$.each(cars, function(index, value) {
$('#<%= dd_effort_directionp.clientid()%>').append(
$('<option></option>').val(value).html(value));
});
}
This code works IF and only IF I have a simple list of string returned by the server side function.
Now I want to modify it to get the values from the List of List of String (in var cars and assign the right ID and Description to each item in the newly populated DropdownList.
If your server is returning to you a list of list of strings, that will come to jQuery via an array, whose elements are arrays. You need to figure out/know which element of that array—which, again, will contain a list of strings—needs to go with your dropdown. If you want the 0th array, you would do:
var cars = response.d[0];
Also, it looks like you're going through a lot of trouble to find the relevant dropdown lists since asp.net is giving them unpredictable names.
Consider giving each drop down a unique class, via the CssClass property, and then select it that way.
<asp:DropDownList runat="server" CssClass="dd_effort_directionp"></asp:DropDownList>
$.each(cars, function(index, value) {
$(".dd_effort_directionp").append(
$("<option />").val(value).html(value));
});

Categories

Resources