【发布时间】：2020-02-07 11:53:19
【问题描述】：
背景：
我制作了一个脚本来加载产品名称表，当您单击该表行上的按钮时，它会显示一个搜索框。此搜索框使用 jquery UI 自动完成功能。选择选项时，它将从该主项目数据库中从其他数据库中提取该产品信息，并将它们放在相应的
中表中的标签。然后它还会将此内容提交到另一个数据库中的另一个表，该数据库是项目的主数据库。它正确存储了信息，并且当 foreach 循环与主项目中的数据库内容一起运行时，它正在正确加载。用户按下以显示搜索框的按钮显示“链接产品”，一旦他们选择它，按钮就会将 css 和 html 值更改为编辑产品。
问题
我遇到的问题是任何从主数据库加载内容的表行都需要“编辑按钮”仍然存在，并且任何空白行都必须显示链接产品按钮。但是当您刷新页面时，它们都会恢复为“链接按钮”。
现在我将向您展示代码，但我会提醒您它非常混乱，因为我对 ajax 和 jquery 都是新手。
守则
HTML页面
<div class="container">
<div class="row">
<div class="col text-center">
<h3 id="edit_sheet_title" class="mt-3 mb-3"><?php echo $title; ?></h3>
</div>
</div>
<div class="row mb-5">
<div class="col-xl-12 col-md-12 col-sm-12 col-12 text-center">
<a href="<?php echo URLROOT; ?>product/import/<?php echo $sheet_id; ?>" class="btn btn-primary tb">Bulk Import</a>
<a href="<?php echo URLROOT; ?>container/import/<?php echo $sheet_id; ?>" class="btn btn-info tb">Container Import</a>
<a href="<?php echo URLROOT; ?>product/add/<?php echo $sheet_id; ?>" class="btn btn-warning tb">Add Product</a>
<a href="<?php echo URLROOT; ?>sheet/generate" class="btn btn-success tb">Generate Sheet</a>
<a href="<?php echo URLROOT; ?>" class="btn btn-danger tb">Go Back</a>
</div>
</div>
</div>
<div class="table-container">
<div class="row">
<div class="col">
<div class="table-responsive">
<table class="table" id="sheet_list">
<thead>
<tr>
<th class="align-middle th-id">ID</th>
<th class="align-middle th-name">Product Name</th>
<th>Ingredients</th>
<th id="button_th"></th>
</tr>
</thead>
<tbody>
<?php if(!empty($sheet_product_list)) { ?>
<?php foreach($sheet_product_list as $product) { ?>
<tr>
<td><p data-id="entry_id" id="entry_id" class="table-p"><?php echo $product['entry_id']; ?></p></td>
<td class="td-name"><?php echo $product['display_name']; ?></td>
<td>
<div id="search_div">
<input type="text" class="wholesale_product_search mb-5 block" data-info="search_box" data-entry-id="<?php echo $product['entry_id']; ?>" name="product_search" id="product_search" placeholder="Search for product...">
</div>
<p data-info="product_id" id="product_id" class="<?php echo $product['entry_id']; ?>">
<?php if(isset($product['wholesale_product_id'])){ echo "Product ID: " . $product['wholesale_product_id'];} ?>
</p>
<p data-info="wholesale_name" id="wholesale_name" class="<?php echo $product['entry_id']; ?>">
<?php if(isset($product['wholesale_name'])){ echo $product['wholesale_name'];} ?>
</p>
<p data-info="is_manual" class="<?php echo $product['entry_id']; ?>">
</p>
<p data-info="ingredients_section" id="ingredients_section" class="<?php echo $product['entry_id']; ?>">
<?php if(isset($product['wholesale_ingredients'])){echo $product['wholesale_ingredients'];} ?>
</p>
</td>
<td class="pull-right align-middle">
<div class="button_td_div">
<button id="edit_product_button" data-id="<?php echo $product['entry_id']; ?>" class="btn btn-info" role="button">Link Product</button><br>
<a id="column_button" href="<?php echo URLROOT; ?>product/delete/<?php echo $sheet['sheet_id']; ?>/<?php echo $product['entry_id']; ?>" class="btn btn-danger" role="button">Delete Product</a>
</div>
</td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<input type="hidden" id="sheet_id" value="<?php echo $sheet_id; ?>">
jQuery 函数
$('button[data-id]').click( function () {
var display_name = $('.td-name').html();
var entry_id = $(this).attr("data-id");
var search_box = $("input[data-info='search_box'][data-entry-id="+entry_id+"]");
var ingredients_section = $("p[data-info='ingredients_section']."+entry_id);
var wholesale_name = $("p[data-info='wholesale_name']."+entry_id);
var wholesale_product_id = $("p[data-info='product_id']."+entry_id);
var edit_button = $('button[data-id='+entry_id+']');
const sheet_id = $('#sheet_id').val();
$(search_box).on( "autocompleteselect", function(e, ui) {
var result_string = ui.item.value; // this is the string returned from the search
var product_id = result_string.match( /\d+/ )[0];
$(search_box).hide();
edit_button.html('Edit Product');
edit_button.removeClass("btn btn-warning").addClass("btn btn-success");
$.ajax({
type: "GET",
url: ajax_url,
data: "product_id="+product_id,
success: function(data){
var obj = JSON.parse(data);
const ingredients = obj[0].ingredients;
const product_name = obj[0].name;
const w_product_id = obj[0].product_id;
$(wholesale_product_id).html('Product ID: '+w_product_id);
$('#confirmed').show();
$(wholesale_name).html('Wholesale Name: '+product_name);
$(ingredients_section).html(ingredients);
$.ajax({
type: "POST",
url: ajax_url,
data: {post_sheet_id: sheet_id,post_wholesale_product_id: w_product_id, post_wholesale_ingredients: ingredients, entry_id: entry_id,wholesale_product_name: product_name},
success: function(data){
var obj = JSON.parse(data);
$.ajax({
type: "GET",
url: ajax_url,
data: "sheet_id="+sheet_id+"&content",
success: function(data){
var obj = JSON.parse(data);
const content = obj[0].wholesale_product_id;
console.log(content);
}
});
}
});
}
});
} );
if($(this).html() == 'Link Product'){
$(search_box).show();
$(search_box).focus();
$(this).html('Cancel');
$(this).removeClass("btn btn-info");
$(this).addClass("btn btn-warning");
} else if($(this).html() == 'Cancel'){
$(search_box).hide();
$(this).removeClass("btn btn-warning");
$(this).addClass("btn btn-info");
$(this).html('Link Product');
}
} );
$(function() {
$(".wholesale_product_search").autocomplete({
source: ajax_url,
minLength: 1
});
});
我不知道如何使编辑产品 html 值保持在页面刷新，每次刷新该页面时，所有按钮都会返回说链接产品，但我只希望空白成分框有一个“链接产品”按钮，任何加载了成分的按钮都需要说“编辑产品”。
这几天我已经被这件事逼疯了，我已经筋疲力尽了。
任何帮助，从字面上看，任何事情都会让我失去理智。
** 编辑 **
我知道这是一团糟，但我的截止日期很快就要到了，我离我还很远，此时我会尽一切努力让它发挥作用。它在内部使用，外界无法访问。
【问题讨论】：
-
帮助我们帮助您。您可以将代码减少到最低限度以重现您的问题吗？它不需要复制你的实际问题，只需复制它的模式。
-
我真的希望我能，这就是我似乎把自己编码到角落的问题。我不知道如何减少它。我担心我需要从头开始，这对我来说是一个非常糟糕的选择。
-
您的确切业务需求不是那么清楚，但是：如果您希望按钮显示“编辑产品”，那么您有两个选择 1）在 php 期间呈现它 2）在之后通过 js 更改它加载。您已经在 js 中通过搜索操作有效地对其进行了更改，因此相同的代码只需要确定何时应该更改。但是，如果您知道 何时 它应该显示编辑按钮，那么在呈现按钮时在 php 中进行更改会更好（即：如果产品已被编辑，则显示“编辑”按钮，否则显示“链接”按钮）（据我了解要求））
-
我将采用不同的方法，而不是编辑按钮，所以 p 元素在单击时是可编辑的，然后在模糊 ajax 以保存更改时是可编辑的
标签： javascript php jquery html css