xpanta xpanta - 1 month ago 5
Python Question

Django, jQuery. I can't load() after the same div multiple times

I am trying to let the user create multiple types of the same input form.

The problem is that the first time I click on the button a form is appended to the

append_form
div, but no matter how many more times I click on the "Add" button, no other form is appended. What am I doing wrong?

This is my HTML code:

<div class="col-md-9"><strong>{% trans "Please, add as many measures as you like to be available for the institutional simulation" %}</strong></div>
<div class="col-md-3"><button class="btn btn-success" onclick="addForm('{% url "add_measure_form" %}')"><i class="fa fa-plus-square"></i> {% trans "Add Measure" %} </button></div>

<div id="append_forms"></div>


And this is my script

function addForm(url){
$("#append_forms").after().load(url);
}


And this is my django views:

def add_measure_form(request):
data = {

}
return render(request, "_frm_inner_form.html", data)


and urls

url(r'^measures/form/add/$', add_measure_form, name="add_measure_form")

Answer

remove the after() function append a wrapper div to the forms and load the data into it:

 function addForm(url){
   $("#append_forms").append('<div>').load(url);
  }

or use the general ajax request

$.ajax({
  url:url,
  success:function(data) { 
       $("#append_forms").append(data);
  }
});