1

別の選択された項目に基づいて、自分の Web ページに選択ボックスを設定するために (django で) ajax 呼び出しを取得しようとしています。私はpython、django、およびjquery/javascriptを初めて使用するので、機能していないことにあまり驚いていません。

私は次のform.pyを持っています

class InputParametersForm(forms.ModelForm):

sqlConnection = SQLSeverConnection('MSSQLServerDataSource')
tableNames = {}
sqlQuery = sqlConnection.getTableNames()

tableNames = tuple((table, table) for table, in sqlQuery)
tableNames = tuple((str(table), str(table)) for table, in sqlQuery)
tableNames = tuple((table.encode(), table.encode()) for table, in sqlQuery)

TableName = forms.ChoiceField(widget=forms.Select(),
                              choices=tableNames)

ColumnName = forms.ChoiceField(widget=forms.Select())

StartDateTime = forms.DateField(widget=SelectDateWidget())

EndDateTime = forms.DateField(widget=SelectDateWidget())

class Meta:
    model = SelectionHistory
    fields = ("TableName", "ColumnName", "StartDateTime", "EndDateTime")

そして見る;

def InputParametersView(request):

context = RequestContext(request)
connection = SQLSeverConnection('MSSQLServerDataSource')

if request.method == 'POST':

    pdb.set_trace()

    if form.is_valid():
        form.save(commit=True)

        ChartData.objects().all().delete()
        this_XData = connection.getColumnData('DateTimeStamp', SelectionHistory.TableName[0], SelectionHistory.StartDateTime[0], SelectionHistory.EndDateTime[0])
        this_YData = connection.getColumnData(SelectionHistory.ColumnName[0], SelectionHistory.TableName[0], SelectionHistory.StartDateTime[0], SelectionHistory.EndDateTime[0])
        ChartData.XData = this_XData
        ChartData.YData = this_YData

        ChartData.save()

elif request.method == 'GET':

    pdb.set_trace()

    if request.is_ajax():

        pdb.set_trace()

        selected_table = request.GET['selected_table']
        columns = connection.getColumnTitles(selected_table)

        column_names = {}
        column_names = tuple((column, column) for column, in columns)
        column_names = tuple((str(column), str(column)) for column, in columns)
        column_names = tuple((column.encode(), column.encode()) for column, in columns)

        return HttpResponse(column_names)

    return render_to_response('input_parameters-ajax.html', {'form': InputParametersForm},  context)

そして、次のテンプレート - スクリプトを含みます。

<html>

    {% load staticfiles %}

    <title>Input Parameters</title>

    <script src="{% static 'dgconnection/js/jquery-2.1.0.min.js' %}"></script>
    <script src="{% static 'dgconnection/bootstrap/js/bootstrap.min.js' %}"></script>

    <script>

        $("#id_TableName").change(function()
        {
            tableSelectionChanged();
        })

        function tableSelectionChanged()
        {
            var selected_table = $("#id_TableName").selectedIndex;
            $.get('/historicaldata/input_parameters/', {selected_table : selected_table}, function(column_names){
            $("#id_ColumnName').val(column_names);
            });
        }

    </script>

<body>
    <h1>What would you like to see?</h1>

    <form id="input_parameters" method="post" action="http://127.0.0.1:8000/historicaldata/chart_view/">
        {% csrf_token %}
        <ul>
            {{form.as_ul}}
        </ul>

        <input type="submit" value="submit" />
    </form>

</body>

上部の選択ボックスを変更した後、下部の選択ボックスに何も入力されていない次の Web ページが表示されます。

columnname select には何もありません。

4

1 に答える 1

0

ajax を正しく構成しているとは思いません。まず、jquery を使用し、ajax をブロックに入れます。これは、あなたがやっているのと同じことをした場所の例です。

http://munitag.herokuapp.com/

そのため、誰かがバス停を選択すると、その特定のバス停の停留所のオプションが追加されます。

HTML

        <form role="form">
         <div class="form-group">
            <select id = "stop"class="form-control input-lg">
        <option>Please select a route</option>
                {% for x in stops %}
                <option >{{x}}</option>
                {% endfor %}

            </select>
              <select style="";"id ="stoplist" class="form-control input-lg"> </select>
          <select style="display:none;"id ="direction" class="form-control input-lg"> 
          <option>Inbound</option>
          <option>Outbound</option>
          </select>

     <button type="button" id = "tagbutton"  style="display:none;"onclick= "myFunction()"  class="btn btn-info navbar-btn">Tag</button>
      </div>
        </form>\

次に、ajaxの場合

{% block postscript %}

<script type="text/javascript">

 $(document).ready(function() {
  $("#stop").change(function(){
    document.getElementById("stoplist").style.display ="block";
    document.getElementById("tagbutton").style.display ="block";
    document.getElementById("direction").style.display ="block";

      $.ajax({
          type: 'POST',
          data:  {keyname:$('#stop option:selected').val()},
           success: function(resp){
            for (var i=0; i < resp['routestops'].length;++i){

              addOption(document.getElementById("stoplist"), resp['routestops'][i], resp['routestops'][i]);
            }

             }

      });
  });
}); 

 </script>

{% endblock postscript %}

jquery は、停止のリストである成功した投稿応答を処理しており、AddOption 関数を使用してこれらのオプションを選択要素に追加しています。

これは、誰かがオプションを選択してターゲット要素を変更したときに ajax を処理するビューです。

if request.is_ajax():


    stop = request.POST.values()[0]

    routestops = stops[stop]['stops']
    r = {'routestops':routestops}


    return HttpResponse(json.dumps(r), mimetype="application/json")
else:

    return render(request, 'muni/home.html', payload)
于 2014-07-25T20:53:06.467 に答える