在ajax中添加带有django链接的html

时间:2017-02-13 14:33:13

标签: javascript jquery json ajax django

我有一个ajax函数,可以在不刷新页面的情况下将数据添加到我的python数据库中(我使用的是django Web框架)。我返回数据并将其添加到我的模板中,并带有html追加,以避免页面刷新。

但是,我想将这些新附加的数据链接到它所属的实际记录。因此,当用户点击“新添加的行”时,他们可以进入记录视图并添加内容。所以这就是我遇到问题的地方......我不能在没有错误的情况下投入django链接...... 这是我的ajax:

$( document ).ready(function()  {

$('#timesheet-form').on('submit', function(event){
    event.preventDefault();
    console.log("add a timesheet");
    createtimesheet();
});

function createtimesheet() {
    console.log("create timesheet is working!")
    $.ajax({
        url : "{% url 'tande:createtimesheet' %}",
        type: "POST",
        data: { datestart : $('#start').val(), dateend : $('#end').val()},

        success : function(json) {
            var html = '<tr><td>'+json.startdate+'</td><td>'+json.enddate+'</td><td>'+json.status+'</td><</tr></br><p>'+json.error+'</p></br>';
            console.log("success"); 
            $('#timesheet-list').append(html);
        },

        error : function(xhr,errmsg,err) {
            // what to do when there is an error
            }
        });
    };
})

我想要做的就是这样 - 尽管它很可怕:

var html = '<tr><td><a href='{% url "tande:timesheet" timesheet_id=sheet.id %}' class="class2">'+json.startdate+'</a class="class2"></td><td>'+json.enddate+'</td><td>'+json.status+'</td><</tr></br><p>'+json.error+'</p></br>';

但是我无法在...中添加django链接。

这有什么变通方法吗?

1 个答案:

答案 0 :(得分:0)

正如@ExperimentsWithCode所建议的那样,我不得不用json提供s字符串的html。我必须在视图中获取字段ID并将其插入到URL中,如下所示:

def createtimesheet(request):
    print "create timesheet view"
    if request.method == "POST":

        #Get all the data and do stuff

        # now we can create the timesheet!
        peach = TimeSheet(start_date=start_date_formatted, end_date=end_date_formatted, person_id=person)
        peach.save()

        #json response data for the link
        response_data['linkstart'] = "<a href='/tande/"+str(peach.id)+"/person/timesheet/' class='class2'>"
        response_data['linkend'] = "</a class='class2'>"
        #other response data

        return JsonResponse(response_data)

所以我在视图中创建链接。然后我改变html追加如下:

var html = '<tr><td>'+json.linkstart+json.startdate+json.linkend+'</td><td>'+json.enddate+'</td><td>'+json.status+'</td><</tr></br><p>'+json.error+'</p></br>';