时间戳

首页 > 解决方案 > 有没有办法在页面加载后执行从外部 javascript 文件发送的 django 标签

jquery - 有没有办法在页面加载后执行从外部 javascript 文件发送的 django 标签

问题描述

我有一个页面，我使用自动完成从数据库中获取酒店，然后尝试更新在 django 应用程序中找到的酒店，但我遇到了一个问题，因为我试图在页面加载后从 javascript 执行原始 django 标签，这是由jquery选择我现在正在使用的代码是here

function updateContent(id, place){

var html_cont = '<div class="hotel{{place.id}} panel lastminute4"'+
         ' style="margin:10px; padding:10px; text-align:left; padding-bottom:0px;">'+
        ' {% with '+ id +'|get_hotel as sel_hotel %}'+
        ' <h5 style="font-weight:900; text-transform:uppercase;">{{sel_hotel.hotel_name}}</h5>'+
        ' {% with 4|get_rooms as hotel_rooms%}'+
        ' {% for room in hotel_rooms %}'+
        ' <h6>{{room.title}}  *ksh. <span style="color:green;">{{room.amount}}</span></h6>'+
        ' <button class="btn btn-default btn_minus" data-target="htl_{{place.id}}_{{room.id}}"'+
                'style="display:inline;" formtarget="cost_{{place.id}}_{{room.id}}">&minus; room</button>'+
        ' <input type="number" class="form-control" min="0" value="0" formtarget="{{room.amount}}"'+
               ' id="htl_{{place.id}}_{{room.id}}" readonly style="width:60px; background:white; display:inline;">'+
        '<button class="btn btn-default btn_add" data-target="htl_{{place.id}}_{{room.id}}"'+
                ' style="display:inline;" formtarget="cost_{{place.id}}_{{room.id}}">&plus; room</button>'+
         '<b id="cost_{{place.id}}_{{room.id}}" style="font-size:15px;"> = Ksh.0</b>'+
        '{% endfor %}'+
        '{% endwith %}'+
        '{% endwith %}'+
    '</div>';
    div_id = "#append_hotel"+ place;
    $(div_id).append(html_cont);
}

我希望将执行的标签呈现给模板，而不是带有大括号和 % 符号的原始 django 标签

标签： jqueryarraysdjango

解决方案

感谢 Daniel Roseman 的 ajax 想法，我设法通过调用 ajax 函数来获取一些随内容更新的 htmnl 模板并将其附加到我想要的区域我制作了一个像这样的 django 视图

def get_hotel(request,id, pk):
    place = Location.objects.get(id=id)
    hotel = Hotels.objects.get(id=id)

    context = {
        'rooms':hotel.rooms.all(),
        'hotel':hotel,
        'place':place,
    }
    html = render_to_string("home/hotel_rooms.html", context)
    return HttpResponse(html)

这是将内容更新为模板home/hotel_rooms.html的视图，然后我将模板设为活

<div class="hotel{{place.id}} panel lastminute4"
     style="margin:10px; padding:10px; text-align:left; padding-bottom:0px;">
    <h5><a style="font-weight:900; text-transform:uppercase;" href="" data-toogle="tooltip">{{hotel.hotel_name}}</a>
    {% for room in rooms %}
    <h6>{{room.title}} *ksh. <span style="color:green;">{{room.amount}}</span></h6>
    <button class="btn btn-default btn_minus" data-target="htl_{{place.id}}_{{room.id}}"
            style="display:inline;" formtarget="cost_{{place.id}}_{{room.id}}">&minus; room
    </button>
    <input type="number" class="form-control" min="0" value="0" formtarget="{{room.amount}}"
           id="htl_{{place.id}}_{{room.id}}" readonly style="width:60px; background:white; display:inline;">
    <button class="btn btn-default btn_add" data-target="htl_{{place.id}}_{{room.id}}"
            style="display:inline;" formtarget="cost_{{place.id}}_{{room.id}}">&plus; room
    </button>
    <b id="cost_{{place.id}}_{{room.id}}" style="font-size:15px;"> = Ksh.0</b>
    {% endfor %}

</div>

然后在我的ajax中

function updateContent(id, pk){
    $.ajax({
        type: 'GET',
        url: '/get_hotel/' + id +'/'+ pk,
        data: id,
        datatype: "json",
        success: function(data){
             div_id = "#append_hotel"+ pk;
             $(div_id).append(data);
        },//success
        error: function(){
            console.logs("AJAX - failure.");
        }//error
    });

};

非常感谢你，这项工作就像一个魅力

推荐阅读