0

我正在尝试使用 javascript 在我的 django 模板中访问单元格的内容。

该表可以包含 x 行。当点击任何“点击显示”链接（在 TEST 列中）时，我希望将行的 {{ i.description }} 传递给我的视图（ajax_test 函数），即“点击显示”链接消失并被视图中返回的 html 替换。我已经包含了我可怕的 javascript 尝试，我很清楚这并不能满足我的要求。如果有人可以提供帮助，将非常受欢迎。

模板：

{% extends "myapp/base.html" %}

{% block content %}
<p>You searched for: <strong>{{ query }}</strong></p>

{% if elements %}
<p>Found {{ elements|length }} Element{{ elements|pluralize }}.</p>
<div class="datagrid"><table>
    <thead><tr>
    <th>Name</th>
    <th>Description</th>
    <th>Type</th>
    <th>Parameter Arguments</th>
    <th>TEST</th>
    <tbody>
    {% for i in elements %}
    <tr class="{% if forloop.counter|divisibleby:2 %}alt{% else %}{% endif %}">
        <td><a href="/myapp/{{ i.id }}/editElement">{{ i.name }}</a></td>
        <td><div id="desc">{{ i.description }}</div></td>
        <td>{{ i.type }}</td>
        <td>{% for a in i.parameter.all %}{{ a.argument }}{% endfor %}</td>
        <td><div class="clicks"><a href="#">click to show</a></div></td>
        </tr>
    {% endfor %}
    </tbody>
    </table></div>
  {% endblock %}

Javascript（这是我真的不知道的地方，下面的代码是失败的尝试）。代码作为静态文件包含（ajax_test.js，从 base.html 加载）

$(function(){   
   var myCell = document.getElementById("desc");
   var cellContents = (myCell.innerHTML);
    $('.clicks').click(function() {             
        $.ajax({     
            type: "POST",   
            url: "/myapp/test_ajax/", 
            data: {   
                'ajax_data' : cellContents, 
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val() 
            },
            success: ajaxSuccess, 
            dataType: 'html'
        });

    });

});

function ajaxSuccess(data, textStatus, jqXHR) 
{
    $('.here').html(data); //I would like to put this in the "click to show" cell. I was placing it in a random div for testing.
}

test_ajax 视图：

def ajax_test(request):
    if request.POST:
        ajax_data = request.POST['ajax_data']
        ajax_query = #some generic lookup using ajax_data
    return render_to_response('myapp/ajax_test.html', {'ajax_query': ajax_query})

ajax_test 模板（要返回到单元格）：

{{ ajax_query }}
4

1 回答 1

1

试试这个：

html

<td><div class="clicks"><a class="click-to-show" href="#" data-desc="{{ i.description }}">click to show</a></div></td>

javascript

$(function(){
   $('.click-to-show').click(function(e) {             
       $.ajax({     
           type: "POST",   
           url: "/myapp/test_ajax/", 
           data: {   
               'ajax_data' : $(e.target).attr("data-desc"), 
               'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val() 
           },
           success: function ajaxSuccess(data, textStatus, jqXHR) {
               $(e.target).parent().html(data);
           }, 
           dataType: 'html'
       });

   });

});

如您所见，我们始终保持 DOM 相对于链接元素，因为我们多次渲染行，这将确保我们更新正确的行。

于 2013-10-05T21:15:31.163 回答