GET リクエスト (formExample1.html) のフォームを表示するように、views.py にメソッドを記述しました。フォームを POST で送信し、いくつかの処理を行った後、結果を表示しています。ページ (results.html)。
フォームは正しく表示され、フォームが送信されると、POST リクエストが正しく生成され、Django サーバーによって受信されるため、実行するはずのすべてのことを実行しますが、最終的に結果ページをレンダリングしていません: ブラウザーフォームページにとどまります。
def formExample1(request):
print 'RECEIVED REQUEST: ' + request.method
if request.method == 'POST':
value1 = request.REQUEST['value1']
value2 = int(request.REQUEST['value2'])
# etc
#
geojson = createGeoJSON(value1, value2)
print geojson #json is correctly generated at printed at server console
return render(request, 'results.html', {'geo_json': geojson}) # This is what is not working
else: #GET
return render(request, 'formExample1.html') # Working OK
また、geoJSON オブジェクトを render 関数に渡さないと、どちらも機能しません。
ここには詳細が欠けていると思います。何か助けはありますか？
編集：結果ページを表示しても役に立たないと思いますが、ここにあります。これは現在、OpenLayers マップを含み、geojson からマップにデータをフィードすることを意図している単純な html です (私が渡している geojson を取得する方法がわからないため、その方法はまだわかりません)。しかし、それは別の話です）。そう：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="{{STATIC_URL}}css/style.css" type="text/css">
<script src="{{STATIC_URL}}js/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
// Here is where I'm trying to get the geojson I'm passing, but I think this is wrong. Anyway has nothing to do with current problem
var featurecollection = {{ geo_json|safe }};
var geojson_format = new OpenLayers.Format.GeoJSON();
var vector_layer = new OpenLayers.Layer.Vector();
map.addLayer(vector_layer);
vector_layer.addFeatures(geojson_format.read(featurecollection));
}
</script>
</head>
<body onload="init()">
<h1 id="title">GeoJSON Example</h1>
<div id="tags">
JSON, GeoJSON
</div>
<p id="shortdesc">
Demonstrate the use of the GeoJSON format.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This example uses the GeoJSON format.</p>
</div>
</body>
</html>
これはOpenLayersの例として投稿された HTML と 99% 同一です。だから大丈夫だと思います。問題は別の場所にあるはずです。
EDIT2: formExample1.html コードも追加:
<html>
<head>
<script src="{{STATIC_URL}}js/jquery-1.9.1.js"></script>
<script src="{{STATIC_URL}}js/jquery-ui-1.10.3.custom.js"></script>
<link rel="stylesheet" href="{{STATIC_URL}}css/jquery-ui-1.10.3.custom.css">
<style type="text/css">
.ui-slider .ui-slider-handle { z-index: 1; }
</style>
<script>
$(function() {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
// DatePicker function:
$(function() {
var today = new Date()
$( "#id_startDate" ).datepicker({
minDate: 0
});
});
// Interval slider function:
$(function() {
var currentHour = new Date().getUTCHours()
$( "#id_interval" ).slider({
range: true,
min: 0,
max: 72,
values: [ currentHour, currentHour+48 ], // By default from current hour 1st day to same hour last day
slide: function( event, ui ) {
var startDay = Math.floor(ui.values[0] / 24) + 1
var startHour = ui.values[0] % 24
var endDay = Math.floor(ui.values[1] / 24) + 1
var endHour = ui.values[1] % 24
$( "#amount" ).val( "From " + startHour + ":00h day " + startDay +
" to " + endHour + ":00h day " + endDay + " (UTC)");
}
});
$( "#amount" ).val( "From " + currentHour + ":00h day 1 to " + currentHour + ":00h day 3 (UTC)");
});
// Threshold spinner selector:
$(function() {
var id_threshold = $( "#id_threshold" ).spinner();
id_threshold.spinner( "value", 15 );
id_threshold.spinner( "option", "min", 0 );
$( "button" ).button();
});
// Movie player slider:
$(function() {
$( "#player-slider" ).slider({
range: "min",
value: 0,
min: 0,
max: 1000,
slide: function( event, ui ) {
//$( "#amount" ).val( "$" + ui.value );
}
});
// Modify this line to show somehow the current displayed prediction hour
//$( "#amount" ).val( "$" + $( "#player-slider" ).slider( "value" ) );
});
// Play button
$( "#id_playButton" ).click(function() {
var postdata = {
'startdate': $("#id_startDate").datepicker("getDate"),
'starthour': $("#id_interval").slider("values", 0),
'endhour': $("#id_interval").slider("values", 1),
'threshold': $("#id_threshold").val(),
'csrfmiddlewaretoken': csrftoken
};
$.post('', postdata);
});
});
</script>
</head>
<body>
<p>Start Date: <input type="text" id="id_startDate"></p>
<p>
<label for="amount">Interval:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<p> <div id="id_interval"></div> </p>
<p>
<label for="id_threshold">Threshold:</label>
<input id="id_threshold" name="value" />
</p>
<p> <div id="player-slider"></div> </p>
<p>
<p>
<button id="id_playButton">Play</button>
</p>
</p>
</body>