问题描述
我正在尝试加载一个表单以在模态窗口中创建一个对象,然后当用户按下提交并将它们重定向到它刚刚创建的对象时,该窗口提交数据(通过 AJAX)。
我的模型是这样的:
class Game(models.Model):
end_year = models.IntegerField()
lead_dev = models.ForeignKey(
User,on_delete=models.PROTECT,related_name="%(class)s_lead_dev"
)
created = models.DateTimeField(auto_Now=False,auto_Now_add=True)
created_by = models.ForeignKey(
User,related_name="%(class)s_created_by"
)
updated = models.DateTimeField(auto_Now=True,auto_Now_add=False)
updated_by = models.ForeignKey(
User,related_name="%(class)s_updated_by"
)
admin_locked_on = models.DateTimeField(
auto_Now=False,auto_Now_add=False,blank=True,null=True
)
report_url = models.CharField(max_length=350,blank=True)
objects = models.Manager()
managers = GameManager()
class Level(models.Model):
game = models.ForeignKey(Game,on_delete=models.PROTECT)
level_type = models.ForeignKey(
LevelType,on_delete=models.PROTECT
)
level_difficulty = models.ForeignKey(
LevelDifficulty,on_delete=models.PROTECT
)
publish = models.BooleanField(default=False)
lead_dev_locked = models.BooleanField(default=False)
admin_locked = models.BooleanField(default=False)
created = models.DateTimeField(auto_Now=False,related_name="%(class)s_updated_by"
)
当用户进入游戏详细信息屏幕(仅通过通用 Django DetailView 处理)时,我会显示该游戏的“关卡”列表。
我希望用户能够点击“添加关卡”并弹出一个模式框,确认这是他们想要添加的关卡。当他们点击“确认”(提交)时,AJAX 会完成剩下的工作。
模板的重要部分(模态和按钮)如下所示:
{% for level_type in level_types %}
<button type="button" class="btn btn-primary float-right" data-target="#createLevelModal" data-toggle="modal" data-game="{{ game }}" data-user="{{ game.lead_dev.full_name }}" data-level-type="{{ level_type }}" data-api-url="{% url 'level-list' %}">Create {{ level_type }}</button>
{% endfor %}
...other HTML...
<!-- Modal -->
<div class="modal fade" id="createLevelModal" tabindex="-1" role="dialog" aria-labelledby="createLevelModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleLevelLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-body">
</div>
</div>
</div>
</div>
我有一个模板:level_create_form.html
,看起来像这样:
<form class="form-horizontal" action="{% url 'level-list' %}" method="post" novalidate>
{% csrf_token %}
<div class="modal-body">
{% render_form serializer %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input class="btn btn-primary modal-submit-button" type="submit" value="Create DRF">
</div>
</form>
我在 DetailView 页面上的 JS 如下所示:
<script type="text/javascript">
$('#createLevelModal').on('show.bs.modal',function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var api_url = button.data('api-url') // Extract info from data-* attributes
var lead_dev = button.data('user') // Extract info from data-* attributes
var level_type = button.data('level-type') // Extract info from data-* attributes
var game = button.data('game') // Extract info from data-* attributes
// If necessary,you Could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here,but you Could use a data binding library or other methods instead.
var modal = $(this)
// Set the title of the modal
modal.find('.modal-title').text( game + ' for ' + lead_dev)
// Set the action of the form to the URL (where it will POST to)
modal.find('.level-create').attr("action",api_url)
// Set the words on the Submit button
modal.find('.modal-submit-button').attr("value",'Create ' + level_type)
// Load the HTML for the form into the modal
modal.find('.form-body').load(api_url)
})
$('.level-create').on('submit',function(e) {
var form = $('.level-create') // Button that triggered the modal
var errorlist = $('.level-create').find('.errorlist') // Get the errorlist (if any)
var url = form.attr('action')
// POST to the URL
$.ajax({
method: $(this).attr('method'),url: url,data: $(this).serialize(),context: this,success: function(data,status,jqxhr) {
console.log('success!')
// redirect user here
},error: function(data,status) {
console.log('there was an error')
$("#form-modal").html(data)
}
})
return false
})
</script>
我的关卡序列化器如下所示:
class LevelSerializer(serializers.ModelSerializer):
renderer_classes = [TemplateHTMLRenderer]
template_name = "level_create_form.html"
created_by = serializers.HiddenField(
default=serializers.CurrentUserDefault()
)
updated_by = serializers.HiddenField(
default=serializers.CurrentUserDefault()
)
class Meta:
model = Level
fields = [
"url","game","level_type","level_level","created_by","updated_by",]
def create(self,validated_data):
level = Level.objects.create(**validated_data)
return level
我使用的视图集是这样的:
class LevelViewSet(viewsets.ModelViewSet):
serializer_class = LevelSerializer
def get_queryset(self):
queryset = Level.objects.all()
return queryset
ViewSet 的 URL 也设置正确:
router.register(
r"levels",LevelViewSet,basename="level",)
模态开始打开,立即消失,页面看起来相同,但具有模板,就像我在浏览器中查看 DRF API 一样。
如何最好地将此表单 HTML 放入模态窗口!?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)