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 (これは私が本当に手がかりを得ていないところです。以下のコードは失敗した試みです)。コードは静的ファイル (base.html からロードされる ajax_test.js) として含まれています。

$(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 を link 要素に相対的に保持しているため、正しい行を確実に更新できます。

于 2013-10-05T21:15:31.163 に答える