Twitter Bootstrap 下拉 AJAX 调用
Posted
技术标签:
【中文标题】Twitter Bootstrap 下拉 AJAX 调用【英文标题】：Twitter Bootstrap Dropdown AJAX call 【发布时间】：2014-01-25 17:12:51 【问题描述】：试图让下拉更新由 Google Chart API 构建的图表。 我现在遇到的问题很少。
它将request 发送到错误的URL，而不是/graph/，它正在将数据发送到它现在所在的页面/services/。所以我不能继续调试它，因为它甚至不会将POST 发送到需要它的地方。 /graph/(ajax.py) 是包含 AJAX 数据的那个
我知道现在它没有传递任何数据，但我什至无法弄清楚如何访问正确的视图。如果 1 是固定的，那么从 twitter bootstrap 的下拉菜单中传递值的最佳方法是什么
html
信用转到this
<form id="select-graph" name="select-graph" method="POST">
% csrf_token %
<div class="btn-group">
<button type="submit" class="btn btn-default dropdown-toggle" data-toggle="dropdown" formmethod="POST">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a onclick="$('#select-graph').submit()">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li class="divider"></li>
<li><a href="#">About</a></li>
</ul>
</div>
</form>
AJAX 脚本
信用转至this
<script type="text/javascript">
var graphid = 1;
$('#select-graph').submit(function()
$.ajax(
url: 'https://www.google.com/jsapi?callback',
cache: true,
dataType: 'script',
success: function()
google.load('visualization', '1', packages:['corechart'], 'callback' : function()
$.ajax(
type: "POST",
dataType: "json",
url: '/graph/',
success: function(jsondata)
var data = google.visualization.arrayToDataTable(jsondata);
var options = title: 'My Daily Activities';
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
)
)
)
return true
)
</script>
/graph/ - ajax.py
def insider_graphs(request):
if request.method == 'POST' :
#code that works, this json.dumps with
#special encoder works in all others parts
#of the code and charts look fine
return HttpResponse('array':json.dumps(data, cls=SpecialEncoder), content_type="application/json", context_instance=RequestContext(request))
解决方案
基于公认的解决方案，我必须进行一些小修改才能使其工作：
jsondata 正在传递的项目里面有我需要的项目，所以我需要 jsondata['jsondata'] 而不是调用jsondata，其中'jsondata'是我从 django 传递下来的对象名称
新行：
var data = google.visualization.arrayToDataTable(jsondata['jsondata']);
【问题讨论】：
你能提供 jsfiddle 或类似的东西吗？ 我将下拉菜单简化为一个简单的下拉列表。我从 Google Charts 那里发布了示例图表代码。如果您能以某种方式使其呈现图表，然后更改和选项更新图表，将不胜感激。我认为这将是我的大部分问题，干杯！ 没有发布链接，但这里是jsfiddle.net/XmL2E/1 【参考方案1】：实际上，您正在提交两个提交：一个发布到/graph/（ajax），另一个发布到/services/（不是ajax）。第二个会重新加载页面。
您需要更改的是防止触发第二次提交。您可以通过在提交callbak中调用preventDefault()事件方法来归档它：
$('#select-graph').submit(function(event)
event.preventDefault();
$.ajax(
url: 'https://www.google.com/jsapi?callback',
cache: true,
/* rest of your code */
....
);
更新
jsfiddle
更新 2：返回 json 的有效 Django 视图
return HttpResponse(
json.dumps('array': data, cls=SpecialEncoder),
content_type="application/json",
context_instance=RequestContext(request)
)
【讨论】：
已添加，没有任何改变！想到了意想不到的令牌，也许这是其中的一部分？ 修复了意外的令牌部分，但页面仍会重新加载。是的，我知道这个过程，但是查看日志，/graph/ 似乎从未参与过。我查看了服务器日志中的 GET 和 POST 请求，而不是单个 /graph 项目
可能是您在<head> 中放置了名为“AJAX 脚本”的代码？如果是这样，您最好将其包裹在 $(document).ready(function() /* YOUR CODE HERE */ );
Negative，它在<body>的底部，实际上</script>之后的下一个标签是</body>
不能说你做错了什么，或者可能是其他原因，但我的确切答案here 效果很好。以上是关于Twitter Bootstrap 下拉 AJAX 调用的主要内容，如果未能解决你的问题，请参考以下文章
html Twitter Bootstrap - 多列下拉列表