Question

的javascript：

$('.follower_name').click(function () {              
      var id = $(this).attr('id');  
      var csrf_token = $("#csrf_token").val();
      $.ajax({ 
       data:{
            csrfmiddlewaretoken: ('{{csrf_token}}'),                          
            id:id,  
            edit_followup:true              
            },
      type:'POST',
      url: '/setting/edit_follower/',
      success: function(data) {    
      $('#add_form').show();
      $('#add_form').html(data);
     alert(data);
     }
    });
   });

HTML：

<div id="add_form"  style="display:none" class="edit_follow">
    <form id="form"  method="post" action="edit_follower/{{follower.id}}/"  onsubmit="return form_validate()">
        {% csrf_token %}
        <h2> Follow-up details</h2>
        <br />
        <table  width="100%">
            <tr>
                <td style="width:100px;">First name:</td><td>{{ form.firstname}}</td>
            </tr>
            <tr>
                <td style="width:100px;">Last name:</td><td>{{ form.lastname}}</td>
            </tr>
            <tr>
                <td>Email:</td><td>{{ form.email}}</td>
            </tr>
          </table>
          <div style="width:180px;margin:20px 5px 0 10px" align="right">

            <button style="margin-right:10px;" type="button" class="close" name="cancel" class="forward backicon">                
            Cancel</button>   {% include "buttons/add.html" %}
        </div>
    </form>
</div>

views.py

def edit_follower(request):  
    if request.method == 'POST':
    """"""'
    return HttpResponse(form)

现在弹出窗口显示如下：

enter image description here

我想显示如下

enter image description here

我正在将数据从数据库加载到弹出div。问题是，它只是单独显示表单数据而不是弹出窗口的html。例如，它没有显示按钮，“名字”，但是它显示的是带有名字字段值的文本框。

Answer 1

也许尝试这样。附：我不是这方面的专家：）

$('.follower_name').click(function () {              
  var id = $(this).attr('id');  
  var csrf_token = $("#csrf_token").val();
  $.ajax({ 
   data:{
        csrfmiddlewaretoken: ('{{csrf_token}}'),                          
        id:id,  
        edit_followup:true              
        },
  type:'POST',
  url: '/setting/edit_follower/',
  success: function(data) {    
  $('#add_form').show();
  $('#add_form').html(
    '<div id="add_form" style="display:none" class="edit_follow">' +
    '<form id="form"  method="post" action="edit_follower/{{follower.id}}/" onsubmit="return form_validate()">' + '{% csrf_token %}' +
    '<h2> Follow-up details</h2>' +
    '<br />' +
    '<table  width="100%">' +
        '<tr>' +
            '<td style="width:100px;">First name:</td><td>{{ form.firstname}}</td>' +
        '</tr>' +
        '<tr>' +
            '<td style="width:100px;">Last name:</td><td>{{ form.lastname}}</td>' +
        '</tr>' +
        '<tr>' +
            '<td>Email:</td><td>{{ form.email}}</td>' +
        '</tr>' +
     '</table>' +
     '<div style="width:180px;margin:20px 5px 0 10px" align="right">' +

     '<button style="margin-right:10px;" type="button" class="close" name="cancel" class="forward backicon">Cancel</button>' +  '{% include "buttons/add.html" %}' +
     '</div>' +
 '</form>' +
'</div>');

 alert(data);
 }
});
});

Answer 2

那是因为下面这行......

$('#add_form').html(data);

此行只会将数据作为HTML放在div add_form中。所以，无论你在div之前拥有什么，都将被数据所取代。

如何在弹出加载数据时显示div的html

2 个答案: