#javascript #php #ajax
#javascript #php #ajax
Вопрос:
Я использую плагин datatables для рисования таблиц для моей веб-страницы. У меня есть тег выбора для выбора покупателя с динамическим списком покупателей. когда я выбираю покупателя, он загружает соответствующие данные этого покупателя в datatable, и это работает нормально. Но если я поменяю покупателя, данные в таблице останутся неизменными.
Это код тега select —
<!--=====================================
= Buyer INPUT =
======================================-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-industry text-aqua"></i></span>
<select class="form-control selectBuyer" style="width: 369px" name="selectBuyer" id="selectBuyer" required>
<option name="selectBuyer">Select Buyer</option>
<?php
$item = null;
$value = null;
$buyers = ControllerBuyers::ctrShowBuyers($item, $value);
foreach ($buyers as $key => $value) {
echo '<option value="'.$value["name"].'">'.$value["name"].'</option>';
}
echo '</select>';
?>
<span class="input-group-addon" style="width: 39px"><i class="fa fa-map-marker text-aqua"></i></span>
<input class="form-control sAdd" style="width: 370px" type="text" name="sAdd" id="sAdd" readonly required>
</div>
</div>
А также следующий входной тег для адреса обновляется, когда мы выбираем покупателя.
это мой код javascript —
/*=============================================
ADDING Buyer Address
=============================================*/
$(".piForm").on("change", "select.selectBuyer", function(){
var name = $(this).val();
var buyerAddress = $(this).parent().children(".sAdd");
var datum = new FormData();
datum.append("name", name);
$.ajax({
url:"ajax/buyers.ajax.php",
method: "POST",
data: datum,
cache: false,
contentType: false,
processData: false,
dataType:"json",
success:function(answer){
$(buyerAddress).val(answer["address"]);
}
})
})
/*=============================================
LOAD DYNAMIC PRODUCTS TABLE
=============================================*/
$(".piForm").on("change", "select.selectBuyer", function(){
var selectedBuyer = $('#selectBuyer').val();
$('.blocksTable').DataTable({
"ajax": "ajax/datatable-pi.ajax.php?selectedBuyer=" selectedBuyer,
"deferRender": true,
"retrieve": true,
"processing": true
});
})
это мой ajax-код —
<?php
require_once "../controllers/mark.controller.php";
require_once "../models/mark.model.php";
class eblocksTablePI{
/*=============================================
SHOW Blocks TABLE
=============================================*/
public function showBlocksTablePI(){
$item = null;
$value = null;
$answer = ControllerMark::ctrShowMark($item, $value);
if(count($answer) == 0){
$jsonData = '{"data":[]}';
echo $jsonData;
return;
}
$jsonData = '{
"data":[';
foreach ($answer as $key => $value) {
if (($value["buyer"] == $_GET["selectedBuyer"]) amp;amp; ($value["netL"] != 0)) {
$blockNo = "$value[blockNo]";
$netCUM = "$value[netCUM]";
$grossCUM = "$value[grossCUM]";
$buttons = "<button class= 'btn btn-primary addBlock recoverButton' idMark='".$value["id"]."'>Add</button>";
$jsonData .='[
"'.$blockNo.'",
"'.$netCUM.'",
"'.$grossCUM.'",
"'.$buttons.'"
],';
}
}
$jsonData = substr($jsonData, 0, -1);
$jsonData .= ']
}';
echo $jsonData;
}
}
/*=============================================
ACTIVATE PRODUCTS TABLE
=============================================*/
$activateBlocksPI = new blocksTablePI();
$activateBlocksPI -> showBlocksTablePI();
Я искал, но не нашел решений, которые имеют отношение к моей проблеме. проблема в том, что если я выбираю покупателя в первый раз, ввод адреса обновляется, и таблица блоков также загружается правильно, тогда, если я меняю покупателя, адрес обновляется, но таблица остается как есть.
Комментарии:
1. извините, я по ошибке добавил код, который предназначен для редактирования формы. теперь я исправил это в вопросе
2. Можете ли вы уточнить, какие части всего этого кода не выполняются и почему? Если вы выполняете обновления с помощью AJAX, отправляются ли правильные данные на серверную часть? Содержит ли ответ ожидаемые данные?
3. да, ответ содержит обновленные данные при смене покупателя, у меня есть консоль. зарегистрировал это и проверил.
Ответ №1:
В настоящее время вы многократно инициализируете свой datatable по щелчку мыши. Поместите эту инициализацию вне вашего обработчика событий. И по щелчку обновите свои данные с помощью ajax.url() и ajax.load() .
// Initializes
let selectedBuyer = $('#selectBuyer').val();
let myDatatable = $('.blocksTable').DataTable({
"ajax": "ajax/datatable-pi.ajax.php?selectedBuyer=" selectedBuyer,
"deferRender": true,
"retrieve": true,
"processing": true
});
$(".piForm").on("change", "select.selectBuyer", function(){
selectedBuyer = $(this).val();
// Updates on click
myDatatable.ajax.url("ajax/datatable-pi.ajax.php?selectedBuyer=" selectedBuyer).load();
})
Комментарии:
1. Я изменил код, но ошибка получения selectedBuyer не определена.
2. Ваша переменная
selectedBuyedдолжна быть определена перед инициализацией.3. Спасибо за помощь, я только что удалил последнюю часть URL-адреса ajax «?selectedBuyer=» selectedBuyer» теперь он работает, как ожидалось.
Ответ №2:
По предложению iArcadia я изменил код в моем файле javascript, который выглядит следующим образом
/*=============================================
LOAD DYNAMIC PRODUCTS TABLE
=============================================*/
let myDatatable = $('.blocksTable').DataTable({
"ajax": "ajax/datatable-pi.ajax.php",
"deferRender": true,
"retrieve": true,
"processing": true
});
$(".piForm").on("change", "select.selectBuyer", function(){
var selectedBuyer = $('#selectBuyer').val();
myDatatable.ajax.url("ajax/datatable-pi.ajax.php?selectedBuyer=" selectedBuyer).load();
})
и удалил «?selectedBuyer=» selectedBuyer» из URL-адреса ajax при инициализации.
теперь он работает нормально.
Спасибо iArcadia за вашу помощь.
Ответ №3:
Предыдущий ответ создал еще 1 проблему, о которой я узнал после тестирования кода после повторного входа на веб-сайт. Приведенный ниже код работает после нескольких тестов и перезаписей
/*=============================================
LOAD DYNAMIC PRODUCTS TABLE
=============================================*/
$(".piForm").on("change", "select.selectBuyer", function(){
var selectedBuyer = $('#selectBuyer').val();
let myDatatable = $('.blocksTable').DataTable({
"ajax": "ajax/datatable-pi.ajax.php",
"deferRender": true,
"retrieve": true,
"processing": true
});
myDatatable.ajax.url("ajax/datatable-pi.ajax.php?selectedBuyer=" selectedBuyer).load();
})