d3netxer · February 14, 2015 12:19
diff --git a/test_form.html b/test_form.html
 {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
 {% load staticfiles %}

 <html>
  <head>
  
  <style>
      #map_canvas {
        width: 500px;
        height: 400px;
      }
    </style>
    <!-- <script src="https://maps.googleapis.com/maps/api/js"></script> -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">
 	$(document).ready(function() {
 		$('.ajaxProgress').hide();
 		$('.success').hide();
 		$('.matching_name').hide()
 	});
 	</script>
 	
 	<script>
 	
 	//haha I need to declare the map variable here to call it later in the ajaxRequest function!
 	var map;
 	var myLatlng = new google.maps.LatLng(19.738571, -72.196125);
 	var marker2;
 	
  function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    
    var mapOptions = {
      center: myLatlng,
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(mapCanvas, mapOptions);
    
    
    var marker = new google.maps.Marker({
    position: myLatlng,
    draggable:true,
    icon: "{% static "entries/img/purple_MarkerA.png" %}"
    //title:"Hello World!"
 	});

 	// To add the marker to the map, call setMap();
 	marker.setMap(map);

 	 google.maps.event.addListener(marker, "dragend", function(){
        document.getElementById("lat").value=marker.position.lat();
        document.getElementById("lon").value=marker.position.lng();
    });
    
  }
  //map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
  google.maps.event.addDomListener(window, 'load', initialize);
    
 </script>

 	
 	<script type="text/javascript">



    function ajaxRequest() {
    	$('.ajaxProgress').show();
    	
    	//I hard-coded sending Cardiovascular,Dental,Diabetes, and Emergency values 
    	//simulating as if they were checked by the user
    	//In a real ver, there would be code that would put only the checkboxes
    	//that were checked on the form in data:
    	
 		//builds an array of what checkboxes were checked
 		services_array = [];
    	$('input[type=checkbox]:checked').each(function() {
 			// Do something interesting
 			console.log($(this).attr("id"));
 			services_array[services_array.length] = $(this).attr("id");
 		});
    	
        $.ajax({
            type: "POST",
            url: "{% url 'entries:post-request' %}",
            dataType: "JSON",
            async: true,
            data: {
            	organization : $('#organization').val(),
            	lat : $('#lat').val(),
            	lon : $('#lon').val(),
            	services : services_array,
            	//Cardiovascular : $('#Cardiovascular').val(),
            	//Dental : $('#Dental').val(),
            	//Diabetes : $('#Diabetes').val(),
            	//Emergency : $('#Emergency').val(),
            },
            success: function (json) {
                //alert(json);
                //var result = JSON.stringify(json);
                //alert(result);
                $('.matching_name').hide()
                
                console.log('no alerts?');

                
                nearby_facilities_json = json['nearby_facilities']
                
                matching_facilities = json['matching_facilities'];
                
                console.log(typeof matching_facilities)
                
                if (typeof matching_facilities != 'undefined') {
    				// variable is defined
    				console.log("should be defined")
    				$('.matching_name').show();
    				var matching_facility_string = JSON.stringify(matching_facilities);
                	//alert(matching_facility_string);
 				
 					/*
 					//this worked to some degree
 					var items = [];
 					  $.each(json.matching_facilities.features[0].properties, function (key, val) {
 							items.push('<li id="' + key + '">' + key + ': ' + val + '</li>');
 					});
 					*/
 				
 					var items = [];
 				
 					var key, count = 0;
 					for(key in json.matching_facilities.features) {
 					  if(json.matching_facilities.features.hasOwnProperty(key)) {
 						count++;
 					  }
 					}
 					console.log('count is: ');
 					console.log(count);

 					for(var i = 0; i < count; i++){
 						console.log(json.matching_facilities.features[i].properties);
 						items.push('<p>');
 						$.each(json.matching_facilities.features[i].properties, function (key, val) {
 								items.push('<li id="' + key + '">' + key + ': ' + val + '</li>');
 						});
 					
 						create_point(matching_facilities.features[i].properties.latitude, matching_facilities.features[i].properties.longitude);
 					};
 					//this call is good, looked at: http://stackoverflow.com/questions/13462580/iterating-geojson-object-with-javascript
 					//console.log(json.matching_facilities.features[0])
 				
 					$( "<ul/>", {
 						"class": "my-new-list",
 						html: items.join( "" )
 					  }).appendTo( "body" );
 				
 					$('.ajaxProgress').hide();
 					$('.success').show();
 				
 					$("#output").html(json.type);
 					console.log('success' + json);
 				
 				}

                
                /*
                var json2_string = '{"type": "Point","coordinates": [-105.01621,39.57422]}';
 				var json2 = JSON.parse(json2_string);
 				var result2 = JSON.stringify(json2);
                alert(result2);
 				*/
 				
 				//adds the nearby facilities to the map
 				map.data.addGeoJson(nearby_facilities_json);
                
                //not working for some reason
                //map.data.overrideStyle(map.data.getFeatureById('match'), {icon: "{% static "entries/img/purple_MarkerA.png" %}"});
                
                //just create a new marker with same lat lon
                //console.log(matching_facilities.features[0].properties.latitude)
                //console.log(matching_facilities.features[0].properties.longitude)
                
                function create_point(lat,lon) {
                	var matching_facility_marker = new google.maps.LatLng(lat,lon);
                	// To add the marker to the map, use the 'map' property
                	var matching_marker = new google.maps.Marker({
 						position: matching_facility_marker,
 						title:"Hello World!",
 						icon: "{% static "entries/img/purple_MarkerA.png" %}"
 					});
 					// To add the marker to the map, call setMap();
 					matching_marker.setMap(map);
                }
                
            }
        });
        
    }
    
 	</script>


 </head>

 	
  <body>
 
 {% comment %}
 <form action= "{% url 'entries:post-request' %}" method="post" name="test_form">
 {% csrf_token %}
 {% endcomment %}

 <form onsubmit="return false;">
 <br>
 Organization: <input type="text" id = "organization" name="organization" style="width: 300px;"><br>
 <br>
 Select provided services:
 <br>
 <br>
 <input type="checkbox" id="Cardiovascular" name="Cardiovascular" value="Cardiovascular">Cardiovascular<br>
 <input type="checkbox" id="Dental" name="Dental" value="Dental">Dental<br>
 <input type="checkbox" id="Diabetes" name="Diabetes" value="Diabetes">Diabetes<br>
 <input type="checkbox" id="Emergency" name="Emergency" value="Emergency">Emergency<br>
 <br>
 lat: <input id="lat" type="text" name="lat" style="width: 150px;"> lon: <input id="lon" type="text" name="lon" style="width: 150px;"> 
 <br>
 <br>
 <div id="map_canvas"></div>
 <br>
 <button class="updateButton" onclick="ajaxRequest()">Submit</Button>
 {% comment %}
 <input type="submit" value="Create new account" />
 {% endcomment %}
 </form>

 <div id="output">
 	<div class = "ajaxProgress">
 		<h3>please wait...</h3>
 	</div>
 	<div class = "success">
 		<h3>Success!</h3>
 	</div>
 	<div class = "matching_name">
 		<h3>One of the results has the same name</h3>
 	</div>
 </div>

 <br>

 </body>
 

 </html>
	{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
	{% load staticfiles %}

	<html>
	<head>

	<style>
	#map_canvas {
	width: 500px;
	height: 400px;
	}
	</style>
	<!-- <script src="https://maps.googleapis.com/maps/api/js"></script> -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	$('.ajaxProgress').hide();
	$('.success').hide();
	$('.matching_name').hide()
	});
	</script>

	<script>

	//haha I need to declare the map variable here to call it later in the ajaxRequest function!
	var map;
	var myLatlng = new google.maps.LatLng(19.738571, -72.196125);
	var marker2;

	function initialize() {
	var mapCanvas = document.getElementById('map_canvas');

	var mapOptions = {
	center: myLatlng,
	zoom: 13,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(mapCanvas, mapOptions);


	var marker = new google.maps.Marker({
	position: myLatlng,
	draggable:true,
	icon: "{% static "entries/img/purple_MarkerA.png" %}"
	//title:"Hello World!"
	});

	// To add the marker to the map, call setMap();
	marker.setMap(map);

	google.maps.event.addListener(marker, "dragend", function(){
	document.getElementById("lat").value=marker.position.lat();
	document.getElementById("lon").value=marker.position.lng();
	});

	}
	//map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
	google.maps.event.addDomListener(window, 'load', initialize);

	</script>


	<script type="text/javascript">



	function ajaxRequest() {
	$('.ajaxProgress').show();

	//I hard-coded sending Cardiovascular,Dental,Diabetes, and Emergency values
	//simulating as if they were checked by the user
	//In a real ver, there would be code that would put only the checkboxes
	//that were checked on the form in data:

	//builds an array of what checkboxes were checked
	services_array = [];
	$('input[type=checkbox]:checked').each(function() {
	// Do something interesting
	console.log($(this).attr("id"));
	services_array[services_array.length] = $(this).attr("id");
	});

	$.ajax({
	type: "POST",
	url: "{% url 'entries:post-request' %}",
	dataType: "JSON",
	async: true,
	data: {
	organization : $('#organization').val(),
	lat : $('#lat').val(),
	lon : $('#lon').val(),
	services : services_array,
	//Cardiovascular : $('#Cardiovascular').val(),
	//Dental : $('#Dental').val(),
	//Diabetes : $('#Diabetes').val(),
	//Emergency : $('#Emergency').val(),
	},
	success: function (json) {
	//alert(json);
	//var result = JSON.stringify(json);
	//alert(result);
	$('.matching_name').hide()

	console.log('no alerts?');


	nearby_facilities_json = json['nearby_facilities']

	matching_facilities = json['matching_facilities'];

	console.log(typeof matching_facilities)

	if (typeof matching_facilities != 'undefined') {
	// variable is defined
	console.log("should be defined")
	$('.matching_name').show();
	var matching_facility_string = JSON.stringify(matching_facilities);
	//alert(matching_facility_string);

	/*
	//this worked to some degree
	var items = [];
	$.each(json.matching_facilities.features[0].properties, function (key, val) {
	items.push('<li id="' + key + '">' + key + ': ' + val + '</li>');
	});
	*/

	var items = [];

	var key, count = 0;
	for(key in json.matching_facilities.features) {
	if(json.matching_facilities.features.hasOwnProperty(key)) {
	count++;
	}
	}
	console.log('count is: ');
	console.log(count);

	for(var i = 0; i < count; i++){
	console.log(json.matching_facilities.features[i].properties);
	items.push('<p>');
	$.each(json.matching_facilities.features[i].properties, function (key, val) {
	items.push('<li id="' + key + '">' + key + ': ' + val + '</li>');
	});

	create_point(matching_facilities.features[i].properties.latitude, matching_facilities.features[i].properties.longitude);
	};
	//this call is good, looked at: http://stackoverflow.com/questions/13462580/iterating-geojson-object-with-javascript
	//console.log(json.matching_facilities.features[0])

	$( "<ul/>", {
	"class": "my-new-list",
	html: items.join( "" )
	}).appendTo( "body" );

	$('.ajaxProgress').hide();
	$('.success').show();

	$("#output").html(json.type);
	console.log('success' + json);

	}


	/*
	var json2_string = '{"type": "Point","coordinates": [-105.01621,39.57422]}';
	var json2 = JSON.parse(json2_string);
	var result2 = JSON.stringify(json2);
	alert(result2);
	*/

	//adds the nearby facilities to the map
	map.data.addGeoJson(nearby_facilities_json);

	//not working for some reason
	//map.data.overrideStyle(map.data.getFeatureById('match'), {icon: "{% static "entries/img/purple_MarkerA.png" %}"});

	//just create a new marker with same lat lon
	//console.log(matching_facilities.features[0].properties.latitude)
	//console.log(matching_facilities.features[0].properties.longitude)

	function create_point(lat,lon) {
	var matching_facility_marker = new google.maps.LatLng(lat,lon);
	// To add the marker to the map, use the 'map' property
	var matching_marker = new google.maps.Marker({
	position: matching_facility_marker,
	title:"Hello World!",
	icon: "{% static "entries/img/purple_MarkerA.png" %}"
	});
	// To add the marker to the map, call setMap();
	matching_marker.setMap(map);
	}

	}
	});

	}

	</script>


	</head>


	<body>

	{% comment %}
	<form action= "{% url 'entries:post-request' %}" method="post" name="test_form">
	{% csrf_token %}
	{% endcomment %}

	<form onsubmit="return false;">
	<br>
	Organization: <input type="text" id = "organization" name="organization" style="width: 300px;"><br>
	<br>
	Select provided services:
	<br>
	<br>
	<input type="checkbox" id="Cardiovascular" name="Cardiovascular" value="Cardiovascular">Cardiovascular<br>
	<input type="checkbox" id="Dental" name="Dental" value="Dental">Dental<br>
	<input type="checkbox" id="Diabetes" name="Diabetes" value="Diabetes">Diabetes<br>
	<input type="checkbox" id="Emergency" name="Emergency" value="Emergency">Emergency<br>
	<br>
	lat: <input id="lat" type="text" name="lat" style="width: 150px;"> lon: <input id="lon" type="text" name="lon" style="width: 150px;">
	<br>
	<br>
	<div id="map_canvas"></div>
	<br>
	<button class="updateButton" onclick="ajaxRequest()">Submit</Button>
	{% comment %}
	<input type="submit" value="Create new account" />
	{% endcomment %}
	</form>

	<div id="output">
	<div class = "ajaxProgress">
	<h3>please wait...</h3>
	</div>
	<div class = "success">
	<h3>Success!</h3>
	</div>
	<div class = "matching_name">
	<h3>One of the results has the same name</h3>
	</div>
	</div>

	<br>

	</body>


	</html>