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

Posted 2023-05-09

【中文标题】jQuery & Django：在这种情况下如何正确使用 jquery

【英文标题】：jQuery & Django: how can I use jquery properly in this case

【发布时间】：2018-09-22 07:36:02

【问题描述】：

我很难处理js 和jquery 执行事件，我想我对 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 >N P</td><td >Date d'operation</td><td >Désignation</td><td >Type tiers</td><td >Tiers</td><td >Référence de Facture</td><td >Montant debit </td><td  >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 ><input type="submit" name="annuler" value="Annuler" class="btn btn-danger" style="float:right ;margin: 5px; margin-right: 35px"></td>
    <td ><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" 是第一行的 ID select ，"#id_form-"+0+"-tiers" 是在更改同一行的 "#id_form-"+0+"-typeTiers" 后将填充的选择的 ID。 此 jquery 正确更改了第一行，但是之后将添加的行呢？他们的字段将具有 IDs 1 , 2 .. 等而不是 0 。 任何帮助都会很棒。提前谢谢你

【问题讨论】：

显示您的代码，以便我们了解更多。我想到了一个问题，1）它是管理员表单吗？ 2）它是正常的html吗？ 3）是CreateView，UpdateView吗？问题出在哪里？

这不是管理表单，也不是普通的 html，我正在使用 django 表单集。我将添加我的代码

@AnupYadav 我已经添加了代码。

【参考方案1】：

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

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