jQuery datatable按钮仅在第一次单击时起作用 HTML-PHP
我在Uteni-metrici.php上有一个表数据,还有2个模式窗口,用于修改/读取数据。在表中,我还有一个按钮(读取、更新和删除): PHP后端 在后端php文件modalUpdate_backend.php中,生成了用于构建模式内容的HTML代码:jQuery datatable按钮仅在第一次单击时起作用 HTML-PHP,php,jquery,html,dom,datatables,Php,Jquery,Html,Dom,Datatables,我在Uteni-metrici.php上有一个表数据,还有2个模式窗口,用于修改/读取数据。在表中,我还有一个按钮(读取、更新和删除): PHP后端 在后端php文件modalUpdate_backend.php中,生成了用于构建模式内容的HTML代码: <?php require '../dbconfig_PDO.php'; if (empty($_POST['save'])) { $id = null; if
<?php
require '../dbconfig_PDO.php';
if (empty($_POST['save'])) {
$id = null;
if ( !empty($_POST['id'])) {
$id = $_REQUEST['id'];
}
if ( null==$id ) {
header("Location: index.php");
} else {
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "SELECT * FROM utenti_metrici where id = ?";
$q = $pdo->prepare($sql);
$q->execute(array($id));
$data = $q->fetch(PDO::FETCH_ASSOC);
Database::disconnect();
}
echo('<div class="modal-content">');
echo('<div class="modal-header">');
echo('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>');
echo('<h3 class="modal-title" id="myModalLabel">'.$data['ragioneSociale'].'</h3>');
echo('</div>');
echo('<div class="modal-body">');
echo('<div class="form-horizontal" >');
$i=0;
foreach ($data as $key => $value){
if ($key==0){
echo('<div class="form-group">');
echo('<label class="col-md-2 control-label">'.$key.'</label>');
echo('<div class="col-md-10">');
if ($i++==0){
echo('<input type="text" class="form-control" value="'.$value.'" disabled>');
} elseif ($i==count($data)){
echo('<input type="text" class="form-control" value="'.$value.'" disabled>');
} else {
echo('<input type="text" class="form-control" value="'.$value.'">');
}
echo('</div>');
echo('</div>');
}
}
echo('</div>');
echo('</div>');
echo('<div class="modal-footer">');
echo('<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times-circle"></i> Close</button>');
echo('<button id="prp" type="button" class="btn btn-custom-primary"><i class="fa fa-check-circle"></i> Save changes</button>');
echo('</div>');
echo('</div>');
} elseif (!empty($_POST['save'])){
$id = null;
if ( !empty($_POST['id'])) {
$id = $_REQUEST['id'];
}
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "SELECT * FROM utenti_metrici WHERE id = ?";
$q = $pdo->prepare($sql);
$q->execute(array($id));
$data = $q->fetch(PDO::FETCH_ASSOC);
$query_set='';
$numItems = count($data);
$i=0;
foreach ($data as $key => $value){
if(++$i === $numItems) {
$query_set=$query_set . $key . ' = ? ';
} else {
$query_set=$query_set . $key . ' = ?, ';
}
}
$sql = "UPDATE utenti_metrici SET " . $query_set . " WHERE id = ?";
$q = $pdo->prepare($sql);
$values=$_POST['values'];
echo(json_encode($values));
array_push($values,$id);
$q->execute($values);
Database::disconnect();
}
?>
nRow.data()[6]
包含三个按钮的HTML的未在DOM上正确注册
有人有什么建议吗?
感谢您使用委托事件处理程序,以便它可以用于以后添加的元素 例如:
$('table#utenti_metrici')。在('click','btn success',function()上{
//…跳过。。。
});
有关更多信息,请参阅。这些按钮的html在更新后是否再次呈现?是的,请详细说明其呈现方式!您可以尝试更改此
$(“#table_tenti_metrici.btn success”)。在('click',function(){
上更改为$('body')。在('click','.btn success',function(){
否…不起作用:-(它继续不起作用。我尝试了其他测试…例如,在td上单击一些代码(在主JS函数之外):before可以正常工作,after Confirm不起作用。它似乎真的不存在于DOM中
$(document).ready(function(){
//clicked row
var nRow='';
var $table_utenti_metrici = $('#table_utenti_metrici').DataTable({});
//--------------------------------------------------------------------------------------------------------------------------------------->>>> PULSANTE UPDATE
$('#table_utenti_metrici .btn-success').on('click',function(){
alert("er");
var row_id = $(this) .closest("tr")
.find(".row_id")
.text()
nRow=$table_utenti_metrici.row($(this).parents('tr'));
$.ajax({
cache: false,
type: 'POST',
url: 'php/modalUpdate_backend.php',
data: 'id='+row_id,
success: function(data){
// obj=$.parseJSON(data);
// $("#modalRead h3").html(obj['ragioneSociale']);
//
// $("#read_id").attr('placeholder',obj['id']);
$(".modal-dialog").empty();
$(".modal-dialog").html(data);
$("#modalReadUpdate").modal("show");
}
})
})
//--------------------------------------------------------------------------------------------------------------------------------------->>>> END PULSANTE UPDATE
//--------------------------------------------------------------------------------------------------------------------------------------->>>> PULSANTE SAVE & EXIT
$('#modalReadUpdate').on('click','.btn-custom-primary',function(){
var row_id = $("#modalReadUpdate .form-group").find('input').select(':first').val();
//************** LOG **************
//*********************************
var log=1;
var logID=0
if (log){
logID++;
console.log('[' + logID + '] - Riga selezionata (row_id): '); console.log(row_id);
}
//*********************************
//************** LOG **************
var values = [];
$('#modalReadUpdate .form-horizontal input').each(function(){
values.push($(this).val());
})
//************** LOG **************
//*********************************
if (log){
logID++;
console.log('[' + logID + '] - Valori riga selezionata (values): '); console.log(values);
logID++;
console.log('[' + logID + '] - Contenuto riga cliccata (nRow): '); console.log(nRow);
//console.log(nRow.index());
}
//*************************************************************************************************************************************************************
//************** LOG ******************************************************************************************************************************************
$.ajax({
cache: false,
type: 'POST',
url: 'php/modalUpdate_backend.php',
data: {id: row_id, save: 1, values: values},
success: function(data){
//************** LOG ******************************************************************************************************************************************
//*************************************************************************************************************************************************************
if (log){
logID++;
console.log('[' + logID + '] - Dati di ritorno dallo script PHP (php/modalUpdate_backend.php): '); console.log(data);
}
//*************************************************************************************************************************************************************
//************** LOG ******************************************************************************************************************************************
var obj=$.parseJSON(data);
//************** LOG ******************************************************************************************************************************************
//*************************************************************************************************************************************************************
if (log){
logID++;
console.log('[' + logID + '] - Oggetto JSON di ritorno dallo script PHP (php/modalUpdate_backend.php) : '); console.log(obj);
}
//*************************************************************************************************************************************************************
//************** LOG ******************************************************************************************************************************************
var tableRow = $("td").filter(function() {
return $(this).text() == obj[0];
}).closest("tr");
//************** LOG *****************************************************************************************************************************************
//************************************************************************************************************************************************************
if (log){
logID++;
console.log('[' + logID + '] - Variabile tableRow : '); console.log(tableRow);
}
//*************************************************************************************************************************************************************
//************** LOG ******************************************************************************************************************************************
var dataRow=$table_utenti_metrici.row(nRow.index());
//************** LOG ******************************************************************************************************************************************
//*************************************************************************************************************************************************************
if (log){
logID++;
console.log('[' + logID + '] - Variabile dataRow : '); console.log(dataRow);
}
//*************************************************************************************************************************************************************
//************** LOG ******************************************************************************************************************************************
newData=[obj[0], obj[1],obj[2],obj[7],obj[8],nRow.data()[5],nRow.data()[6]];
//************** LOG ******************************************************************************************************************************************
//*************************************************************************************************************************************************************
if (log){
logID++;
console.log('[' + logID + '] - Variabile per aggiornamento riga tabella (newData) : '); console.log(newData);
}
//*************************************************************************************************************************************************************
//************** LOG ******************************************************************************************************************************************
dataRow.data(newData).draw();
$("#modalReadUpdate").modal("hide");
}
})
})
//--------------------------------------------------------------------------------------------------------------------------------------->>>> END PULSANTE SAVE & EXIT
<?php
require '../dbconfig_PDO.php';
if (empty($_POST['save'])) {
$id = null;
if ( !empty($_POST['id'])) {
$id = $_REQUEST['id'];
}
if ( null==$id ) {
header("Location: index.php");
} else {
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "SELECT * FROM utenti_metrici where id = ?";
$q = $pdo->prepare($sql);
$q->execute(array($id));
$data = $q->fetch(PDO::FETCH_ASSOC);
Database::disconnect();
}
echo('<div class="modal-content">');
echo('<div class="modal-header">');
echo('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>');
echo('<h3 class="modal-title" id="myModalLabel">'.$data['ragioneSociale'].'</h3>');
echo('</div>');
echo('<div class="modal-body">');
echo('<div class="form-horizontal" >');
$i=0;
foreach ($data as $key => $value){
if ($key==0){
echo('<div class="form-group">');
echo('<label class="col-md-2 control-label">'.$key.'</label>');
echo('<div class="col-md-10">');
if ($i++==0){
echo('<input type="text" class="form-control" value="'.$value.'" disabled>');
} elseif ($i==count($data)){
echo('<input type="text" class="form-control" value="'.$value.'" disabled>');
} else {
echo('<input type="text" class="form-control" value="'.$value.'">');
}
echo('</div>');
echo('</div>');
}
}
echo('</div>');
echo('</div>');
echo('<div class="modal-footer">');
echo('<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times-circle"></i> Close</button>');
echo('<button id="prp" type="button" class="btn btn-custom-primary"><i class="fa fa-check-circle"></i> Save changes</button>');
echo('</div>');
echo('</div>');
} elseif (!empty($_POST['save'])){
$id = null;
if ( !empty($_POST['id'])) {
$id = $_REQUEST['id'];
}
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "SELECT * FROM utenti_metrici WHERE id = ?";
$q = $pdo->prepare($sql);
$q->execute(array($id));
$data = $q->fetch(PDO::FETCH_ASSOC);
$query_set='';
$numItems = count($data);
$i=0;
foreach ($data as $key => $value){
if(++$i === $numItems) {
$query_set=$query_set . $key . ' = ? ';
} else {
$query_set=$query_set . $key . ' = ?, ';
}
}
$sql = "UPDATE utenti_metrici SET " . $query_set . " WHERE id = ?";
$q = $pdo->prepare($sql);
$values=$_POST['values'];
echo(json_encode($values));
array_push($values,$id);
$q->execute($values);
Database::disconnect();
}
?>
newData=[obj[0], obj[1],obj[2],obj[7],obj[8],nRow.data()[5],nRow.data()[6]];
dataRow.data(newData).draw();