我有一個通過 ajax 呼叫顯示的串列，每個元素都有一個執行查詢的 onclick，模型接收到正確的查詢，但是當它重繪 串列時它保持空白，就好像來自控制器的資訊沒有到達因為當查詢確實得到結果并且 div 保持空白時，我對 foreach 和標記 array[0] 做了一個 var_dump
這是我的代碼：
<?php
foreach ($direc as $direccion) :
?>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<option id="hijo" value="<?= $direccion['first_name'] ?> <?= $direccion['last_name'] ?>" href="javascript:;"
onclick="realizaProceso($(this).val());return false;">
<h4 class="mb-0">
<strong><?= $direccion['first_name'] ?> <?= $direccion['last_name'] ?>, Zona--><?= $direccion['nombre_zona'] ?></strong>
</h4>
</option>
</div>
<div class="col-auto">
</div>
<script>
function realizaProceso(padre) {
var parametros = {
"padre": padre
};
$.ajax({
data: parametros, //datos que se envian a traves de ajax
url: "<?php echo base_url() ?>Administracion/paneladminreddos", //archivo que recibe la peticion
type: 'post', //método de envio
beforeSend: function() {
$("#content").html("Procesando, espere por favor...");
},
success: function(response) { //una vez que el archivo recibe el request lo procesa y lo devuelve
$("#content").html(response);
}
});
}
</script>
沒有錯誤訊息只是 div 不會再次重繪 。
uj5u.com熱心網友回復：
我將重寫 HTML 部分以更正先前識別的標記錯誤，并在呈現串列后系結事件處理程式。
<?php
foreach( $direc as $direccion ) {
?>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<!--
Change the `option` to another element such as `i` as used here.
Change the ID to a `data-id` so that duplicate IDs are not observered in the DOM.
Remove inline event handler and assign external event listener later.
Assign `data-set` attributes so that the event listener can obtain required information when the `i` element is clicked.
-->
<i data-id='hijo' data-zona='<?= $direccion['nombre_zona']; ?>' data-value='<?= $direccion['first_name'];?> <?= $direccion['last_name'];?>' >
<h4 class="mb-0">
<strong><?=$direccion['first_name']; ?> <?=$direccion['last_name']; ?>, Zona--><?=$direccion['nombre_zona']; ?></strong>
</h4>
</i>
</div>
<div class="col-auto">
</div>
</div>
</li>
<?php
}//end foreach loop
?>
和外部事件監聽器：
<script>
document.querySelectorAll('i[ data-id="hijo" ]').forEach( i=>i.addEventListener('click',function(e){
e.preventDefault();
e.stopPropagation();
<?php
printf(
'const url="%s/Administracion/paneladminreddos";',
base_url()
);
?>
// Use `this` to access (dataset) properties of the `i` element.
// Construct the payload for the POST request.
let data={
'padre':this.dataset.value,
'zona':this.dataset.zona
};
$.ajax({
data:data,
url:url,
type:'post',
beforeSend:()=>$('#content').html('Procesando, espere por favor...'),
success:(r)=>$('#content').html(r),
error:(e)=>console.log(e)
});
}));
</script>
一個例子
顯示代碼片段
document.querySelectorAll('[data-id="hijo"]').forEach(n => n.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const url = location.href;
let data = {
'padre': this.dataset.value,
'zona': this.dataset.zona
};
$.ajax({
data: data,
url: url,
type: 'post',
beforeSend: () => $('#content').html('Procesando, espere por favor...'),
success: (r) => $('#content').html(r),
error: (e) => console.log(e.statusText)
});
}));<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<i data-id='hijo' data-zona='International' data-value='John Smith'>
<h4 class="mb-0">
<strong>John Smith, Zona -->International</strong>
</h4>
</i>
</div>
<div class="col-auto"></div>
</div>
</li>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<i data-id='hijo' data-zona='Spy' data-value='Mr Bean'>
<h4 class="mb-0">
<strong>Mr Bean, Zona -->Spy</strong>
</h4>
</i>
</div>
<div class="col-auto"></div>
</div>
</li>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<i data-id='hijo' data-zona='Superhero' data-value='Batman'>
<h4 class="mb-0">
<strong>Batman, Zona -->Superhero</strong>
</h4>
</i>
</div>
<div class="col-auto"></div>
</div>
</li>
</ul>uj5u.com熱心網友回復：
Foreach 函式將是回圈，重復標記。因此，如果您為此設定 id，我認為您可以按數字順序或 ID 進行設定。
<option id="<?= $direccion['id'] ?>" value="<?= $direccion['first_name'] ?> <?= $direccion['last_name'] ?>"
uj5u.com熱心網友回復：
似乎您正在使用 foreach，但您正在嘗試訪問集合“$direccion”而不是專案“$direc”。這可能會修復您的代碼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/487738.html