显示第一个是实际值，但第二个在我的模态项目中显示未定义
showing first is real value but second shows undefined in my modal project
我的模态代码
<form action="/update" method="post">
<div class="modal fade" id="duzen" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Moda1">Etiketi Düzenle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" name="okuyucu" class="form-control okuyucu" placeholder="okuyucu" required>
</div>
<div class="form-group">
<input type="text" name="x" class="form-control x" placeholder="x" required>
</div>
<div class="form-group">
<input type="text" name="y" class="form-control y" placeholder="y" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="idnew_table" class="idnew_table">
<button type="button" class="btn btn-secondary btn-pill" data-dismiss="modal">Kapat</button>
<button type="submit" class="btn btn-primary btn-pill">Güncelle</button>
</div>
</div>
</div>
</div>
</form>
我的ajax代码
<script>
$(document).ready(() => {
var x1="";
var y1="";
var okuyucu1="";
var id="";
$.ajax({
url: "http://localhost:10001/etiketokuyucu",
method: 'GET',
success: function(response){
if(response.length > 0){
for(let index = 0; index < response.length; index++) {
var newRow = $("<tr>");
var cols = "";
var okuyucu = '';
var x = '';
var y = '';
var id='';
cols += '<td>' + response[index].idnew_table+'</td>';
cols += '<td> '+ response[index].okuyucu +'</td>' ;
cols += '<td> '+ response[index].x +'</td>';
cols += '<td> '+ response[index].y +'</td>';
cols += '<td>'
+
'<div class="dropdown d-inline-block widget-dropdown">'+
'<a class="dropdown-toggle icon-burger-mini" href="" role="button" id="dropdown-recent-order1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>'+
'<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order1">'+
'<li class="dropdown-item edit">'+
'<a href="#duzen" class= "edit" data-idnew_table='+response[index].idnew_table + ' data-okuyucu=' +response[index].okuyucu + ' data-x= ' + response[index].x + ' data-y= ' + response[index].y + ' data-toggle="modal" data-target="#duzen">Düzenle</a>'+
'</li>'+
'<li class="dropdown-item delete">'+
'<a href="#" data-toggle="modal" data-target="#modal2">Sil</a>'+
'</li>'+
'</ul>'+
'</div>'+
'</td>' ;
newRow.append(cols);
$("#example .tbody").append(newRow);
}
}
}
})
})
我的模态脚本代码
<script>
$(document).ready(function(){
//showing data to modal for edit record
$('#example').on('click','.edit',function(){
var idnew_table = $(this).data('idnew_table');
var okuyucu= $(this).data('okuyucu');
var x = $(this).data('x');
var y = $(this).data('y');
console.log(idnew_table+"okuyucu="+okuyucu + "x=" +x+" y="+y);
var modal = $(this);
modal.find('#okuyucu').text(okuyucu);
modal.find('#x').text(x);
modal.find('#y').text(y);
/*$('#duzen').modal('show');
$('.okuyucu').val($(this).data('okuyucu'))
$('.x').val(x);
$('.y').val(y);
$('.idnew_table').val(idnew_table);
*/ });
//showing modal for delete record
});
我想在模态上显示我的 mysql 数据，但我得到了 error.In 此代码首先在控制台 okuyucu、x、y 等中显示真实值，但在模态显示中它们是 undefined.why 当他们第二次 运行 时，他们在我的控制台中没有显示真正的价值吗？它将数据从 ajax 传递到 table 我从脚本代码中读取了该值但没有显示在我的模态
感谢您的帮助
您当前将值附加到 table 的代码具有 2 class edit 即：li 和 <a> 所以当您单击编辑 link 两个 class 被调用并且它返回未定义。此外，您在模态内的输入没有任何 id 而只有 name 我有更正了您的代码。
演示代码 :
//demo data
var response = [{
"idnew_table": "1",
"okuyucu": "abc",
"x": "12",
"y": "fbg"
}, {
"idnew_table": "2",
"okuyucu": "abcd",
"x": "152",
"y": "f5bg"
}, {
"idnew_table": "3",
"okuyucu": "abce",
"x": "125",
"y": "fb5g"
}]
if (response.length > 0) {
for (let index = 0; index < response.length; index++) {
var newRow = $("<tr>");
var cols = "";
var okuyucu = '';
var x = '';
var y = '';
var id = '';
cols += '<td>' + response[index].idnew_table + '</td>';
cols += '<td> ' + response[index].okuyucu + '</td>';
cols += '<td> ' + response[index].x + '</td>';
cols += '<td> ' + response[index].y + '</td>';
cols += '<td>' +
'<div class="dropdown d-inline-block widget-dropdown">' +
'<a class="dropdown-toggle icon-burger-mini" href="" role="button" id="dropdown-recent-order1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>' +
'<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order1">' +
'<li class="dropdown-item ">' + //<--remove class edit
'<a href="#duzen" class= "edit" data-idnew_table='+response[index].idnew_table + ' data-okuyucu=' +response[index].okuyucu + ' data-x= ' + response[index].x + ' data-y= ' + response[index].y + ' data-toggle="modal" data-target="#duzen">Düzenle</a>'+
'</li>' +
'<li class="dropdown-item delete">' +
'<a href="#" data-toggle="modal" data-target="#modal2">Sil</a>' +
'</li>' +
'</ul>' +
'</div>' +
'</td>';
newRow.append(cols);
$("#example .tbody").append(newRow);
}
}
//showing data to modal for edit record
$('#example').on('click','.edit',function(){
var idnew_table = $(this).data('idnew_table');
var okuyucu = $(this).data('okuyucu');
var x = $(this).data('x');
var y = $(this).data('y');
console.log(idnew_table + "okuyucu=" + okuyucu + "x=" + x + " y=" + y);
//find input under modal and set value of inputs
$("#duzen").find('input[name=okuyucu]').val(okuyucu);
$("#duzen").find('input[name=x]').val(x);
$("#duzen").find('input[name=y]').val(y);
$('#duzen').modal('show');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<table id="example" border="1">
<thead>
<th>idnew_table</th>
<th>okuyucu</th>
<th>x</th>
<th>y</th>
<th>Action</th>
</thead>
<tbody class="tbody">
</tbody>
</table>
<form action="/update" method="post">
<div class="modal fade" id="duzen" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Moda1">Etiketi Düzenle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" name="okuyucu" class="form-control okuyucu" placeholder="okuyucu" required>
</div>
<div class="form-group">
<input type="text" name="x" class="form-control x" placeholder="x" required>
</div>
<div class="form-group">
<input type="text" name="y" class="form-control y" placeholder="y" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="idnew_table" class="idnew_table">
<button type="button" class="btn btn-secondary btn-pill" data-dismiss="modal">Kapat</button>
<button type="submit" class="btn btn-primary btn-pill">Güncelle</button>
</div>
</div>
</div>
</div>
</form>
我的模态代码
<form action="/update" method="post">
<div class="modal fade" id="duzen" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Moda1">Etiketi Düzenle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" name="okuyucu" class="form-control okuyucu" placeholder="okuyucu" required>
</div>
<div class="form-group">
<input type="text" name="x" class="form-control x" placeholder="x" required>
</div>
<div class="form-group">
<input type="text" name="y" class="form-control y" placeholder="y" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="idnew_table" class="idnew_table">
<button type="button" class="btn btn-secondary btn-pill" data-dismiss="modal">Kapat</button>
<button type="submit" class="btn btn-primary btn-pill">Güncelle</button>
</div>
</div>
</div>
</div>
</form>
我的ajax代码
<script>
$(document).ready(() => {
var x1="";
var y1="";
var okuyucu1="";
var id="";
$.ajax({
url: "http://localhost:10001/etiketokuyucu",
method: 'GET',
success: function(response){
if(response.length > 0){
for(let index = 0; index < response.length; index++) {
var newRow = $("<tr>");
var cols = "";
var okuyucu = '';
var x = '';
var y = '';
var id='';
cols += '<td>' + response[index].idnew_table+'</td>';
cols += '<td> '+ response[index].okuyucu +'</td>' ;
cols += '<td> '+ response[index].x +'</td>';
cols += '<td> '+ response[index].y +'</td>';
cols += '<td>'
+
'<div class="dropdown d-inline-block widget-dropdown">'+
'<a class="dropdown-toggle icon-burger-mini" href="" role="button" id="dropdown-recent-order1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>'+
'<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order1">'+
'<li class="dropdown-item edit">'+
'<a href="#duzen" class= "edit" data-idnew_table='+response[index].idnew_table + ' data-okuyucu=' +response[index].okuyucu + ' data-x= ' + response[index].x + ' data-y= ' + response[index].y + ' data-toggle="modal" data-target="#duzen">Düzenle</a>'+
'</li>'+
'<li class="dropdown-item delete">'+
'<a href="#" data-toggle="modal" data-target="#modal2">Sil</a>'+
'</li>'+
'</ul>'+
'</div>'+
'</td>' ;
newRow.append(cols);
$("#example .tbody").append(newRow);
}
}
}
})
})
我的模态脚本代码
<script>
$(document).ready(function(){
//showing data to modal for edit record
$('#example').on('click','.edit',function(){
var idnew_table = $(this).data('idnew_table');
var okuyucu= $(this).data('okuyucu');
var x = $(this).data('x');
var y = $(this).data('y');
console.log(idnew_table+"okuyucu="+okuyucu + "x=" +x+" y="+y);
var modal = $(this);
modal.find('#okuyucu').text(okuyucu);
modal.find('#x').text(x);
modal.find('#y').text(y);
/*$('#duzen').modal('show');
$('.okuyucu').val($(this).data('okuyucu'))
$('.x').val(x);
$('.y').val(y);
$('.idnew_table').val(idnew_table);
*/ });
//showing modal for delete record
});
我想在模态上显示我的 mysql 数据，但我得到了 error.In 此代码首先在控制台 okuyucu、x、y 等中显示真实值，但在模态显示中它们是 undefined.why 当他们第二次 运行 时，他们在我的控制台中没有显示真正的价值吗？它将数据从 ajax 传递到 table 我从脚本代码中读取了该值但没有显示在我的模态
感谢您的帮助
您当前将值附加到 table 的代码具有 2 class edit 即：li 和 <a> 所以当您单击编辑 link 两个 class 被调用并且它返回未定义。此外，您在模态内的输入没有任何 id 而只有 name 我有更正了您的代码。
演示代码 :
//demo data
var response = [{
"idnew_table": "1",
"okuyucu": "abc",
"x": "12",
"y": "fbg"
}, {
"idnew_table": "2",
"okuyucu": "abcd",
"x": "152",
"y": "f5bg"
}, {
"idnew_table": "3",
"okuyucu": "abce",
"x": "125",
"y": "fb5g"
}]
if (response.length > 0) {
for (let index = 0; index < response.length; index++) {
var newRow = $("<tr>");
var cols = "";
var okuyucu = '';
var x = '';
var y = '';
var id = '';
cols += '<td>' + response[index].idnew_table + '</td>';
cols += '<td> ' + response[index].okuyucu + '</td>';
cols += '<td> ' + response[index].x + '</td>';
cols += '<td> ' + response[index].y + '</td>';
cols += '<td>' +
'<div class="dropdown d-inline-block widget-dropdown">' +
'<a class="dropdown-toggle icon-burger-mini" href="" role="button" id="dropdown-recent-order1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>' +
'<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order1">' +
'<li class="dropdown-item ">' + //<--remove class edit
'<a href="#duzen" class= "edit" data-idnew_table='+response[index].idnew_table + ' data-okuyucu=' +response[index].okuyucu + ' data-x= ' + response[index].x + ' data-y= ' + response[index].y + ' data-toggle="modal" data-target="#duzen">Düzenle</a>'+
'</li>' +
'<li class="dropdown-item delete">' +
'<a href="#" data-toggle="modal" data-target="#modal2">Sil</a>' +
'</li>' +
'</ul>' +
'</div>' +
'</td>';
newRow.append(cols);
$("#example .tbody").append(newRow);
}
}
//showing data to modal for edit record
$('#example').on('click','.edit',function(){
var idnew_table = $(this).data('idnew_table');
var okuyucu = $(this).data('okuyucu');
var x = $(this).data('x');
var y = $(this).data('y');
console.log(idnew_table + "okuyucu=" + okuyucu + "x=" + x + " y=" + y);
//find input under modal and set value of inputs
$("#duzen").find('input[name=okuyucu]').val(okuyucu);
$("#duzen").find('input[name=x]').val(x);
$("#duzen").find('input[name=y]').val(y);
$('#duzen').modal('show');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<table id="example" border="1">
<thead>
<th>idnew_table</th>
<th>okuyucu</th>
<th>x</th>
<th>y</th>
<th>Action</th>
</thead>
<tbody class="tbody">
</tbody>
</table>
<form action="/update" method="post">
<div class="modal fade" id="duzen" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Moda1">Etiketi Düzenle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" name="okuyucu" class="form-control okuyucu" placeholder="okuyucu" required>
</div>
<div class="form-group">
<input type="text" name="x" class="form-control x" placeholder="x" required>
</div>
<div class="form-group">
<input type="text" name="y" class="form-control y" placeholder="y" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="idnew_table" class="idnew_table">
<button type="button" class="btn btn-secondary btn-pill" data-dismiss="modal">Kapat</button>
<button type="submit" class="btn btn-primary btn-pill">Güncelle</button>
</div>
</div>
</div>
</div>
</form>