将值从fullCalendar传递到Django模板

时间:2015-08-19 17:34:44

标签: django twitter-bootstrap django-templates fullcalendar django-urls

我试图将事件ID从FullCalendar传递到Django模板作为url解析器的参数。我正在使用Django 1.8和Twitter Bootstrap。

在我的views.py中,我view_shifts(request)使用适当的背景呈现calendar_init.html

这就是我的calendar_init.html粗略的样子。

{% extends "base.html" %}
{% block title %} Shifts {% endblock %}
{% block extra_head %}

// links for fullCalendar, jQuery, and Bootstrap

<script type="text/javascript">
    $(document).ready(function() { // Page is now ready.
        // Initialize the calendar.
        $('#calendar').fullCalendar({
            // headers and other settings
            eventClick: function(event, jsEvent, view) {
                $('#calendar').fullCalendar('updateEvent', event);
                $('#modalTitle').html(event.title);
                $('#modalBody').html(event.description);
                $('#fullCalModal').modal();
            }
        });
    });
</script>

<!-- Modal HTML -->
<div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="fullCalForm" method="post" action="{% url 'shifts:sell' shiftId %}">
            {% csrf_token %}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                    <span class="sr-only">close</span></button>
                    <h4 id="modalTitle" class="modal-title"></h4>
                </div>
                <div id="modalBody" class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" data-toggle="modal" data-shift-id="shift_id_value" class="btn btn-primary">Sell</button>
                    <button type="submit" class="btn btn-primary">Buy</button>
                    <!--<button class="btn btn-primary"><a id="eventUrl" target="_blank">Event Page</a></button>-->
                </div>
            </form>
        </div>
    </div>
</div>

<div id="calendar"></div>
{% endblock %}

{% block content %}
<div id="calendar"></div>
{% endblock %}

我遇到问题的部分是shiftId <form class="fullCalForm" method="post" action="{% url 'shifts:sell' shiftId %}">。我需要为sell中的views.py函数传递shift(一个fullCalendar事件)的id,它将shift_id作为参数。当我将100作为测试而不是shiftId时,整个过程按预期工作。我不知道如何检索事件的id并将其作为参数传递来代替shiftId。

我已经把头发拉了一会儿。将非常感谢帮助。谢谢!

编辑:感谢Daniel的评论,我能够稍微调整一下代码以使其更有意义。但是,我仍然无法获得shiftId的正确值。我不确定如何将ID放入隐藏字段并从sell函数中检索它。

编辑后,我的代码如下所示:

<!-- Modal HTML -->
<div id="fullCalModal" class="modal fade">
    ...
    <form class="fullCalForm" method="post" action="{% url 'shifts:sell' %}">
    ...
    </form>
</div>

views.py,我的sell函数:

def sell(request):
    shift = get_object_or_404(Shift, pk=request.POST['shiftId']) # Obviously 
                                        # not working, not sure how to fix it..
    sale = Sale.objects.create(shift=shift, seller=request.user, datetime_sold=datetime.now)
    shift.on_sale = not shift.on_sale
    shift.save()
    return HttpResponseRedirect(reverse('shifts:view_shifts'))

1 个答案:

答案 0 :(得分:0)

你以错误的方式接近这个。在请求时,在服务器上处理模板时,将评估url标记。此时需要定义shiftId,之后您无法直接更改它。 FullCalendar是一个javascript库,在客户端上运行,到时没有url标签,只有一个生成的URL。

因此,如果您希望fullCalendar中发生的事情影响提交的表单,则需要执行以下两项操作之一。一种方法是用一个你知道永远不会有效的占位符来预填充该URL - &#34; 00000&#34;比如说 - 并让你的JS用必要的shiftId的实际值替换该值。

另一个我认为可能更好的方法是从URL中删除参数,并将其放入隐藏的表单字段中,该字段将与其余数据一起提交。

修改

我对fullCalendar API一无所知,但我猜eventClick是单击事件时执行的回调列表。因此,我们需要在HTML中添加一个空的隐藏字段,并在eventClick中添加一个回调来填充它。

eventClick: function(event, jsEvent, view) {
    ...
    $('#clientIdField').val(event.id);
}

<form class="fullCalForm" method="post" action="{% url 'shifts:sell' %}">
  <input type="hidden" name="client_id" id="clientIdField">
  ...
</form>