我是 AJAX 的新手。当我单击复选框时,我想用mysql数据进行动态搜索。
在单击复选框之后,我成功地生成了一个ajax数据表,但是现在我面临一些奇怪的问题。
过程如下:
当我悬停在一个包含下拉菜单的图像上,其中的内容有一个delete按钮时,它将传递一个隐藏值并显示一个包含表单的boostrap模式弹出菜单。
表单提交按钮不工作。
你可以看到下面的图片
下面是我的代码:
$(document).ready(function() {
$(':input[type=checkbox]').change(function() {
var formData = $('#product').serialize();
$.ajax({
url: '/rawDataSearch',
data: formData,
type: 'post',
dataType: 'json',
success: function(data) {
//alert("success");
console.log(data);
$("#mytable").empty();
var str = '<table><thead>'+'<tr class="tr"><th class="th1" colspan="3">Program_Info</th><th></th><th class="th2" >CA</th><th class="th2">MRR</th><th class="th2">PCO</th><th class="th2">LIVE DESIGN</th><th class="th2">CO</th><th class="th2">RFQ RELEASE</th><th class="th2">PAA</th><th class="th2">AWARD</th><th class="th2">POR</th><th class="th2">POR Update</th><th class="th2">RTP/MP</th><th class="th2">FCS/FFS</th></tr></thead><tbody>';
$.each(data, function (key, value) {
console.log(value.Sta_Adj_Award_Color);
str = str + '<tr class="tr"><td class="td1">' +
//dropdown menu start//
'<div class="dropdown" style="float: left">' +
'<a href=#><img src="images/dots.png"></a>' +
'<div class="dropdown-content" style="left:0">' +
'<form action="/editProInfo" method="POST" novalidate >'+
'<input type="hidden" name="Id" value="' + value.Id + '" />'+
'<button class="dropbtn" style="background-color:transparent; border:0;margin-top: -8px;; margin-bottom: -25px;"><a>Edit</a></button></form>'+
'<button data-toggle="modal" data-target="#myModal" class="dropbtn1" title="' + value.Id +'" style="background-color:transparent; border:0;margin-bottom: -10px"><a>Delete</a></button></div>'+
'</div>'+
//dropdown menu end//
'</td>'+
'<div id="myModal" class="modal fade">'+
'<div class="modal-dialog modal-dialog-centered" align="center">'+
'<div class="modal-content" align="center">'+
'<div class="modal-header" align="center">'+
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">'+'</button>'+
'<h4 class="modal-title" align="center">'+'Confirmation'+'</h4>'+
'</div>'+
'<div class="modal-body">'+
'<div style="display:inline-block">'+
'<form action="/delProInfo/del" method="POST" novalidate >'+
'<input type="hidden" name="Id" class="hiddenValue" value="" />'+
'<p align="center">'+'Do you want to delete the data ?'+'</p>'+
'<p align="center" class="text-warning"><small>'+'If you sure to delete, please write some comments.'+'</small></p>'+
'<textarea align="center" name="del_comment" rows="4" cols="50">'+'</textarea><br><br>'+
'<div>'+
'<button class="btn btn-primary">'+'Sure to Delete'+'</button>'+
'</div>'+
'</form>'+'<br>'+
'<div>'+
'<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">'+'Close'+
'</button>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'<td class="td1">'+'<img src="'+value.AttColor+'"></td><td class="td2" style="border-right:#979797 solid 1px;">'+
value.Program_Codename + '</td><td class="td">' + 'Status'+'</td><td class="td">'+
'<img src="'+ value.Sta_Adj_CA_Color +'"></td><td class="td">'+
'<img src="'+ value.Sta_Adj_MRR_Color +'"></td><td class="td">' +
'<img src="'+ value.Sta_Adj_PCO_Color +'"></td><td class="td">' +
'<img src="'+ value.Sta_Adj_LD_Color +'"></td><td class="td">' +
'<img src="'+ value.Sta_Adj_CO_Color +'"></td><td class="td">' +
'<img src="'+ value.Sta_Adj_RFQ_Release_Color +'"></td><td class="td">'+
'<img src="'+ value.Sta_Adj_PAA_Color +'"></td><td class="td">'+
'<img src="'+ value.Sta_Adj_Award_Color +'"></td><td class="td">'+
'<img src="'+ value.Sta_Adj_POR_Color +'"></td><td class="td">'+
'<img src="'+ value.Sta_Adj_POR_Update_Color +'"></td><td class="td">'+
'<img src="'+ value.Sta_Adj_RTP_Color +'"></td><td class="td">'+
'<img src="'+ value.Sta_Adj_FCS_Color +'"></td><td class="td">'+ '</td></tr>'+
});
str = str + '</tbody></table>';
$('#mytable').html(str);
$('.dropbtn1').click(function(){
var title = $(this).attr('title')
alert(title);
$('.hiddenValue').val(title);
});
},
error: function(jqXHR, textStatus, errorThrown){
alert('error ' + textStatus + " " + errorThrown);
}
});
});
});
我想我发现了问题:
在我的浏览器原始代码中,元素不在“form”标记中。但在我的代码中,我实际上把元素放在了正确的位置。为什么?
2条答案
按热度按时间8dtrkrch1#
我解决了这个问题,我认为这是html中的父元素标记问题。我尝试了很多方法,但仍然没有找到解决这个问题的方法,所以我采用了另一种方法来解决这个问题。我的解决方案是:当用户单击“确定删除”按钮时添加一个ajax调用,当用户成功删除该项时返回主页。
q8l4jmvw2#
这样做: