Question

我想从jquery滑块中检索值并将其传递给flask。这应该触发另一个从我的数据库中提取数据并生成Highcharts图表的函数。

我的HTML文件：

 <form action="." class="form-inline" style="margin:10px" method="POST">
          <input type="text" class="form-control" placeholder="station_id" name="station_id">
          <input class="btn btn-default" type="submit" value="Search">

  </form>
    <form method="post" action=".">
    <label for="amount-time" style="margin:10px">Time</label>
    <input type="text" name="amount-time" id="amount-time"  style="border: 0; color: #666666; font-weight: bold; width: 400px; margin:10px" value={{ time }}>
    <div id="slider-time" style="width: 400px; margin:10px"></div><br></form>

我在HTML文件中的jQuery代码：

    $(document).ready(function() {
    jQuery('#slider-time').slider({
        range: false,
        min: 0,
        max: 1430,
        step: 10,
        values: [540],
        slide: function( event, ui ) {
            var hours1 = Math.floor(ui.values[0] / 60);
            var minutes1 = ui.values[0] - (hours1 * 60);

            if(hours1.length < 10) hours1= '0' + hours;
            if(minutes1.length < 10) minutes1 = '0' + minutes;

            if(minutes1 == 0) minutes1 = '00';

            var hours2 = Math.floor(ui.values[1] / 60);
            var minutes2 = ui.values[1] - (hours2 * 60);

            if(hours2.length < 10) hours2= '0' + hours;
            if(minutes2.length < 10) minutes2 = '0' + minutes;

            if(minutes2 == 0) minutes2 = '00';

            jQuery('#amount-time').val(hours1+':'+minutes1 );
        }
    });
});

最后我的Flask功能：

@app.route('/averages/', methods=['GET','POST'])

def averages(chartID = 'chart_ID', chart_type = 'column', chart_height = 500):
    station_id = request.form.get('station_id')
    time = request.form.get('amount-time')
    if request.form.get('station_id') == None:
        station_id = 1
        time = '09:00'
    else:
        station_id = request.form.get('station_id')

    if len(getInfoStation(int(station_id)).columns) == 0:
        station_info = "Incorrect station"
        flash("Incorrect station ID.")
    else:
        station_info = getInfoStation(int(station_id)).to_html(classes="table-condensed table-hover")
    chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,}
    series =[{"name": 'Number of bikes', "data": averageDayHour(int(station_id), time)}]
    title = {"text": 'Average Bikes'}
    xAxis = {"categories": ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']}
    yAxis = {"title": {"text": 'Bikes'}}
    return render_template('averages.html', chartID=chartID, chart=chart, series=series, title=title, xAxis=xAxis, yAxis=yAxis, station_id=station_id, tables=[station_info], time=time)

正如您所看到的，还有另一种形式（变量station_id），它可以正确更新图表。它仅适用于＆＃39; 09：00＆＃39;的默认时间值。我不确定我做错了什么......

将变量从滑块传递到烧瓶

0 个答案: