在ajax中用django链接附加html

Question

I have an ajax function that adds data to my python database without refreshing the page (I'm using the django web framework). I return the data and add this to my template with a html append to avoid a page refresh.

However, I want to link this newly appended data to the actual record it belongs to. So when a user clicks the 'newly added row' they can go to the record view and add things to it. So this is where I have a problem... I can't just throw in a django link without getting errors... Here is my 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
            }
        });
    };
})

What I would want to do is something like this - even though it's hideous:

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>';

But I can't put a django link in...

Are there any workarounds to this?

Answer 1

As suggested by @ExperimentsWithCode, I had to deliver s string of html with json. And I had to get the field id in the view and insert it into the url as follows:

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)

So I create the link in the view. Then I alter the html append as follows:

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>';