jQuery& Django:在这种情况下如何正确使用jquery

时间:2018-04-12 08:31:20

标签: javascript jquery django forms

我在jsjquery执行事件时遇到了困难,我想我对jquery的理解中缺少一些东西。 因为我对这门语言很陌生,所以如果你能帮助我,我很困惑并需要一些指导。

我需要的是什么: 我有一个表格作为一行,并有一个按钮,每次我点击它时都会添加一个新表格。新生成的表单也有不同的ID和名称。 现在每个表单都包含两个selects,并且需要在其上执行change函数。 我应该在哪里编写这个change函数,这样每行都有自己的change函数,而不会与其他行混淆。

编辑:

<div id="myDIV1" style="display: inline">
    <form action="/banque"  method="POST" enctype="multipart/form-data" id="personForm" data-tiers-url="{% url 'ajax_load_tiers' %}" >{% csrf_token %}{{ form.non_field_errors }}  

<table style ="border-collapse: separate;border-spacing: 15px;" id="id_forms_table">

            <tr><td width="5%">N P</td><td width="8%">Date d'operation</td><td width="25%">Désignation</td><td width="10%">Type tiers</td><td width="10%">Tiers</td><td width="10%">Référence de Facture</td><td width="10%">Montant debit </td><td  width="10%">Montant crédit</td></tr>
            {% for form in formset %}
         <tr style="border:1px solid black;" id="{{ form.prefix }}-row" class="dynamic-form" >

            <td{% if forloop.first %} class="" {% endif %}><div class="col-xs-1"><b><p name="np1">1</p></b></div></td>
            <td>
                {% render_field form.dateOperation class="form-control"  %}{{form.dateOperation1.errors}}

            </td>
            <td>{% render_field form.designation  class="form-control"  %}{{form..errors}}
            </td>
            <td>
                {% render_field form.typeTiers class="form-control" %}{{form.typeTiers.errors}}
            </td>
            <td>
                {% render_field form.tiers class="form-control" %}{{form.tiers.errors}}
            </td>
            <td>{% render_field form.numfacture class="form-control"   %}{{form.numfacture.errors}}
            </td>
            <td>{% render_field form.montantdeb class="form-control"  %}{{form.montantdeb.errors}}</td>
            <td>{% render_field form.montantcred class="form-control"  %}</td>

    </tr>
{% endfor %}
<tr>

            </tr>
</table>
{{ formset.management_form }}
<tr>
    <!-- BUTTONS <td colspan="4"><a href="javascript:void(0)" class="add-row">add property</a></td> -->
    <td width="16%"><input type="submit" name="annuler" value="Annuler" class="btn btn-danger" style="float:right ;margin: 5px; margin-right: 35px"></td>
    <td width="16%"><button value="" class="btn btn-success" style="float:right;margin: 5px;" onclick="verifier()">enregistrer</button></td>    

</form>

<td><input type="submit" name="ajoutligne" value="Ajouter une ligne" class="btn btn-primary" id="add-row" style="background-color: #8C1944; border-color: #8C1944; float:right;margin: 5px;" onclick="test()"></td></tr>

</div>

在按钮Ajouter une ligne更改每个添加的行时,我需要执行以下更改功能:

$("#id_form-"+0+"-typeTiers").change(function () {
        alert($('#id_form-'+0+'-typeTiers').attr('name'));
        var url = $("#personForm").attr("data-tiers-url"); 
        var typeID = $(this).val();
         $.ajax({         
        url: url,
        data: {
          'tiers': typeID,
        },
        success: function(data) {   // `data` is the return of the `load_cities` view function
           alert(data);
           var i=1;
           var listeClt = $(data).clone(true).find('option[id=facvente],option[id=fadepenses],option[id=frs]').remove().end().html();
           var listefactVentes= $(data).clone(true).find('option[id=clt],option[id=fadepenses],option[id=frs]').remove().end().html();
           var listefrs = $(data).clone(true).find('option[id=facvente],option[id=fadepenses],option[id=clt],option[id=cnss]').remove().end().html();
           var listefactDep= $(data).clone(true).find('option[id=clt],option[id=facvente],option[id=frs]').remove().end().html();
          // var cnss= $(data).clone(true).find('select').remove().end().html();
          if(listeClt!=0){
           $("#id_form-"+0+"-tiers").html(listeClt);
           $("#id_form-"+0+"-numfacture").html(listefactVentes);
}
else if(listefrs!=0){

           $("#id_form-"+0+"-tiers").html(listefrs);
           $("#id_form-"+0+"-numfacture").html(listefactDep);
}
else {

           $("#id_form-"+0+"-tiers").html(data);
}


       }
    });
        });

"#id_form-"+0+"-typeTiers"是第一行select的ID,"#id_form-"+0+"-tiers"是在更改同一行的"#id_form-"+0+"-typeTiers"后将填充的选择的ID。 这个jquery正确地改变了第一行,但是后面会添加什么行?他们的字段将包含1 , 2 ..等而不是0。 任何帮助都会很棒。提前谢谢