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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery和Django:在这种情况下如何正确使用jquery相关的知识,希望对你有一定的参考价值。

我很难与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正确地改变了第一行,但是后面会添加什么行?他们的领域将有Ids 1 , 2 ..等而不是0。任何帮助都会很棒。先感谢您

答案

请看一些样品。它可能会帮助你

https://www.aspsnippets.com/Articles/Add-Insert-Remove-Delete-Table-Rows-dynamically-using-jQuery.aspx

https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-append-and-remove-table-row-dynamically

以上是关于jQuery和Django:在这种情况下如何正确使用jquery的主要内容,如果未能解决你的问题,请参考以下文章

在这种情况下如何制作页脚以及如何使图像居中?

如何在 Django 模板中使用 Jquery/Ajax 正确刷新 div

在这种情况下如何正确使用z-index?

如何使用 Django、Ajax、jQuery 在不刷新页面的情况下提交表单?

django 在这种情况下如何使用Q和过滤related_name?

在这种复杂情况下,如何解决 Django 缺少组合键的问题?