CODEWITHSUNDEEP
javascriptjquerydjangodjango-modelsdjango-templates
siva
siva

Reputation: 1481

how to show html of div on loading data to popup

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)

Now the popup is showing as below:

enter image description here

I want to show as below

enter image description here

I am loading the data from database to popup div.The problem is, It just showing the form data alone and not the html of popup.Example it is not showing the buttons,"First name" but it is showing the text box with value of First name field.

Upvotes: 0

Views: 566

Answers (2)

Tadit Dash
Tadit Dash

Reputation: 305

That is because of the below line...

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

This line will simply place the data as the HTML inside the div add_form. So, whatever you had before inside that div will be replaced by data.

Upvotes: 0

Milan and Friends
Milan and Friends

Reputation: 5610

Maybe try like this. P.S. I'm not the expert in this area :)

$('.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);
 }
});
});

Upvotes: 1

Related Questions