【问题标题】:jQuery & Django: how can I use jquery properly in this casejQuery & Django:在这种情况下如何正确使用 jquery
【发布时间】:2018-09-22 07:36:02
【问题描述】:

我很难处理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" 是第一行的 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 我已经添加了代码。

标签: javascript jquery django forms


【解决方案1】:
猜你喜欢
  • 2020-08-06
  • 2022-01-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-07-03
  • 1970-01-01
  • 2013-07-28
相关资源
最近更新 更多