如何使用 JQuery 使用 Ajax 函数更新每个 div 元素
Posted
技术标签:
【中文标题】如何使用 JQuery 使用 Ajax 函数更新每个 div 元素【英文标题】：How to update each div element with Ajax function using JQuery 【发布时间】：2021-07-31 22:24:42 【问题描述】：我是 JQuery 新手，我有一个 Ajax 函数来更新 select 选项。 Ajax 在我的第一个 Div 上运行良好。但是当我克隆 div 并运行 Ajax 时，再次调用它只更新第一个 Div 元素，而不是克隆的元素。我是壁橱的新手……等等。请帮助我，这样当我调用 Ajax 时，它会更新克隆的 div(current div) 元素。
这是我的 ajax 函数：
function acct_dbox()
#var that = $(this)#
$.ajax(
type: "GET",
url: "/waccounts/getaccounts",
dataType: "json",
data:
#'acctlevel': $(this).val(),#
'csrfmiddlewaretoken': 'csrf_token'
,
success: function (data)
$.each(data, function(index, item)
if (item.length > 0)
console.log('test', item[0].AcctCode);
console.log('test', item[0].AcctName);
#$("#id_accountcode option").remove();#
$.each(item, function(index1, item1)
console.log(item1.id);
console.log(item1.AcctCode);
console.log(item1.AcctName);
$("#id_accountcode").append($('<option/>',
#$("#id_accountcode").append($('<option/>', #
value: item1.AcctCode,
text: item1.AcctName
));
)
$( document ).ready(function()
acct_dbox();
var original_external_int_div = document.getElementById('account_list');
//Div to Clone
var clone = original_external_int_div.cloneNode(true); // "deep" clone
original_external_int_div.parentNode.append(clone);
acct_dbox(); # (it is updating the first div again - not cloned one)
);
我的html是：
% extends 'wstore_base_generic.html' %
% block content %
<form action="" method="post" class="w-auto" id="new_trans_form"
xmlns:>
<div class="row mt-1 mb-4" >
<div class="col-md-12">
<div>
<div class="headerctr">
<h3>JV</h3>
<!-- <div> -->
<!-- <h3 > -->
<!-- </h3> -->
</div>
<div class="card-body" >
% csrf_token %
<div 38rem class="row style= width:18">
<div class="col">
<label>Transaction Date</label>
<input type="date" class="form-control" name="
form.fh_dt.name" value="current_date"
readonly>
% if form.fh_dt.errors %
% for error in form.fh_dt.errors %
<small class="text-danger">error</small>
% endfor %
% endif %
</div>
<div class="col-sm" >
<label>Transaction Number</label>
<input type="number" class="form-control" name="
form.fh_no.name"
value="transaction_number" readonly>
% if form.fh_no.errors %
% for error in form.fh_no.errors %
<small class="text-danger">error</small>
% endfor %
% endif %
</div>
<div class="col">
<input type="hidden" class="form-control" name="
form.fh_type.name" required readonly
value="JV">
% if form.fh_type.errors %
% for error in form.fh_type.errors %
<small class="text-danger">error</small>
% endfor %
% endif %
<label>Transaction Ref.</label>
<input type="text" class="form-control" name="
form.fh_ref.name" required
value="Ref.">
% if form.fh_ref.errors %
% for error in form.fh_ref.errors %
<small class="text-danger">error</small>
% endfor %
% endif %
</div>
</div>
<div class="row mt-0">
<div class="col">
<label>Transaction Code</label>
<input type="text" class="form-control" name="
form.fh_code.name" required readonly
value="JV">
% if form.fh_code.errors %
% for error in form.fh_code.errors %
<small class="text-danger">error</small>
% endfor %
% endif %
</div>
<div class="col">
<label>Transaction Detail</label>
<input type="text" class="form-control" name="
form.fh_detail.name" required
value="Detail">
% if form.fh_detail.errors %
% for error in form.fh_detail.errors %
<small class="text-danger">error</small>
% endfor %
% endif %
</div>
<div class="col">
<label>Transaction UserCode</label>
<input type="text" class="form-control" name="
form.fh_user_code.name" required
value="% if form.fh_user_code.value %
form.fh_user_code.value% else %request.user.username% endif %">
% if form.fh_user_code.errors %
% for error in fh_user_code.errors %
<small class="text-danger">error</small>
% endfor %
% endif %
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-0">
<div class="card shadow">
<div class="card-header text-center">
<h3 class="headerctr">
Item Details
</h3>
</div>
<div class="card-body">
% csrf_token %
<table class="">
<thead class="thead-light">
<tr>
<th>Code</th>
<th class = "text-danger">Account</th>
<th class = "text-danger">Debits</th>
<th class="text-success">Credits</th>
<th class = "text-warning">Description</th>
<th class = "text-warning">Tax</th>
</tr>
</thead>
<tbody id="account_list" style="margin-bottom: 0">
<tr>
<td>
<select name="acct_code" class="form-control
fh_code" id="id_accountcode">
<option value="SELECT"
selected="selected">---SELECT---</option>
required></select>
</td>
<td>
<input type="text" name="acct_name"
class="form-control fh_name"
placeholder="Acct Code" readonly>
</td>
<td>
<input type="number" name="acct_debit"
class="form-control fh_debit"
placeholder=" " >
</td>
<td>
<input type="number" class="form-control
fh_credit" name="acct_credit"
placeholder=" ">
</td>
<td>
<input type="text" class="form-control
fh_detail" placeholder="Description"
name="acct_descript" >
</td>
<td>
<input type="number" class="form-control
fh_tax" name="acct_tax"
placeholder=" ">
</td>
<td>
<div class="btn-group">
<button type="button" id="btnadd"
class="btn add_new_row" title="Add">
<i class="fas fa-plus-square"></i>
</button>
<button type="button" class="btn
delete_row" title="Delete">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td class = "text-success">Total Quantity:
<strong id="final_quantity">0</strong></td>
<td></td>
<td class = "text-success"> Total Price: <strong
id="final_price">0</strong></td>
</tr>
</tfoot>
</table>
</div>
<div class="col-md-12 mb-1">
<div class="btn-group">
<a href="% url 'transactions' transtype='INV'
posted='ALL' %" class="btn btn-info mr-2" >Cancel</a>
<input type="submit" class="btn btn-info submit_form"
name="save_next" value="Save&Print">
</div>
</div>
</div>
</div>
</div>
</form>
% endblock %
【问题讨论】：
同时显示 html。 html 已添加到我的问题中。谢谢。 你正在克隆 tbody ？此外，会有多个具有相同 id 的元素，这就是为什么只有第一个有效。 看看这个$("table tbody:last select[name=acct_code]").append(youroptionsto appendhere) 是否有效。另外，请删除所有重复的 id。
它只更新了最后一个选择；我做了如下更改： $("table tbody select[name=acct_code]").append($('',... 删除 --last-- 它更新所有行。请给出更正的答案标记“答案”谢谢
【参考方案1】：
#$("#id_accountcode").append($('<option/>', #
value: item1.AcctCode,
text: item1.AcctName
我做了如下更改：
$("table tbody select[name=acct_code]").append($('<option/>',
所有 div 选择都使用选项进行更新 - 感谢 swathi。
【讨论】：
以上是关于如何使用 JQuery 使用 Ajax 函数更新每个 div 元素的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery 的 $.ajax( ) 函数从 php 文件中获取 JSON 数据不起作用