twitter bootstrap 3 - Flask/jinja, adding radio buttons to a selectpicker -
apologies in advance if hack formatting, let alone show off massive hole in understanding of things.
anywho, scoured stackoverflow , managed cobble dropdown dynamically fills mongo, , faithfully passes user selection make mongo call populates motionchart. all's well.
now hoping slip in few radio buttons pass along single choice secondary dimension (first dimension dropdown).
no worries, right? ha! not much...
i've not been able find single example of mixed inputs/actions (get , post) in single form/input group, while i've tried best intelligently tinker, don't think know enough yet know.
many in advance! looking forward learning how needs wired function properly...
here's app call:
@frontend.route('/orgs_by_ic_motion', methods=['get', 'post']) @login_required def orgs_by_ic_motion(): button = "$org_name" if request.method == 'post': if request.form['submit'] == 'act': button = request.form['choice1'] elif request.form['submit'] == 'org': button = request.form['choice1'] elif request.method == 'get': db2 = conn.orgs9.ic_list.find({},{'_id':0}) json2 = json.dumps(list(db2), default=json_util.default) df_ic = pd.read_json(json2, orient='records') df_ic.sort_index(by=['group2', 'ic_name'], inplace=true) ic_dict = defaultdict(list) row in df_ic.itertuples(): ic_dict[row[4]].append([row[5], row[1]]) selected_ic = request.args.get('selectedic') data_list = [] if not isinstance(selected_ic, type(none)): rep_all = reporter_all.aggregate([ {'$match': {'ic_name':selected_ic}}, {'$group': { "_id": { 'org_name': button, 'fy': "$fy"}, 'grant_sum': {'$sum': '$total_cost'}, 'sub_sum': {"$sum": 'total_cost_sub_project'}, 'grant_cnt': {'$sum': 1}}}, {'$sort': {'grant_sum':-1}}]) df = pd.dataframe(rep_all['result']) if not isinstance(df, type(none)): row in df.itertuples(): k,v in row[1].iteritems(): df.loc[row[0], k] = v df['total_sum'] = df[['grant_sum', 'sub_sum']].sum(axis=1) df.drop(['_id','grant_sum','sub_sum'], axis=1, inplace=true) row in df.itertuples(): data_list.append([row[1], row[2], row[3], row[4]]) conn.close() return render_template('google/orgs_by_ic_motion.html', data=data_list, butt=button, ic=ic_dict, req=selected_ic) and here's page:
<script src="../../static/js/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="../../static/js/bootstrap-select.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <link rel="stylesheet" href="../../static/css/bootstrap-select.css" type="text/css"> <script type="text/javascript"> google.load('visualization', '1', {'packages':['corechart', 'motionchart']}); google.setonloadcallback(drawchart); function drawchart() { var data_table = new google.visualization.datatable(); data_table.addcolumn('string', 'ic'); data_table.addcolumn('number', 'year'); data_table.addcolumn('number', 'records'); data_table.addcolumn('number', 'costs'); data_table.addrows([ {%- cnt, ic, fy, sums in data %} ['{{ ic }}', {{fy}}, {{cnt}}, {{sums}}], {%- endfor %} ]); var opts = {}; opts['height'] = 500; opts['width'] = 800; var chart = new google.visualization.motionchart( document.getelementbyid('chart_div')); chart.draw(data_table, opts, {allowhtml:true}); } </script> </head> <body> <div class='container' id='main-container'> <div class='content'> <div class='container-fluid' style='font: 12px sans-serif;'> <div class="row"> <div class="span12"> <h4>institutes & centers</h4> <form class="form-horizontal" role="form" method=["get","post"] action="" accept-charset="utf-8"> <div class="input-group"> <span class="input-group-addon"></span> <select name="selectedic" id="selectedic" class="selectpicker form-control selectedic" show-tick data-width='auto' data-selected-text-format="count>1" data-live-search="true" title='make selection below...'> {% k,v in ic.items() %} <optgroup label = {{k}}> {% ic in v|sort %} <option>{{ic[0]}}</option> {% endfor %} </optgroup> {% endfor %} </select> </div> <div class="input-group"> <span class="input-group-btn"> <div id="radios1" class="btn-group view-opt-btn-group" data-toggle="buttons"> <button type="button" class="btn" name="choice1" value="$org_name">organisations</button> <button type="button" class="btn" name="choice1" value="$activity">activity</button> <input type="hidden" name="choice1" value={{request.form['choice1']}}/> </div> <script type="text/jscript"> $("body").find("#radios1").children().each(function () { $(this).bind('click', function () { $("input[name=choice1]").val(this.value); }); }); </script> <button type="submit" class="btn btn-warning">submit</button> </span> </div> </form> {{butt}} </div> <div class="result"></div> </div> <h3 class="text-muted">{{req}}</h3> <h6>click play <i class="fa fa-play"></i> button below start animation</h6> <div id="chart_div"></div> <div id="footer"> <div class="container"> <p class="muted credit"> <h5>inspired <a hef='http://www.gapminder.org'>gapminder</a></br> </div> </div> </div> </div> </div> </div> <script> $('select[name=selectedic]').val(1); $('.selectedic').selectpicker('refresh'); </script> {% endblock %} 
Comments
Post a Comment